Merge pull request #90 from emqx/develop

Release v1.1.0

README.md

@@ -2,20 +2,36 @@
 
 Cross-platform MQTT desktop client
 
+## Installation
+
+Download from [GitHub Releases](https://github.com/emqx/MQTTX/releases) and install it.
+
 ## Project setup
-```
+
+``` shell
+# Clone
+
+git clone [email protected]:emqx/MQTTX.git
+
+cd MQTTX
+
+# Install dependencies
+
 yarn install
-```
 
-### Compiles and hot-reloads for development
-```
+# Compiles and hot-reloads for development
+
 yarn run electron:serve
-```
 
-### Compiles and minifies for production
-```
+# Compiles and minifies for production
+
 yarn run electron:build
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## License
+
+Apache License 2.0, see [LICENSE](https://github.com/emqx/MQTTX/blob/master/LICENSE).

main/getMenuTemplate.ts

@@ -0,0 +1,125 @@
+import { shell, BrowserWindow } from 'electron'
+import updateChecker from './updateChecker'
+
+const isMac = process.platform === 'darwin'
+
+const getMenuTemplate = (win: BrowserWindow): $TSFixed => {
+  return [
+    // App
+    ...(isMac
+      ? [
+          {
+            label: 'MQTTX',
+            submenu: [
+              { role: 'about' },
+              { type: 'separator' },
+              {
+                label: 'Preferences',
+                accelerator: 'cmd + ,',
+                click: () => {
+                  win.webContents.send('preferences')
+                },
+              },
+              {
+                label: 'Check for update',
+                click: () => {
+                  updateChecker(false)
+                },
+              },
+              { type: 'separator' },
+              { role: 'hide' },
+              { role: 'hideothers' },
+              { role: 'unhide' },
+              { type: 'separator' },
+              { role: 'quit' },
+            ],
+          },
+        ]
+      : []),
+    // File
+    {
+      label: 'File',
+      submenu: [isMac ? { role: 'close' } : { role: 'quit' }],
+    },
+    // EditMenu
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        ...(isMac
+          ? [
+              { role: 'pasteAndMatchStyle' },
+              { role: 'delete' },
+              { role: 'selectAll' },
+              { type: 'separator' },
+              {
+                label: 'Speech',
+                submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
+              },
+            ]
+          : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forcereload' },
+        { role: 'toggledevtools' },
+        { type: 'separator' },
+        { role: 'resetzoom' },
+        { role: 'zoomin' },
+        { role: 'zoomout' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+    // windowMenu
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' },
+        { role: 'zoom' },
+        ...(isMac
+          ? [
+              { type: 'separator' },
+              { role: 'front' },
+              { type: 'separator' },
+              { role: 'window' },
+            ]
+          : [{ role: 'close' }]),
+      ],
+    },
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn more MQTTX',
+          click: async () => {
+            await shell.openExternal('https://github.com/emqx/MQTTX')
+          },
+        },
+        {
+          label: 'Report problem',
+          click: async () => {
+            await shell.openExternal('https://github.com/emqx/MQTTX/issues')
+          },
+        },
+        { type: 'separator' },
+        {
+          label: 'EMQ X Website',
+          click: async () => {
+            await shell.openExternal('https://emqx.io')
+          },
+        },
+      ],
+    },
+  ]
+}
+
+export default getMenuTemplate

src/updateChecker.ts → main/updateChecker.ts

@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version: string = 'v1.0.0'
+const version: string = 'v1.1.0'
 const release: string = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl: string = 'https://github.com/emqx/MQTTX/releases/latest'
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",
@@ -43,7 +43,6 @@
     "@types/lodash": "^4.14.142",
     "@types/lowdb": "^1.0.9",
     "@types/mocha": "^5.2.4",
-    "@types/mqtt": "^2.5.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-e2e-cypress": "^3.8.0",
     "@vue/cli-plugin-typescript": "^3.8.0",

src/background.ts

@@ -1,19 +1,24 @@
 'use strict'
 
-import { app, protocol, BrowserWindow, ipcMain, shell } from 'electron'
+import {
+  app, protocol, BrowserWindow, ipcMain, shell, Menu,
+} from 'electron'
 import {
   createProtocol,
   installVueDevtools,
 } from 'vue-cli-plugin-electron-builder/lib'
 import db from './datastore/index'
-import updateChecker from './updateChecker'
+import updateChecker from '../main/updateChecker'
+import getMenuTemplate from '../main/getMenuTemplate'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win: BrowserWindow | null
 
+let menu: Menu | null
+
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }])
 
@@ -45,6 +50,11 @@ function createWindow() {
     icon: `${__static}/app.ico`,
   })
 
+  // Menu Manger
+  const templateMenu = getMenuTemplate(win)
+  menu = Menu.buildFromTemplate(templateMenu)
+  Menu.setApplicationMenu(menu)
+
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)

src/components/Ipc.vue

@@ -15,6 +15,9 @@ export default class Home extends Vue {
       const value: any = args[1]
       this.handleIcpEvents(eventType, value)
     })
