options dialog

client/src/App.vue

@@ -8,59 +8,156 @@
         indeterminate
         color="yellow darken-2"
     ></v-progress-linear>
-    <!--v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar-->
 
     <v-main>
       <router-view />
     </v-main>
+
+    <template>
+        <v-dialog
+            v-model="dialog"
+            fullscreen
+
+            transition="dialog-bottom-transition"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+                fab
+                dark
+                small
+                fixed
+                top
+                right
+                color="primary"
+                style="z-index: 100"
+                v-bind="attrs"
+                v-on="on"
+            >
+              <v-icon dark>
+                mdi-cog-outline
+              </v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-toolbar
+                dark
+                color="primary"
+            >
+              <v-btn
+                  icon
+                  dark
+                  @click="discard()"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+              <v-toolbar-title>Settings</v-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-toolbar-items>
+                <v-btn
+                    dark
+                    text
+                    @click=save()
+                >
+                  Save
+                </v-btn>
+              </v-toolbar-items>
+            </v-toolbar>
+            <v-list
+                two-line
+                subheader
+            >
+              <v-subheader>Configuration</v-subheader>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>Server address</v-list-item-title>
+                  <v-list-item-subtitle>Hostname of the fastlane server</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-text-field v-model="options_server_address" :rules=rules></v-text-field>
+                </v-list-item-content>
+              </v-list-item>
+              <v-subheader>Notifications</v-subheader>
+              <v-list-item>
+                <v-list-item-action>
+                  <v-checkbox v-model="notifications" disabled></v-checkbox>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>Review can be merged</v-list-item-title>
+                  <v-list-item-subtitle>Notify me about reviews ready to be merged.</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-dialog>
+    </template>
+
     <v-overlay :value="!connected"></v-overlay>
   </v-app>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import {mapState} from "vuex";
+import {mapMutations, mapState} from "vuex";
 
 export default Vue.extend({
   name: "App",
 
-  computed: mapState({
-    connected: state => state.socket.isConnected
-  }),
+  computed: {
+    options_server_address: {
+      get() {
+        return this.$store.state.server_address
+      },
+      set(value) {
+        this.update_server_address(value)
+      }
+    },
+    ...mapState({
+      connected: state => state.socket.isConnected,
+      server_address: state => state.server_address,
+    }),
+  },
+
+  methods: {
+    save() {
+      if (!isValidWSUrl(this.options_server_address || '')) {
+        return
+      }
+      this.dialog = false;
+      this.$store.dispatch("persist_server_address")
+    },
+    discard() {
+      if (!isValidWSUrl(this.options_server_address || '')) {
+        return
+      }
+      this.dialog = false;
+      this.$store.dispatch("persist_server_address")
+    }, ...mapMutations([
+        "update_server_address",
+    ])
+  },
 
   data: () => ({
-    //
+    dialog: false,
+    notifications: true,
+    rules: [
+      value => !!value || 'Required.',
+      value => isValidWSUrl(value || '') || 'Invalid hostname',
+    ],
   }),
 });
+
+function isValidWSUrl(string) {
+  let url;
+
+  try {
+    url = new URL("ws://"+string);
+  } catch (_) {
+    return false;
+  }
+
+  return true;
+}
+
 </script>

client/src/main.ts

@@ -7,8 +7,19 @@ import vuetify from "./plugins/vuetify";
 import './assets/css/styles.scss';
 import VueNativeSock from "vue-native-websocket";
 
-//Vue.use(VueNativeSock, 'ws://192.168.1.101:3001/v1/ws', {
-Vue.use(VueNativeSock, 'ws://127.0.0.1:3000/v1/ws', {
+let serverAddress = localStorage.getItem("server_address");
+console.log("got server address from local storage", serverAddress)
+
+if (serverAddress === undefined || serverAddress === null || serverAddress.length == 0) {
+    serverAddress = "127.0.0.1:3000";
+    console.log("server address is empty, defaulting", serverAddress)
+}
+
+console.log("store server address before", store.state.server_address)
+store.state.server_address = serverAddress
+console.log("store server address now", store.state.server_address)
+
+Vue.use(VueNativeSock, "ws://"+store.state.server_address+"/v1/ws", {
     store: store,
     format: 'json',
     reconnection: true, // (Boolean) whether to reconnect automatically (false)

client/src/store/index.ts

@@ -12,20 +12,29 @@ export default new Vuex.Store({
       message: '',
       reconnectError: false,
     },
+    server_address: "",
     reviews: new Array<{id: string}>(),
     merged: [], // list of merged reviews
     notifications: new Array<{id: string}>(),
   },
   actions: {
     merge: function(context, reviewID) {
       Vue.prototype.$socket.sendObj({name: "MERGE", data: reviewID})
+    },
+    persist_server_address: function (context) {
+      console.log("changing server address in store to ", context.state.server_address)
+      localStorage.setItem("server_address", context.state.server_address)
+      location.reload(); // hacky, but works
     }
   },
   modules: {},
   mutations: {
     close_notification(state, id) {
       state.notifications = state.notifications.filter(n => n.id !== id);
     },
+    update_server_address(state, server_address) {
+      state.server_address = server_address
+    },
     SOCKET_ONOPEN (state, event)  {
       Vue.prototype.$socket = event.currentTarget
       state.socket.isConnected = true
@@ -43,15 +52,12 @@ export default new Vuex.Store({
           state.reviews = message.data;
           break;
         case "REVIEWS-MERGED":
-          console.log("reviews merged", message.data)
           state.merged = message.data;
           break;
         case "NOTIFICATION":
-          console.log("received notification", message.data)
           state.notifications.unshift(message.data);
           break;
         case "SYSTEM-NOTIFICATION":
-          console.log("received system notification", message.data)
           if (window.ipc !== undefined) {
             window.ipc.send('synchronous-message', message.data);
           }