Added client code, updated README and removed debug logs

supern64 · Jul 18, 2020 · 8dcc0d3 · 8dcc0d3
1 parent 7af3cb7
commit 8dcc0d3
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# webpad
+#WebPad Server
+
+WebPad is a program for controlling your computer via other devices to perform certain actions.  
+Define your commands in commands.js, and start writing!  
+Client at [http://webpadclient.glitch.me](http://webpadclient.glitch.me).  
+The client source code will be included here as well in the client/ folder.
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+    <link rel="stylesheet" href="/style.css">
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/Olical/EventEmitter/EventEmitter.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/supern64/customlibs/WSClient.js"></script>
+
+    <script src="/script.js" defer></script>
+    <title>WebPad Client</title>
+  </head>
+  <body>
+    <div id="app">
+      <center>
+        <h1 class="text-black-50 font-weight-light">WebPad Client v1</h1><br><br>
+        <div id="connectTo" class="text-black-50 font-weight-light" v-if="!isConnected">
+          Connect to: <input v-model="serverAddress"> <button v-on:click="connect" class="btn btn-primary">Connect</button><br><br>
+          <div class="alert alert-danger" role="alert" v-if="alertSent">
+            {{ alertMessage }}
+          </div>
+        </div>
+        <div id="manageMenu" v-if="isConnected" class="align-middle">
+          <!-- Command Return Modal -->
+          <div class="modal fade" id="commandReturn" tabindex="-1" role="dialog" aria-labelledby="returnModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="returnModalLabel">Returned from command</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  {{ popupData }}
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Variable Selection Modal -->
+          <div class="modal fade" id="varSelect" tabindex="-1" role="dialog" aria-labelledby="returnModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="returnModalLabel">Select command options</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  <form id="argumentSelectionForm">
+                    <div v-for="arg in commandVars">
+                      {{ arg.friendlyName }}: <input type="text" v-bind:data-boundto="arg.name" v-bind:required="arg.required ? true : false" v-bind:title="arg.description">
+                    </div>
+                  </form>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                  <button type="button" class="btn btn-primary" v-on:click="handleArgForm($event)">Execute</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Page Code -->
+          <div class="alert alert-danger" role="alert" v-if="alertSent">
+            {{ alertMessage }}
+          </div>
+          <button class="btn btn-primary command-btn" v-bind:data-boundto="command.name" v-bind:title="command.description" v-on:click="executeCommand($event)" v-for="command in commands">{{ command.friendlyName }}</button>
+        </div>
+      </center>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,88 @@
+var client;
+
+function connect() {
+  try {
+    client = new WSClient("ws://" + app.serverAddress + ":8222")
+  } catch(e) {
+    alertC("Connection Failed: " + e)
+    return
+  }
+  client.on("open", (evt) => {
+    app.isConnected = true
+    alertN()
+    client.send(JSON.stringify({messageType: "fetch"}))
+  })
+  client.on("message", (message, evt) => {
+    message = JSON.parse(message)
+    switch(message.messageType) {
+      case "success":
+        if (Object.keys(message).includes("commands")) { // came from a 'fetch' command
+          app.commands = message.commands
+        }
+        return
+      case "undetermined":
+        app.popupData = message.result
+        $("#commandReturn").modal('show')
+        return
+      case "error":
+        alertC("The server reported an error: " + message.message)
+        return
+      case "handshake":
+        return
+      default:
+        client.send(JSON.stringify({messageType: "error", message: "MESSAGE_TYPE_INVALID"}))
+        break
+    }
+  })
+  client.on("close", (code, res, evt)=> {
+    app.isConnected = false
+    alertC("Connection Closed: " + res)
+  })
+}
+
+function executeCommand(evt) {
+  var button = evt.target
+  var command = button.getAttribute("data-boundto")
+  command = app.commands.find(r => r.name === command)
+  app.commandCtx = command
+  if (command.arguments) {
+    app.commandVars = command.arguments
+    $("#varSelect").modal("show")
+  } else {
+    client.send(JSON.stringify({messageType: "command", command: command.name}))
+  }
+}
+
+function handleArgForm(evt) {
+  var form = document.getElementById("argumentSelectionForm")
+  var mappedArgs = {}
+  for (var i of form.elements) {
+    mappedArgs[i.getAttribute("data-boundto")] = i.value
+  }
+  client.send(JSON.stringify({messageType: "command", command: app.commandCtx.name, arguments: mappedArgs}))
+  $("#varSelect").modal("hide")
+}
+
+var app = new Vue({
+  el: "#app",
+  data: {
+    isConnected: false,
+    serverAddress: "",
+    alertSent: false,
+    alertMessage: "",
+    commands: [],
+    popupData: "",
+    commandVars: [],
+    commandCtx: ""
+  },
+  methods: {connect, executeCommand, handleArgForm}
+})
+
+function alertC(message) {
+  app.alertSent = true;
+  app.alertMessage = message;
+}
+function alertN(message) {
+  app.alertSent = false;
+  app.alertMessage = "";
+}
diff --git a/client/style.css b/client/style.css
@@ -0,0 +1,9 @@
+body {
+  margin: 2em;
+}
+
+.command-btn {
+  width: 30%;
+  height: 10%;
+  margin: 0px 3% 2.5%;
+}
diff --git a/commands.js b/commands.js
@@ -7,7 +7,7 @@ function say(arguments) {
 
 function helloWorld() {
 	console.log("Hello World")
-	return true
+	return "Hello World"
 }
 
 const commands = [
@@ -23,6 +23,12 @@ const commands = [
 		friendlyName: "Say Hello World",
 		description: "Hello World!",
 		function: helloWorld
+	},
+	{
+		name: "helloWorld2",
+		friendlyName: "Say Hello World No.2",
+		description: "Hello World 2!",
+		function: helloWorld
 	}
 ]
 

diff --git a/index.js b/index.js
@@ -8,6 +8,7 @@ const wss = new WebSocket.Server({host: "0.0.0.0", port: 8222});
 //set up server to receive and parse message
 console.log("WebPad Server is running on port 8222")
 wss.on("connection", function connection(ws) {
+	console.log("A client connected.")
 	ws.send(JSON.stringify({messageType: "handshake"}))
 	ws.on("message", function incoming(message) {
 		parseMessage(message, ws);
@@ -22,7 +23,6 @@ function parseMessage(message, ws) {
 		ws.send(JSON.stringify({messageType: "error", message: "INVALID_JSON"}))
 		return
 	}
-	console.log(message)
 	// message types
 	switch(message.messageType) {
 		case "error":

diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "webpadserver",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "WebPad Server to connect to",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node index.js"
   },
   "repository": {
     "type": "git",