Merge pull request #17 from sitewhere/v2.1.0

Release version 2.1.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sitewhere-admin-ui",
   "productName": "SiteWhere Admin",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "SiteWhere Administrative User Interface",
   "main": "index.js",
   "scripts": {
@@ -52,40 +52,42 @@
   },
   "devDependencies": {
     "@types/electron-is-dev": "^0.3.0",
-    "@types/node": "^10.7.1",
+    "@types/leaflet": "^1.4.6",
+    "@types/leaflet-draw": "^0.4.14",
+    "@types/node": "^10.14.12",
     "@types/universal-analytics": "^0.4.2",
-    "@types/uuid": "^3.4.3",
-    "@types/vuelidate": "^0.7.4",
-    "electron": "^4.1.0",
-    "electron-builder": "^20.39.0",
+    "@types/uuid": "^3.4.5",
+    "@types/vuelidate": "^0.7.5",
+    "electron": "^4.2.9",
+    "electron-builder": "^20.44.4",
     "electron-updater": "^3.2.3",
-    "electron-webpack": "^2.6.2",
-    "electron-webpack-ts": "^3.1.1",
-    "electron-webpack-vue": "^2.2.3",
-    "node-sass": "^4.9.3",
+    "electron-webpack": "^2.7.2",
+    "electron-webpack-ts": "^3.2.0",
+    "electron-webpack-vue": "^2.3.0",
+    "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
-    "sitewhere-ide-components": "0.0.28",
-    "tslint": "^5.13.1",
-    "typescript": "^3.4.5",
+    "sitewhere-ide-components": "^2.1.0",
+    "tslint": "^5.18.0",
+    "typescript": "^3.5.3",
     "vue-template-compiler": "^2.6.10",
     "vue2-ace-editor": "0.0.11",
-    "webpack": "^4.29.6"
+    "webpack": "^4.35.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/vue-fontawesome": "^0.1.1",
-    "@trodi/electron-splashscreen": "^0.3.1",
-    "axios": "^0.18.0",
+    "@trodi/electron-splashscreen": "^0.3.4",
+    "axios": "^0.18.1",
     "electron-is-dev": "^0.3.0",
     "electron-log": "^2.2.17",
-    "leaflet": "^1.3.1",
+    "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.2",
     "lodash": "^4.17.5",
     "material-icons": "^0.2.3",
     "moment": "^2.21.0",
     "mqtt": "^2.16.0",
-    "sitewhere-rest-api": "^1.0.10",
+    "sitewhere-rest-api": "^2.1.0",
     "sockjs-client": "^1.1.4",
     "source-map-support": "^0.5.8",
     "universal-analytics": "^0.4.20",
@@ -96,14 +98,14 @@
     "vue-flatpickr-component": "^2.4.1",
     "vue-highlightjs": "^1.3.3",
     "vue-moment": "^3.2.0",
-    "vue-router": "^3.0.2",
+    "vue-router": "^3.0.7",
     "vue-sticky-directive": "0.0.6",
     "vue2-leaflet": "0.0.58",
     "vuedraggable": "^2.18.1",
     "vuelidate": "^0.7.4",
-    "vuetify": "^1.5.7",
-    "vuex": "^3.1.0",
-    "vuex-persistedstate": "^2.4.2",
+    "vuetify": "^1.5.16",
+    "vuex": "^3.1.1",
+    "vuex-persistedstate": "^2.5.4",
     "webstomp-client": "^1.2.6"
   }
 }

src/renderer/App.vue

@@ -1,13 +1,13 @@
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  }
-};
+<script lang="ts">
+import { Component } from "sitewhere-ide-common";
+import Vue from "vue";
+
+@Component({})
+export default class App extends Vue {}
 </script>
 
 <style lang="scss">

src/renderer/class-component-hooks.js

@@ -0,0 +1,8 @@
+import { Component } from "sitewhere-ide-common";
+
+// Register the router hooks with their names
+Component.registerHooks([
+  "beforeRouteEnter",
+  "beforeRouteLeave",
+  "beforeRouteUpdate" // for vue-router 2.2+
+]);

src/renderer/components/Copyright.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="width: 100%; text-align: center;">
+    <span style="color: #aaa; font-size: 12px;">Copyright &copy; 2019 SiteWhere LLC</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component } from "sitewhere-ide-common";
+import Vue from "vue";
+
+@Component({})
+export default class Copyright extends Vue {}
+</script>

src/renderer/components/Login.vue

@@ -48,7 +48,7 @@
       <v-container>
         <div class="login-wrapper">
           <div class="sitewhere-logo"></div>
