Version 1.0.1

build-tools/binToTs.ts

@@ -1,20 +1,35 @@
 import { join } from "https://deno.land/[email protected]/path/mod.ts";
 import { copy } from "https://deno.land/[email protected]/fs/copy.ts";
 
-import { bin } from "../wwwzip/ui.ts";
+import { bin, version } from "../wwwzip/ui.ts";
 import { decompress } from "./zip.ts";
 
 export async function initServer(wwwRoot: string): Promise<boolean> {
   try {
-    const zipFile = await tsToZip(wwwRoot);
     const indexFile = join(wwwRoot, "index.html");
     const isExist = await exists(indexFile);
     if (isExist) {
-      return true;
+      //Check for update
+      const installedVersion = await getUiVersion(indexFile)
+
+      if (installedVersion === version) {
+        return true;
+      }
+
+      console.log(`Updating UI from V${installedVersion} to V${version}`)
+      //We need to remove old version
+      await Deno.remove(indexFile);
+      await Deno.remove(join(wwwRoot, "favicon.ico"));
+      await Deno.remove(join(wwwRoot, "assets"), { recursive: true });
+      await Deno.remove(join(wwwRoot, "icons"), { recursive: true });
     }
 
+    const zipFile = await tsToZip(wwwRoot);
+
+    //Decompress zip file
     await decompress(zipFile, wwwRoot);
     await Deno.remove(zipFile);
+
     const spa = join(wwwRoot, "spa");
     const spa_assets = join(spa, "assets");
     const spa_icons = join(spa, "icons");
@@ -28,18 +43,30 @@ export async function initServer(wwwRoot: string): Promise<boolean> {
     await copy(join(spa, "index.html"), join(wwwRoot, "index.html"));
     await copy(join(spa, "favicon.ico"), join(wwwRoot, "favicon.ico"));
 
-    Deno.remove(spa, { recursive: true });
+    await Deno.remove(spa, { recursive: true });
     return true;
   } catch (err) {
     console.log(err);
     return false;
   }
 }
 
+/**
+ * Convert zip file to base64 ts
+ * @date 2/3/2024 - 6:23:34 PM
+ *
+ * @export
+ * @async
+ * @param {string} path
+ * @param {string} fileName
+ * @returns {*}
+ */
 export async function zipToTs(path: string, fileName: string) {
+  const version = await getUiVersion(join(path, `spa\\index.html`));
+
   const binPath = join(path, `${fileName}.zip`);
   const uint = await Deno.readFile(binPath);
-
+  
   let binary = "";
   const len = uint.length;
 
@@ -50,12 +77,25 @@ export async function zipToTs(path: string, fileName: string) {
   const binBase64 = btoa(binary);
   const base64 = trunString(binBase64, 100);
 
-  const tsFileContent = `export const bin=\`${base64}\``;
+  const tsFileContent = `export const version='${version}';
+
+export const bin=\`${base64}\``;
   const tsFilePath = join("./wwwzip", `${fileName}.ts`);
   await Deno.writeTextFile(tsFilePath, tsFileContent);
-  console.log(`TS File saved to: ${tsFilePath}`);
+  await Deno.remove(binPath);
 }
 
+/**
+ * This function converts the ts base64 file to .zip file
+ * The zip file will be wwwroot
+ * example: C:\Users\USERNAME\AppData\Local\deno\denoman\wwwroot
+ * @date 2/3/2024 - 6:09:39 PM
+ *
+ * @export
+ * @async
+ * @param {string} wwwRoot
+ * @returns {Promise<string>}
+ */
 export async function tsToZip(wwwRoot: string): Promise<string> {
   const binContent = atob(bin);
   const binArray = new Uint8Array(binContent.length);
@@ -70,6 +110,17 @@ export async function tsToZip(wwwRoot: string): Promise<string> {
   return zipFile;
 }
 
+async function getUiVersion(indexFile: string): Promise<string> {
+  const content = await Deno.readTextFile(indexFile);
+  const regEx = /content\=\"DenoMan\s(.*?)\"\>/gm;
+  const matches = content.matchAll(regEx);
+  let version = "0";
+  for (const m of matches) {
+    version = m[1];
+  }
+  return version;
+}
+
 function trunString(input: string, width: number): string {
   const it = Math.ceil(input.length / width);
   let rtnVal = "";

deno.json

@@ -1,6 +1,7 @@
 {
   "tasks": {
-    "start": "deno run -A mod.ts"
+    "start": "deno run -A mod.ts",
+    "build": "deno run -A prepare-spa.ts"
   },
 
   "lint": {

prepare-spa.ts

@@ -1,12 +1,41 @@
+import { parseArgs } from "https://deno.land/[email protected]/cli/parse_args.ts";
+
+
 import { zipToTs } from "./build-tools/binToTs.ts";
 import { compress } from "./build-tools/zip.ts";
 
-console.log("Compressing ...");
-await compress("./q-manui/dist/spa", "./q-manui/dist/ui.zip", {
-  overwrite: true,
-  flags: [],
-});
-console.log(`Compressed: q-manui/dist/ui.zip`);
+await increaseUiVersion();
+buildQuasar();
+await spaToTypeScript();
+
+
+function buildQuasar() {
+  const msg = "Please go to [./q-manui] and build the project [quasar build]."
+  alert(msg);
+}
+
+async function increaseUiVersion() {
+  const newVersion = prompt("Please enter the new version:");
+
+  const packageFile = "./q-manui/package.json";
+  let packageJson = await Deno.readTextFile(packageFile);
+  const pkg = JSON.parse(packageJson);
+  pkg.version  = newVersion;
+  pkg.description = `DenoMan ${newVersion}`
+  packageJson = JSON.stringify(pkg, null, 2);
+
+  await Deno.writeTextFile(packageFile, packageJson);
+  console.log("package.json file updated.")
+}
+
+async function spaToTypeScript() {
+  console.log("Compressing [q-manui/dist/spa] ...");
+  await compress("./q-manui/dist/spa", "./q-manui/dist/ui.zip", {
+    overwrite: true,
+    flags: [],
+  });
 
-console.log("Zip to ts ...");
-await zipToTs("./q-manui/dist", "ui");
+  console.log("Converting [q-manui/dist/ui.zip] to [ui.ts]");
+  await zipToTs("./q-manui/dist", "ui");
+  console.log("[ui.ts] created.");
+}

q-manui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "q-manui",
-  "version": "0.0.1",
-  "description": "denoman spa ui",
+  "version": "1.0.1",
+  "description": "DenoMan 1.0.1",
   "productName": "q-manui",
   "author": "Sameh Fakoua <[email protected]>",
   "private": true,
@@ -41,4 +41,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}

q-manui/src/components/dashboard/CriticalComponent.vue

@@ -0,0 +1,71 @@
+<template>
+  <q-card flat bordered style="min-height: 268px" v-if="loading">
+    <q-item>
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar" />
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>
+          <q-skeleton type="text" />
+        </q-item-label>
+        <q-item-label caption>
+          <q-skeleton type="text" />
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-skeleton height="200px" square />
+  </q-card>
+  <q-card flat bordered v-if="!loading">
+    <q-card-section>
+      <div class="text-h6 text-red-6">
+        <q-icon name="notification_important" />
+        Critical
+      </div>
+      <div class="text-weight-thin text-red-3">
+        Automatic services & not running
+      </div>
+    </q-card-section>
+    <div class="critical-table">
+      <q-markup-table dense flat>
+        <tbody>
+          <tr v-for="s in critical" :key="s.name">
+            <td class="text-red-9">
+              <q-icon name="sync_problem" /> {{ s.caption }}
+            </td>
+          </tr>
+        </tbody>
+      </q-markup-table>
+    </div>
+  </q-card>
+</template>
+
+<style lang="css" scoped>
+.critical-table {
+  overflow-y: auto;
+  max-height: 172px;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { PropType } from 'vue';
+
+import { ServiceModel } from '../models';
+
+export default defineComponent({
+  name: 'CriticalComponent',
+  props: {
+    critical: Object as PropType<ServiceModel[] | undefined>,
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup() {
+    return {};
+  },
+});
+</script>