2020-06-07 16:26

TelwsView.vue

@@ -10,24 +10,49 @@
       <v-spacer />
       <v-text-field
         v-if="this.hideUrl == undefined"
+        :disabled="disableUrl"
         label="Telws URL"
         single-line
         prepend-icon="mdi-link-variant"
         hide-details
         v-model="telwsurl"
       />
-      <v-btn
-        icon
-        @click="connect"
-      >
-        <v-icon>mdi-lan-connect</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        @click="disconnect"
-      >
-        <v-icon>mdi-lan-disconnect</v-icon>
-      </v-btn>
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on }">
+          <v-btn
+            icon
+            @click="connect"
+            v-on="on"
+          >
+            <v-icon>mdi-lan-connect</v-icon>
+          </v-btn>
+        </template>
+        <span>Connect</span>
+      </v-tooltip>
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on }">
+          <v-btn
+            icon
+            @click="disconnect"
+            v-on="on"
+          >
+            <v-icon>mdi-lan-disconnect</v-icon>
+          </v-btn>
+        </template>
+        <span>Disconnect</span>
+      </v-tooltip>
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on }">
+          <v-btn
+            icon
+            v-on="on"
+            @click="popChangeBackgroundDialog"
+          >
+            <v-icon>mdi-palette</v-icon>
+          </v-btn>
+        </template>
+        <span>Change Console Background Color</span>
+      </v-tooltip>
     </v-toolbar>
     <v-layout fill-height>
       <xterm-vue
@@ -91,6 +116,35 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog
+      v-model="changeBackgroundDialog"
+      max-width="290"
+    >
+      <v-card>
+        <v-card-title class="headline">Change Background</v-card-title>
+
+        <v-card-text>
+          <v-color-picker
+            flat
+            hide-mode-switch
+            mode="hexa"
+            v-model="background"
+          />
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn
+            color="danger"
+            text
+            @click="closeChangeBackgroundDialog"
+          >
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-layout>
 </template>
 
@@ -108,11 +162,21 @@ const ConnState = {
 };
 export default {
   name: "telws_view",
-  props: ["hideUrl", "defaultUrl", "autoConnect"],
+  props: ["hideUrl", "defaultUrl", "autoConnect", "defaultBackground", "disableUrl"],
+  watch: {
+    background(newVal, oldVal) {
+      if (this.$refs.term.$term) {
+        console.log("Change Background", this.$refs.term.$term, newVal);
+        this.$refs.term.$term.setOption("theme", { background: newVal });
+      }
+    }
+  },
   data: () => ({
+    background: "",
     writeBarText: "",
     title: "Untitled",
     telwsurl: "",
+    changeBackgroundDialog: false,
     userAuthDialog: false,
     authDialogUsername: "",
     authDialogPassword: "",
@@ -129,6 +193,11 @@ export default {
   }),
   mounted() {
     this.$refs.term.fit();
+    if (this.defaultBackground) {
+      this.background = this.defaultBackground;
+    } else {
+      this.background = "#002b36";
+    }
     if (this.defaultUrl) {
       this.telwsurl = this.defaultUrl;
     }
@@ -140,11 +209,17 @@ export default {
     this.disconnect();
   },
   methods: {
-    focusUsernameTextfield(){
-      this.$refs.authUsername.focus()
+    popChangeBackgroundDialog() {
+      this.changeBackgroundDialog = true;
+    },
+    closeChangeBackgroundDialog() {
+      this.changeBackgroundDialog = false;
     },
-    focusPasswordTextfield(){
-      this.$refs.authPassword.focus()
+    focusUsernameTextfield() {
+      this.$refs.authUsername.focus();
+    },
+    focusPasswordTextfield() {
+      this.$refs.authPassword.focus();
     },
     pasteWriteBar(event) {
       this.$refs.term.paste(this.writeBarText);
@@ -157,10 +232,10 @@ export default {
       this.authDialogUsername = "";
       this.authDialogPassword = "";
       this.userAuthDialog = true;
-      var self = this
+      var self = this;
       this.$nextTick(() => {
         self.focusUsernameTextfield();
-      })
+      });
     },
     doUserLogin() {
       this.userAuthDialog = false;
@@ -197,16 +272,16 @@ export default {
       this.$refs.term.$term.writeln(
         "Connecting Websocket '" + this.connSM.wsurl + "'..."
       );
-      var trueUrl = this.connSM.wsurl + "?token=" + this.connSM.auth_jwt
+      var trueUrl = this.connSM.wsurl + "?token=" + this.connSM.auth_jwt;
       this.connSM.wsconn = new WebSocket(trueUrl);
       var tty = this.$refs.term.$term;
       var wsconn = this.connSM.wsconn;
-      var self = this
+      var self = this;
       wsconn.onopen = function() {
         //wsconn.binaryType = "arrayBuffer"
-        wsconn.binaryType = "blob"
+        wsconn.binaryType = "blob";
         tty.writeln("Connected.\r\n");
-        self.connSM.state = ConnState.CONNECTED
+        self.connSM.state = ConnState.CONNECTED;
       };
       wsconn.onmessage = function(event) {
         var er = new FileReader();
@@ -294,8 +369,8 @@ export default {
       this.$refs.term.$term.writeln("");
       this.$refs.term.$term.writeln("Disconnected.");
       this.$refs.term.$term.onData(function(data) {});
-      if(this.connSM.wsconn){
-        this.connSM.wsconn.close()
+      if (this.connSM.wsconn) {
+        this.connSM.wsconn.close();
       }
     },
     connect() {
@@ -309,7 +384,8 @@ export default {
       if (turl.protocol === "https:") {
         schpre = "wss:";
       }
-      this.connSM.wsurl = schpre + "//" + turl.host + turl.pathname + "ws.satori"
+      this.connSM.wsurl =
+        schpre + "//" + turl.host + turl.pathname + "ws.satori";
       this.$refs.term.$term.writeln("Connecting " + this.telwsurl + "...");
       var self = this;
       this.connSM.continueDo = true;
@@ -368,4 +444,4 @@ export default {
     }
   }
 };
-</script>
+</script>