-          <sw-error-banner :error="error"/>
+          <sw-error-banner :error="error" />
           <v-card-text class="ma-0 pa-1">
             <div
               style="width: 100%; text-align: center; color: #333; font-size: 35px; font-family: RobotoRegular"
@@ -68,14 +68,11 @@
                   <span v-if="$v.password.$invalid && $v.$dirty">Password is required.</span>
                 </div>
               </v-flex>
-              <v-flex xs3 class="pr-3">
-                <v-select required :items="protocols" v-model="protocol" label="Protocol"></v-select>
+              <v-flex xs11>
+                <remotes-dropdown :remotes="remotes" @selected="onConnectionUpdated" />
               </v-flex>
-              <v-flex xs5 class="pr-3">
-                <v-text-field hide-details label="Server" v-model="server"></v-text-field>
-              </v-flex>
-              <v-flex xs4>
-                <v-text-field hide-details label="Port" type="number" v-model="port"></v-text-field>
+              <v-flex xs1>
+                <v-icon class="pt-2 pl-3 blue--grey text--darken-2" @click="onEditRemotes">edit</v-icon>
               </v-flex>
             </v-layout>
           </v-card-text>
@@ -97,11 +94,19 @@
               </v-card-actions>
             </v-card>
           </v-dialog>
+          <remotes-dialog ref="remotes" @save="onRemotesUpdated" />
         </div>
       </v-container>
       <div style="-webkit-app-region: drag" class="draggable-area"></div>
       <v-system-bar color="transparent" class="title-bar">
-        <v-btn flat icon small class="ma-0 mt-2 title-bar-button" color="grey" @click="minWindow">
+        <v-btn
+          flat
+          icon
+          small
+          class="ma-0 mt-2 title-bar-button"
+          color="grey"
+          @click="openWebTools"
+        >
           <v-icon>menu</v-icon>
         </v-btn>
         <v-spacer></v-spacer>
@@ -121,9 +126,11 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Component } from "sitewhere-ide-common";
+import { Component, Refs, Watch } from "sitewhere-ide-common";
 
 import SocialButton from "./SocialButton.vue";
+import RemotesDropdown from "./login/RemotesDropdown.vue";
+import RemotesDialog from "./login/RemotesDialog.vue";
 
 import Electron from "electron";
 import { handleError } from "./common/Utils";
@@ -135,6 +142,7 @@ import { GoogleAnalytics } from "../libraries/google-analytics";
 import { getJwt } from "../rest/sitewhere-api-wrapper";
 import { getUser } from "../rest/sitewhere-users-api";
 import { IUser, IUserResponseFormat } from "sitewhere-rest-api";
+import { IRemotes, IRemoteConnection } from "./common/ApplicationModel";
 
 // Discord logo and tooltip.
 const discordSvgContent: string =