+    ipcRenderer.on('preferences', () => {
+      this.$router.push({ path: '/settings' })
+    })
   }
 
   private unbindIpcEvents(): void {

src/store/modules/app.ts

@@ -1,35 +1,11 @@
 import Vue from 'vue'
-import { MqttClient } from 'mqtt'
 import { loadSettings, setSettings } from '@/utils/api/setting'
 
-interface ActiveConnection {
-  readonly id: string,
-}
-
-interface Client extends ActiveConnection {
-  client: MqttClient,
-}
-
-interface ClientInfo extends ActiveConnection {
-  showClientInfo: boolean,
-}
-
-interface Subscriptions extends ActiveConnection {
-  subscriptions: SubscriptionModel[],
-}
-
-interface UnreadMessage extends ActiveConnection {
-  unreadMessageCount: 0,
-}
-
-interface SubscriptionsVisible {
-  showSubscriptions: boolean
-}
-
 const TOGGLE_THEME: string = 'TOGGLE_THEME'
 const TOGGLE_LANG: string = 'TOGGLE_LANG'
 const TOGGLE_AUTO_CHECK: string = 'TOGGLE_AUTO_CHECK'
 const CHANGE_ACTIVE_CONNECTION: string = 'CHANGE_ACTIVE_CONNECTION'
+const PUSH_MESSAGE: string = 'PUSH_MESSAGE'
 const REMOVE_ACTIVE_CONNECTION: string = 'REMOVE_ACTIVE_CONNECTION'
 const CHANGE_SUBSCRIPTIONS: string = 'CHANGE_SUBSCRIPTIONS'
 const SHOW_CLIENT_INFO: string = 'SHOW_CLIENT_INFO'
@@ -66,23 +42,31 @@ const app = {
     [TOGGLE_AUTO_CHECK](state: App, autoCheck: boolean) {
       state.autoCheck = autoCheck
     },
-    [CHANGE_ACTIVE_CONNECTION](state: App, connection: Client) {
-      const client: MqttClient = connection.client
-      if (state.activeConnection[connection.id]) {
-        state.activeConnection[connection.id].client = client
+    [CHANGE_ACTIVE_CONNECTION](state: App, payload: Client) {
+      const client = payload.client
+      const messages = payload.messages
+      if (state.activeConnection[payload.id]) {
+        state.activeConnection[payload.id].client = client
+        state.activeConnection[payload.id].messages = messages
       } else {
-        state.activeConnection[connection.id] = {
+        state.activeConnection[payload.id] = {
           client,
+          messages,
         }
       }
     },
+    [PUSH_MESSAGE](state: App, payload: Message) {
+      if (state.activeConnection[payload.id]) {
+        state.activeConnection[payload.id].messages.push(payload.message)
+      }
+    },
     [REMOVE_ACTIVE_CONNECTION](state: App, id: string) {
       delete state.activeConnection[id]
       delete state.unreadMessageCount[id]
       delete state.showClientInfo[id]
     },
-    [CHANGE_SUBSCRIPTIONS](state: App, subs: Subscriptions) {
-      state.activeConnection[subs.id].subscriptions = subs.subscriptions
+    [CHANGE_SUBSCRIPTIONS](state: App, payload: Subscriptions) {
+      state.activeConnection[payload.id].subscriptions = payload.subscriptions
     },
     [SHOW_CLIENT_INFO](state: App, payload: ClientInfo) {
       state.showClientInfo[payload.id] = payload.showClientInfo
@@ -95,7 +79,7 @@ const app = {
       if (payload.unreadMessageCount !== undefined) {
         Vue.set(state.unreadMessageCount, payload.id, payload.unreadMessageCount)
       } else {
-        const count = state.unreadMessageCount[payload.id] += 1
+        const count = (state.unreadMessageCount[payload.id] += 1)
         Vue.set(state.unreadMessageCount, payload.id, count)
       }
     },
@@ -116,6 +100,9 @@ const app = {
     CHANGE_ACTIVE_CONNECTION({ commit }: any, payload: App) {
       commit(CHANGE_ACTIVE_CONNECTION, payload)
     },
+    PUSH_MESSAGE({ commit }: any, payload: App) {
+      commit(PUSH_MESSAGE, payload)
+    },
     REMOVE_ACTIVE_CONNECTION({ commit }: any, { id }: { id: string }) {
       commit(REMOVE_ACTIVE_CONNECTION, id)
     },

src/types/global.d.ts

@@ -9,6 +9,35 @@ declare global {
     clearValidate: () => void,
     resetFields: () => void,
   }
+
+  interface ActiveConnection {
+    readonly id: string,
+  }
+
+  interface Client extends ActiveConnection {
+    client: MqttClient | {},
+    messages: MessageModel[],
+  }
+
+  interface Message extends ActiveConnection {
+    message: MessageModel,
+  }
+
+  interface ClientInfo extends ActiveConnection {
+    showClientInfo: boolean,
+  }
+
+  interface Subscriptions extends ActiveConnection {
+    subscriptions: SubscriptionModel[],
+  }
+
+  interface UnreadMessage extends ActiveConnection {
+    unreadMessageCount?: 0,
+  }
+
+  interface SubscriptionsVisible {
+    showSubscriptions: boolean
+  }
 }
 
 declare global {
@@ -34,7 +63,8 @@ declare global {
     }
     activeConnection: {
       [id: string]: {
-        client: MqttClient,
+        client: MqttClient | {},
+        messages: MessageModel[],
         subscriptions?: SubscriptionModel[],
       },
     },