Start implementing homepage

out/main/index.js

@@ -153,29 +153,41 @@ class AppManager {
     electron.app.relaunch();
     electron.app.exit();
   }
+  getElectronVersion() {
+    return process.versions.electron;
+  }
+  getChromeVersion() {
+    return process.versions.chrome;
+  }
+  getAppVersion() {
+    return electron.app.getVersion();
+  }
 }
 class IPCHandler {
   initializeIPC() {
     const configurationManager = new ConfigurationManager();
     electron.ipcMain.handle(
       "config:read-configuration",
-      (_) => configurationManager.readConfiguration()
+      () => configurationManager.readConfiguration()
     );
     electron.ipcMain.handle(
       "config:write-configuration",
       (_, configuration) => configurationManager.writeConfiguration(configuration)
     );
     electron.ipcMain.handle(
       "config:reset-configuration",
-      (_) => configurationManager.resetConfiguration()
+      () => configurationManager.resetConfiguration()
     );
     electron.ipcMain.on("browser:open-in-browser", (_, url) => {
       BrowserUtils.openInBrowser(url);
     });
     const dialogManager = new DialogManager();
-    electron.ipcMain.handle("dialog:show-folder-picker-dialog", (_) => dialogManager.showFolderPickerDialog());
+    electron.ipcMain.handle("dialog:show-folder-picker-dialog", () => dialogManager.showFolderPickerDialog());
     const appManager = new AppManager();
-    electron.ipcMain.on("app:restart", (_) => appManager.restartApplication());
+    electron.ipcMain.on("app:restart", () => appManager.restartApplication());
+    electron.ipcMain.handle("app:get-app-version", () => appManager.getAppVersion());
+    electron.ipcMain.handle("app:get-electron-version", () => appManager.getElectronVersion());
+    electron.ipcMain.handle("app:get-chrome-version", () => appManager.getChromeVersion());
   }
 }
 function createWindow() {

out/preload/index.js

@@ -13,7 +13,12 @@ const api = {
     showFolderPickerDialog: () => electron.ipcRenderer.invoke("dialog:show-folder-picker-dialog")
   },
   app: {
-    restart: () => electron.ipcRenderer.send("app:restart")
+    restart: () => electron.ipcRenderer.send("app:restart"),
+    versions: {
+      app: electron.ipcRenderer.invoke("app:get-app-version"),
+      chrome: electron.ipcRenderer.invoke("app:get-chrome-version"),
+      electron: electron.ipcRenderer.invoke("app:get-electron-version")
+    }
   }
 };
 if (process.contextIsolated) {

src/main/IPCHandler.ts

@@ -10,7 +10,7 @@ export default class IPCHandler {
         // Manipulating the file system.
         // const fsManager = new FileSystemManager();
         // ipcMain.handle("fs:read-file", (_, path) => {
-            
+
         // });
 
         // ipcMain.handle("fs:write-file", (event, path, contents) => {
@@ -20,17 +20,17 @@ export default class IPCHandler {
         // Manipulating the application's current configuration.
         const configurationManager = new ConfigurationManager();
         ipcMain.handle(
-            "config:read-configuration", 
+            "config:read-configuration",
             () => configurationManager.readConfiguration()
         );
 
         ipcMain.handle(
-            "config:write-configuration", 
+            "config:write-configuration",
             (_, configuration) => configurationManager.writeConfiguration(configuration)
         );
 
         ipcMain.handle(
-            "config:reset-configuration", 
+            "config:reset-configuration",
             () => configurationManager.resetConfiguration()
         );
 
@@ -46,5 +46,9 @@ export default class IPCHandler {
         // App actions
         const appManager = new AppManager();
         ipcMain.on("app:restart", () => appManager.restartApplication());
+
+        ipcMain.handle("app:get-app-version", () => appManager.getAppVersion());
+        ipcMain.handle("app:get-electron-version", () => appManager.getElectronVersion());
+        ipcMain.handle("app:get-chrome-version", () => appManager.getChromeVersion());
     }
 }

src/main/app/AppManager.ts

@@ -5,4 +5,16 @@ export default class AppManager {
         app.relaunch();
         app.exit();
     }
+
+    public getElectronVersion() {
+        return process.versions.electron;
+    }
+
+    public getChromeVersion() {
+        return process.versions.chrome;
+    }
+
+    public getAppVersion() {
+        return app.getVersion();
+    }
 }

src/preload/index.d.ts

@@ -1,24 +1,29 @@
 import Configuration from '@common/configuration/Configuration';
 
 interface ExposedAPI {
-  config: {
-    readConfiguration: () => Promise<Configuration>,
-    writeConfiguration: (contents: Configuration) => Promise<void>,
-    resetConfiguration: () => Promise<Configuration>
-  },
-  browser: {
-    openInBrowser: (url: string) => void
-  },
-  dialog: {
-    showFolderPickerDialog: () => Promise<string[] | undefined>
-  },
-  app: {
-    restart: () => void
-  }
+    config: {
+        readConfiguration: () => Promise<Configuration>,
+        writeConfiguration: (contents: Configuration) => Promise<void>,
+        resetConfiguration: () => Promise<Configuration>
+    },
+    browser: {
+        openInBrowser: (url: string) => void
+    },
+    dialog: {
+        showFolderPickerDialog: () => Promise<string[] | undefined>
+    },
+    app: {
+        restart: () => void,
+        versions: {
+            app: Promise<string>,
+            chrome: Promise<string>,
+            electron: Promise<string>
+        }
+    }
 }
 
 declare global {
-  interface Window {
-    api: ExposedAPI
-  }
+    interface Window {
+        api: ExposedAPI
+    }
 }

src/preload/index.ts

@@ -3,33 +3,37 @@ import Configuration from '@common/configuration/Configuration';
 
 // Custom APIs for renderer
 const api = {
-  config: {
-    readConfiguration: () => ipcRenderer.invoke("config:read-configuration"),
-    writeConfiguration: (config: Configuration) => ipcRenderer.invoke("config:write-configuration", config),
-    resetConfiguration: () => ipcRenderer.invoke("config:reset-configuration")
-  },
-  browser: {
-    openInBrowser: (url: string) => ipcRenderer.send("browser:open-in-browser", url)
-  },
-  dialog: {
-    showFolderPickerDialog: () => ipcRenderer.invoke("dialog:show-folder-picker-dialog")
-  },
-  app: {
-    restart: () => ipcRenderer.send("app:restart")
-  }
+    config: {
+        readConfiguration: () => ipcRenderer.invoke("config:read-configuration"),
+        writeConfiguration: (config: Configuration) => ipcRenderer.invoke("config:write-configuration", config),
+        resetConfiguration: () => ipcRenderer.invoke("config:reset-configuration")
+    },
+    browser: {
+        openInBrowser: (url: string) => ipcRenderer.send("browser:open-in-browser", url)
+    },
+    dialog: {
+        showFolderPickerDialog: () => ipcRenderer.invoke("dialog:show-folder-picker-dialog")
+    },
+    app: {
+        restart: () => ipcRenderer.send("app:restart"),
+        versions: {
+            app: ipcRenderer.invoke("app:get-app-version"),
+            chrome: ipcRenderer.invoke("app:get-chrome-version"),
+            electron: ipcRenderer.invoke("app:get-electron-version")
+        }
+    }
 };
-
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
 if (process.contextIsolated) {
-  try {
-    contextBridge.exposeInMainWorld('api', api);
-  } catch (error) {
-    console.error(error);
-  }
+    try {
+        contextBridge.exposeInMainWorld('api', api);
+    } catch (error) {
+        console.error(error);
+    }
 } else {
-  // @ts-ignore (define in dts)
-  window.api = api;
+    // @ts-ignore (define in dts)
+    window.api = api;
 }

src/renderer/components/pages/HomePage.vue

@@ -1,12 +1,74 @@
 <template>
     <v-container fluid>
-        <v-row />
+        <v-row>
+            <v-col>
+                <div class="mx-12">
+                    <h2>Project management</h2>
+                </div>
+            </v-col>
+            <v-divider vertical />
+            <v-col>
+                <div class="d-flex justify-center align-center mt-12">
+                    <img
+                        src="@renderer/assets/images/icon.png"
+                        style="max-width: 200px;"
+                    >
+                    <div class="d-flex flex-column align-center justify-center ml-4">
+                        <span class="logo-headline">
+                            Unipept Desktop {{ appVersion }}
+                        </span>
+                        <span class="logo-subline">
+                            Chrome v{{ chromeVersion }}
+                        </span>
+                        <span class="logo-subline">
+                            Electron v{{ electronVersion }}
+                        </span>
+                        <span
+                            v-if="updateAvailable"
+                            class="logo-subline"
+                            @click="updateNotesActive = true"
+                        >
+                            <v-icon
+                                style="position: relative; bottom: 2px;"
+                                color="success"
+                            >
+                                mdi-arrow-up-bold
+                            </v-icon>
+                            <a>An update is available!</a>
+                        </span>
+                    </div>
+                </div>
+                <!-- Release notes (display changes compared previous version of the application) -->
+                <!-- <release-notes-card class="mt-12 mx-12"></release-notes-card> -->
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+import GithubCommunicator from "@renderer/logic/communication/github/GithubCommunicator";
+import ComparatorUtils from "@renderer/logic/utils/ComparatorUtils";
+
+const appVersion = ref(await window.api.app.versions.app);
+const chromeVersion = ref(await window.api.app.versions.chrome);
+const electronVersion = ref(await window.api.app.versions.electron);
+
+const githubCommunicator = new GithubCommunicator();
+const remoteVersion = ref(await githubCommunicator.getMostRecentVersion());
+const updateAvailable = ref(ComparatorUtils.isVersionLargerThan(remoteVersion.value, appVersion.value));
+
 </script>
 
 <style scoped>
+.logo-headline {
+    margin-top: 8px;
+    font-size: 24px;
+    color: black;
+}
 
+.logo-subline {
+    font-size: 16px;
+    color: #777;
+}
 </style>

src/renderer/index.html

@@ -6,7 +6,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+      content="script-src 'self'"
     />
   </head>
 

src/renderer/logic/communication/github/GithubCommunicator.ts

@@ -0,0 +1,48 @@
+import NetworkUtils from "@renderer/logic/utils/NetworkUtils";
+
+export default class GitHubCommunicator {
+    private static checkedForUpdate = false;
+    private static remoteAppVersion = "";
+    private static releaseNotesCache = "";
+    private static releaseNotesVersion = "";
+
+    public async getRemoteAppVersion(): Promise<string> {
+        if (!GitHubCommunicator.checkedForUpdate) {
+            GitHubCommunicator.checkedForUpdate = true;
+            GitHubCommunicator.remoteAppVersion = await this.getMostRecentVersion();
+        }
+
+        return GitHubCommunicator.remoteAppVersion;
+    }
+
+    /**
+     * Returns the release content for a specific release version. This content is formatted as MarkDown.
+     *
+     * @param appVersion Version of the application for which changes need to be retrieved. Just should be the plain
+     * version number (no "v"-prefix!), e.g.: 0.6.2
+     * @return A list of all changes that were made during this release.
+     * @throws Error if the given release could not be found, or if no internet connection is established.
+     */
+    public async getReleaseNotes(appVersion: string): Promise<string> {
+        if (GitHubCommunicator.releaseNotesCache === "" || GitHubCommunicator.releaseNotesVersion !== appVersion) {
+            GitHubCommunicator.releaseNotesCache = (await NetworkUtils.getJSON(
+                `https://api.github.com/repos/unipept/unipept-desktop/releases/tags/v${appVersion}`
+            )).body;
+            GitHubCommunicator.releaseNotesVersion = appVersion;
+        }
+
+        return GitHubCommunicator.releaseNotesCache;
+    }
+
+    public async getAllReleases(): Promise<string[]> {
+        const result = await NetworkUtils.getJSON(
+            "https://api.github.com/repos/unipept/unipept-desktop/releases"
+        );
+
+        return result.map((obj: any) => obj.tag_name).map((tag: string) => tag.replace("v", ""));
+    }
+
+    public async getMostRecentVersion(): Promise<string> {
+        return (await this.getAllReleases())[0];
+    }
+}

src/renderer/logic/utils/ComparatorUtils.ts

@@ -0,0 +1,14 @@
+import { compareVersions } from "compare-versions";
+
+export default class ComparatorUtils {
+    /**
+     * Compares two version strings.
+     *
+     * @param firstVersion
+     * @param secondVersion
+     * @return True if firstVersion is larger than secondVersion
+     */
+    static isVersionLargerThan(firstVersion: string, secondVersion: string): boolean {
+        return compareVersions(firstVersion, secondVersion) === 1;
+    }
+}

src/renderer/logic/utils/NetworkUtils.ts

@@ -0,0 +1,6 @@
+export default class NetworkUtils {
+    public static async getJSON(url: string): Promise<any> {
+        const response = await fetch(url);
+        return response.json();
+    }
+}