@@ -158,7 +166,9 @@ const twitterTitle: string = "Follow SiteWhere on Twitter";
 
 @Component({
   components: {
-    SocialButton
+    SocialButton,
+    RemotesDropdown,
+    RemotesDialog
   },
   mixins: [validationMixin],
   validations: {
@@ -175,19 +185,6 @@ export default class Login extends Vue {
   error: string | null = null;
   username: string = "";
   password: string = "";
-  protocol: string | null = null;
-  server: string | null = null;
-  port: number | null = null;
-  protocols: { text: string; value: string }[] = [
-    {
-      text: "http",
-      value: "http"
-    },
-    {
-      text: "https",
-      value: "https"
-    }
-  ];
   loggingIn: boolean = false;
   settings: {} | null = null;
   discordSvgContent: string = discordSvgContent;
@@ -198,14 +195,27 @@ export default class Login extends Vue {
   githubTitle: string = githubTitle;
   twitterSvgContent: string = twitterSvgContent;
   twitterTitle: string = twitterTitle;
+  connection: IRemoteConnection | null = null;
+
+  // References.
+  $refs!: Refs<{
+    remotes: RemotesDialog;
+  }>;
 
   created() {
-    this.protocol = this.$store.getters.protocol;
-    this.server = this.$store.getters.server;
-    this.port = this.$store.getters.port;
     this.getOrCreateSiteWhereSettings();
   }
 
+  /** Compute remotes based on store */
+  get remotes(): IRemotes {
+    return this.$store.getters.remotes;
+  }
+
+  @Watch("remotes", { immediate: true })
+  onRemotesStoreUpdated(updated: IRemotes) {
+    console.log("Remotes store updated.", updated);
+  }
+
   // Called to attempt server login.
   async onLogin() {
     this.$v.$touch();
@@ -215,11 +225,6 @@ export default class Login extends Vue {
 
     let token = btoa(this.username + ":" + this.password);
 
-    // Save updates to server settings.
-    this.$store.commit("protocol", this.protocol);
-    this.$store.commit("server", this.server);
-    this.$store.commit("port", this.port);
-
     // Save Authorization token.
     this.$store.commit("authToken", token);
 
@@ -270,6 +275,31 @@ export default class Login extends Vue {
     GoogleAnalytics.sendStartupEvent(settings);
   }
 
+  /** Open dialog to edit remotes */
+  onEditRemotes() {
+    this.$refs.remotes.load(this.remotes);
+    this.$refs.remotes.openDialog();
+  }
+
+  /** Called after remotes are updated */
+  onRemotesUpdated(updated: IRemotes) {
+    this.$store.commit("remotes", updated);
+    this.$refs.remotes.closeDialog();
+  }
+
+  /** Called when connection selection is updated */
+  onConnectionUpdated(connection: IRemoteConnection) {
+    console.log("connection updated", connection);
+    this.connection = connection;
+    this.$store.commit("protocol", connection.protocol);
+    this.$store.commit("server", connection.host);
+    this.$store.commit("port", connection.port);
+  }
+
+  openWebTools() {
+    Electron.remote.getCurrentWebContents().openDevTools();
+  }
+
   minWindow() {
     Electron.remote.getCurrentWindow().minimize();
   }

src/renderer/components/SystemAdministration.vue

@@ -1,23 +1,18 @@
 <template>
   <v-app v-if="user">
-    <sw-in-app-system-bar style="-webkit-app-region: drag"/>
-    <v-navigation-drawer fixed style="margin-top: 25px;" v-model="drawer" app>
+    <sw-in-app-system-bar style="-webkit-app-region: drag" />
+    <v-navigation-drawer fixed :permanent="true" style="margin-top: 25px;" v-model="drawer" app>
       <v-toolbar color="#fff" class="elevation-1" style="height: 47px;" dense>
-        <div class="sitewhere-logo"/>
+        <div class="sitewhere-logo" />
+        <v-spacer />
+        <v-tooltip bottom>
+          <v-btn class="ma-0" icon @click="onLogOut" slot="activator">
+            <v-icon class="grey--text text--darken-1">exit_to_app</v-icon>
+          </v-btn>
+          <span>Log Out</span>
+        </v-tooltip>
       </v-toolbar>
-      <sw-navigation :sections="sections" @sectionSelected="onSectionClicked"/>
-      <v-menu class="current-user-block" top right offset-y>
-        <v-btn class="grey darken-1 white--text" slot="activator">
-          <font-awesome-icon icon="user" class="mr-2"/>
-          {{ fullname }}
-        </v-btn>
-        <v-list>
-          <v-list-tile @click="onUserAction(action)" v-for="action in userActions" :key="action.id">
-            <font-awesome-icon :icon="action.icon" class="mr-2"/>
-            <v-list-tile-title v-text="action.title"></v-list-tile-title>
-          </v-list-tile>
-        </v-list>
-      </v-menu>
+      <sw-navigation :sections="sections" @sectionSelected="onSectionClicked" />
     </v-navigation-drawer>
     <v-content>
       <v-container class="pa-0" fluid fill-height>
@@ -28,8 +23,10 @@
         </v-layout>
       </v-container>
     </v-content>
-    <sw-in-app-footer/>
-    <notifications/>
+    <sw-in-app-footer>
+      <copyright />
+    </sw-in-app-footer>
+    <notifications />
   </v-app>
 </template>
 
@@ -41,10 +38,13 @@ import { AxiosResponse } from "axios";
 import { getJwt } from "../rest/sitewhere-api-wrapper";
 import { Component, IAction, INavigationSection } from "sitewhere-ide-common";
 import { NavigationIcon } from "../libraries/constants";
+
+import Copyright from "./Copyright.vue";
 import Notifications from "./common/Notifications.vue";
 
 @Component({
   components: {
+    Copyright,
     Notifications
   }
 })
@@ -77,13 +77,6 @@ export default class SystemAdministration extends Vue {
       requireAll: ["ADMINISTER_TENANTS"]
     }
   ];
-  userActions: IAction[] = [
-    {
-      id: "logout",
-      title: "Log Out",
-      icon: "power-off"
-    }
-  ];
 
   created() {
     // Set up JWT auto-refresh.