c0ckp1t 1.0.0

package/core/notify/NotifyUtils.mjs

@@ -0,0 +1,150 @@
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+/*
+    NotifyUtils.js
+    Note: Reactive Component
+
+    Usage:
+
+    import {api as notify } from "NotifyUtils"
+
+    function notifyGood() {
+        notify.notifyGood("test good")
+    }
+    function notifyBad() {
+        notify.notifyBad("test bad")
+    }
+    function displayHistory() {
+        notify.displayHistory()
+    }
+    function clearNotify() {
+        notify.clearNotify()
+    }
+
+*/
+import { reactive } from 'vue'
+
+// import { eventBus } from '../ws/WsUtils.mjs'
+
+// eventBus.on('/alert', (endpoint, pkt) => {
+//     api.infoDetails(`endpoint="${endpoint}"`, pkt)
+// })
+
+export const NotifyType = {
+    GOOD: "GOOD",
+    BAD: "BAD",
+    INFO: "INFO",
+}
+
+const MAX_LOG_COUNT = 50
+// const ACTIVE_TIME_MS = 2500 // time each message is shown
+// const REST_TIME_MS = 550 // time between messsages if there are multiple
+let notifyTimer = null
+
+
+// Really confusion but the machinary is in toast.vue
+// so wrong. It manipulates this data structure a
+
+// ________________________________________________________________________________
+// NOTIFY STORE
+//  This is a reactive vue component.
+//  THis is part of the store, shouldn't be here.
+// ________________________________________________________________________________
+export const store = reactive({
+
+    message: "default message",
+    title: "default title",
+    subtitle: "default title",
+    type: NotifyType.GOOD,
+
+    consumerRunning: false,
+    notifyQueue: [], // why is this queue here? this should be in store?
+
+    logIndex: 0,
+    notifyLog: [],
+    documentation: "/v3/text-markdown/c0ckp1t/vue-js/Notifications.md"
+})
+
+// ________________________________________________________________________________
+// PRIVATE METHODS
+// ________________________________________________________________________________
+function buildNotifyDTO(type, message = "N/A", title = "N/A") {
+    return {
+        message: message,
+        type: type,
+        title: title
+    }
+}
+
+// ________________________________________________________________________________
+// NOTIFY API
+// ________________________________________________________________________________
+export const api = {
+
+    clearNotifyHistory() {
+        store.notifyLog = []
+    },
+
+    async good(message) {
+        const dto = buildNotifyDTO(NotifyType.GOOD, message, "Good")
+        store.notifyQueue.push(dto)
+    },
+    async goodDetails(title, message) {
+        const dto = buildNotifyDTO(NotifyType.GOOD, message, title)
+        store.notifyQueue.push(dto)
+    },
+    async bad(message) {
+        const dto = buildNotifyDTO(NotifyType.BAD, message, "Bad")
+        store.notifyQueue.push(dto)
+    },
+    async badDetails(title, message) {
+        const dto = buildNotifyDTO(NotifyType.BAD, message, title)
+        store.notifyQueue.push(dto)
+    },
+
+    async exec2Error(error, local) {
+        const stdoutText = (error.stack?.toString() ?? "") + "\n" + (error.data?.stack?.toString() ?? "") + "\n"
+        const dto = buildNotifyDTO(NotifyType.BAD, `${error.message} ${stdoutText}`, `exec2Error ${error.endpoint}`)
+        store.notifyQueue.push(dto)
+        local.isLoading = false
+    },
+    async exec2ErrorLoading(error, local) {
+        const dto = buildNotifyDTO(NotifyType.BAD, `message=${error.message}`, `exec2ErrorLoading ${error.endpoint}`)
+        store.notifyQueue.push(dto)
+        local.stdoutText += "[ERROR HANDLER]\n"
+        local.stdoutText += error.toString() + "\n"
+        local.stdoutText += "[STACK]\n"
+        local.stdoutText += (error.stack?.toString() ?? "") + "\n"
+        local.stdoutText += (error.data?.stack?.toString() ?? "") + "\n"
+        local.isLoading = false
+    },
+    exec2CompleteLoading(local) {
+        local.isLoading = false
+    },
+
+    async info(message) {
+        const dto = buildNotifyDTO(NotifyType.INFO, message, "Info")
+        store.notifyQueue.push(dto)
+    },
+
+    async infoDetails(title, message) {
+        const dto = buildNotifyDTO(NotifyType.INFO, message, title)
+        store.notifyQueue.push(dto)
+    },
+
+    async lastMessage() {
+        store.visible = true
+        clearNotify(2 * clearTimeMs)
+    },
+
+    async log(notify) {
+        store.notifyLog.push(notify)
+        if (store.notifyLog.length > MAX_LOG_COUNT) {
+            store.notifyLog.shift()
+        }
+    }
+
+}
+
+

package/core/notify/toast.vue

@@ -0,0 +1,150 @@
+<script setup>
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import { reactive, markRaw, watch, watchEffect, onMounted, computed, ref, version } from 'vue'
+import { store } from 'GlobalStore'
+import { store as notifyStore, api as notifyApi } from 'NotifyUtils'
+
+// TODO: Make longer if only message, shorter if other messages in queue
+const ACTIVE_TIME_MS = 5500
+const REST_TIME_MS = 250
+let delayPromise = null
+
+function delay(ms) {
+  let timeoutId;
+  let cancelFn;
+
+  const promise = new Promise((resolve) => {
+    cancelFn = () => {
+      clearTimeout(timeoutId);
+      resolve();
+    };
+    timeoutId = setTimeout(resolve, ms);
+  });
+
+  // Attach a cancel method to the promise
+  promise.cancel = cancelFn;
+
+  delayPromise = promise;
+  return promise;
+}
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  consumerRunning: false,
+  toast: null,
+  notify: {
+    message: "default message",
+    title: "default title",
+    subtitle: "default title",
+    type: "INFO",
+  }
+})
+
+
+watch(
+  () => notifyStore.notifyQueue,
+  (curr, prev) => {
+    processQueue()
+  },
+  { deep: true }
+)
+
+const notifyClass = computed(() => {
+  if (local.notify.type === "GOOD") {
+    return "bg-success text-white";
+  }
+  if (local.notify.type === "BAD") {
+    return "bg-warning text-black";
+  }
+  if (local.notify.type === "INFO") {
+    return "bg-primary text-white";
+  }
+  return "notify-neutral";
+})
+
+const itemRef = ref(null)
+
+// ________________________________________________________________________________
+// EVENT
+// ________________________________________________________________________________
+async function processQueue() {
+  if (local.consumerRunning) return
+  local.consumerRunning = true
+  while (notifyStore.notifyQueue.length > 0) {
+    const obj = notifyStore.notifyQueue.shift()
+    await showMessage(obj)
+  }
+  local.consumerRunning = false
+}
+
+async function showMessage(notify) {
+  notifyApi.log(notify)
+  local.notify.message = notify.message
+  local.notify.type = notify.type
+  local.notify.title = notify.title
+  local.notify.subtitle = `length=${notifyStore.notifyQueue.length}`
+  showToast()
+  await delay(ACTIVE_TIME_MS)
+  hideToast()
+  await delay(REST_TIME_MS)
+  delayPromise = null
+}
+
+function showToast() {
+  local.toast.show()
+}
+
+function hideToast() {
+  if (delayPromise != null) {
+    delayPromise.cancel()
+  }
+  local.toast.hide()
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  local.toast = markRaw(new bootstrap.Toast(itemRef.value))
+}
+
+onMounted(async () => { await init() })
+</script>
+
+
+<template>
+
+  <div aria-live="polite" aria-atomic="true" class="outline-b position-relative w-100" style="z-index: 1031">
+    <div class="outline-x  w-50 toast-container position-fixed top-0 start-50  p-2">
+      <!-- Then put toasts within -->
+      <div ref="itemRef" class="toast w-100" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header" :class="notifyClass">
+          <strong class="me-auto ">{{ local.notify.title }}</strong>
+          <strong class="">{{ local.notify.subtitle }}</strong>
+          <button type="button" @click="hideToast" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" >{{ local.notify.message }} </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.toast {
+    background-color: rgba(255,255,255,.95);
+}
+
+/** NOTIFY */
+.outline-x {
+  /* border: 3px solid red; */
+}
+
+.outline-b {
+  /* border: 3px solid green; */
+}
+</style>

package/core/pages/About.vue

@@ -0,0 +1,57 @@
+<script setup>
+  /*
+    [VARS] - name, init, imports, template, script, style
+
+    Usage:
+      const PageXXXX = defineAsyncComponent(() => import("/pages/About.vue"))
+      <PageXXXX></PageXXXX>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, ref, markRaw, onMounted, watch, computed, onErrorCaptured} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+
+// !# C0CKP1T_START imports
+// import ArticlesPreview from "@/pages/Articles/Preview.vue";
+// !# C0CKP1T_END
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = "pages/About.vue"
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+
+// !# C0CKP1T_START script
+const local = reactive({
+  id: LOG_HEADER,
+})
+// !# C0CKP1T_END
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+// !# C0CKP1T_START init
+
+// !# C0CKP1T_END init
+}
+onMounted(async () => { init() })
+</script>
+
+<template>
+<!--  !# C0CKP1T_START template -->
+<x-section :level="2" k="About" :visible="true">
+</x-section>
+<!--  !# C0CKP1T_END template -->
+</template>
+
+<style scoped>
+/* !# C0CKP1T_START style */
+
+/* !# C0CKP1T_END style */
+</style>
+
+

package/core/pages/Cache.vue

@@ -0,0 +1,155 @@
+<script setup>
+/*
+    page-cache.vue
+*/
+
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import {reactive, markRaw, onMounted, computed} from 'vue'
+import Constants from "Constants";
+import { store as storeMain, api as apiMain } from 'GlobalStore'
+import {getLogger} from "Logging";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
+const registry = storeMain.r[Constants.defaultInstanceId]
+const options = registry.sfcOptions
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'page-cache.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+  moduleCache: null,
+  vueComponents: [],
+  es6Modules: [],
+  loading: [],
+  routes: [],
+});
+
+async function refresh() {
+  logger.info(`refresh()`)
+  const cache = options.moduleCache
+  console.log(options.moduleCache)
+  console.log(options.sourceCode)
+  // for (const key of Object.keys(cache)) {
+  //   if(Reflect.has(cache[key], "promise")) {
+  // logger.info(`${key} NOT loaded - awaiting`)
+  // await cache[key].promise
+  // }
+  // }
+  local.moduleCache = markRaw(options.moduleCache)
+  local.sourceCode = markRaw(options.sourceCode)
+
+  local.es6Modules = Object.keys(local.moduleCache)
+      .filter(key => !Reflect.has(local.moduleCache[key], "__name"))
+      .map(key => {
+        const isPromise = Reflect.has(cache[key], "promise")
+        let sourceCode = null
+        if (local.sourceCode[key] !== undefined && local.sourceCode[key].hasOwnProperty("code")) {
+          sourceCode = local.sourceCode[key]
+        }
+        return {
+          key: key,
+          sourceCode: sourceCode,
+          isPromise: isPromise,
+        }
+      }).sort((a, b) => a.key.localeCompare(b.key))
+
+  local.vueComponents = Object.keys(local.moduleCache)
+      .filter(key => Reflect.has(local.moduleCache[key], "__name"))
+      .map(key => {
+        let sourceCode = null
+        if (local.sourceCode[key] !== undefined && local.sourceCode[key].hasOwnProperty("code")) {
+          sourceCode = local.sourceCode[key]
+        }
+        return {
+          key: key,
+          sourceCode: sourceCode,
+          vueName: local.moduleCache[key]['__name'],
+        }
+      }).sort((a, b) => a.key.localeCompare(b.key))
+}
+
+async function loadComponent(key) {
+  logger.info(`loadComponent - ${key}`)
+}
+
+async function loadRoutes() {
+  console.log("loadroutes")
+  console.log("loadroutes")
+  const routes = apiMain.getRoutes()
+  local.routes = JSON.parse(JSON.stringify(routes)).sort((a, b) => a.path.localeCompare(b.path))
+  console.log(router.getRoutes().sort((a, b) => a.path.localeCompare(b.path)))
+}
+
+//________________________________________________________________________________
+// INIT
+//________________________________________________________________________________
+async function init() {
+  await refresh()
+  await loadRoutes()
+}
+
+onMounted(() => {
+  init()
+})
+
+</script>
+
+
+<template>
+  <div class="page-cache">
+    <ExecButton icon="fa-rotate-right" :callback="() => init()"></ExecButton>
+
+
+    <x-section extra="fs-4 " :visible="false" k="Routes">
+      <template v-slot:header>
+        <ExecButton icon="fa-rotate-right" :callback="() => loadRoutes()"></ExecButton>
+      </template>
+
+      <x-table-open :exclude="['instances', 'leaveGuards', 'updateGuards', 'enterCallbacks', 'components', 'props', 'aliasOf', 'meta', 'beforeEnter', 'children']" :arr="local.routes" v-slot="slotProps">
+
+        <x-collapse k="Entity">
+          <x-json :obj="local.routes[slotProps.v]"></x-json>
+        </x-collapse>
+
+      </x-table-open>
+
+    </x-section>
+
+    <x-section extra="fs-4 " k="Vue Components">
+      <x-table-open :exclude="['sourceCode']" :arr="local.vueComponents" v-slot="slotProps">
+        <ExecButton icon="fa-play"
+                  :callback="() => loadComponent(local.vueComponents[slotProps.v].key)">Load Component
+        </ExecButton>
+        <x-collapse k="Entity">
+          <x-json :obj="local.vueComponents[slotProps.v]"></x-json>
+        </x-collapse>
+      </x-table-open>
+    </x-section>
+
+    <x-section extra="fs-4 " k="JavaScript or Loading Components">
+
+      <x-table-open :exclude="['sourceCode']" :arr="local.es6Modules" v-slot="slotProps">
+        <x-collapse k="Entity">
+          <x-json :obj="local.es6Modules[slotProps.v]"></x-json>
+        </x-collapse>
+      </x-table-open>
+
+    </x-section>
+
+
+
+  </div>
+</template>

package/core/pages/Connection.vue

@@ -0,0 +1,192 @@
+<script setup>
+/**
+ * Displays and manages the connections to server instances
+ */
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import {ref, markRaw, reactive, watch, onMounted, computed, defineAsyncComponent} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+import {useRouter} from "vue-router";
+import {substrAfterFirstSlash} from "JsUtils";
+
+const ConnectionHeaderDetails = defineAsyncComponent(() => import("./connections/connection-header-details.vue"))
+const router = useRouter()
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'Connection.vue'
+const logger = getLogger(LOG_HEADER)
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  showStoreObject: false,
+  showStateObject: false,
+  showConnectionObject: false,
+  showConnectionDetails: false,
+  isPasswordVisible: false
+});
+
+
+// TODO: how to get this ? Probably from URL? or as a prop
+const instanceId = computed(() => {
+  return router.currentRoute.value.params?.id ?? null
+})
+
+const connection = computed(() => {
+  const instance = storeMain.r[instanceId.value];
+  return instance && instance.connection ? instance.connection : null;
+})
+
+function refreshRegistry() {
+  storeMain.r[instanceId.value].rootNode()
+}
+
+const connectText = computed(() => {
+  if (connection.value.state.isConnected) {
+    return "Authenticate"
+  } else {
+    return "Connect"
+  }
+})
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function saveConnection() {
+  await apiMain.saveConnection(instanceId.value, connection.value.store)
+}
+
+async function deleteConnection() {
+  await apiMain.deleteConnection(instanceId.value)
+}
+
+
+onMounted(() => {
+})
+
+</script>
+
+
+<template>
+  <div class="mt-2 mb-2 connection" v-if="connection">
+
+
+
+    <div class="row mt-2 mb-2">
+      <div class="col"></div>
+      <div class="col-auto">
+        <ExecButton icon="fa-floppy-disk me-1" class="btn btn-dark" :callback="() => saveConnection()"
+                    :disabled="!connection.state.connectionDirty">Save
+        </ExecButton>
+      </div>
+      <div class="col-auto">
+        <ExecButton icon="fa-trash me-1" class="btn btn-dark" :callback="() => deleteConnection()">Delete</ExecButton>
+      </div>
+    </div>
+
+
+    <connection-header-details :id="instanceId" :key="instanceId"></connection-header-details>
+
+    <div class="row mt-2 mb-1 justify-content-center align-items-center">
+      <div class="col-auto">
+        <ExecButton icon="fa-rotate-right me-1" class="btn btn-sm btn-primary" :callback="() => refreshRegistry">
+          Refresh Registry
+        </ExecButton>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Connection Details" v-model="local.showConnectionDetails"></x-toggle>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Connection Entity" v-model="local.showConnectionObject"></x-toggle>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Store Entity" v-model="local.showStoreObject"></x-toggle>
+      </div>
+    </div>
+
+    <div class="row mt-2 mb-2" v-if="local.showStoreObject">
+      <x-json :obj="storeMain.r[instanceId].store"></x-json>
+    </div>
+
+    <div class="row mt-2 mb-2" v-if="local.showConnectionObject">
+      <x-json :obj="connection"></x-json>
+    </div>
+
+
+    <div class="row connection-details" v-if="local.showConnectionDetails">
+      <x-label k="Connection State:">{{ connection.state.connStateString }}</x-label>
+      <x-label k="Subscription Count:">{{ connection.state.subscriptionCount }}</x-label>
+      <x-label k="Session State:">{{ connection.state.sessionStateString }}</x-label>
+      <x-label k="isConnected:">{{ connection.state.isConnected }}</x-label>
+      <x-label k="isAuthenticated:">{{ connection.state.isAuthenticated }}</x-label>
+      <x-label k="HasErrors:">{{ connection.state.errorMessages.length > 0 }}</x-label>
+
+      <x-label k="Retry Enabled:">{{ connection.state.retryEnable }}</x-label>
+      <x-label k="Retries:">{{ connection.state.retries }}</x-label>
+    </div>
+
+    <div class="mt-2 mb-2" :class="{ 'is-dirty': connection.state.connectionDirty}">
+      <!--      <x-label k="URL">{{ connection.url }}</x-label>-->
+      <x-input k="Host" v-model="connection.store.hostname"></x-input>
+      <x-input k="Port" type="number" v-model="connection.store.port"></x-input>
+      <x-input k="endpoint" v-model="connection.store.endpoint"></x-input>
+      <x-input k="username" v-model="connection.store.username"></x-input>
+      <div class="row">
+        <div class="col">
+          <x-input :type="local.isPasswordVisible ? 'text' : 'password'" v-model="connection.store.password"
+                   k="password"></x-input>
+        </div>
+        <div class="col-auto">
+          <x-toggle k="" v-model="local.isPasswordVisible"></x-toggle>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="fw-bold">Errors:</div>
+    <div v-for="errorMsg in connection.state.errorMessages">
+      {{ errorMsg }}
+    </div>
+
+    <div class="row ">
+      <div class="col"></div>
+      <div class="col-auto">
+        <ExecButton icon="" class="btn btn-primary" :callback="() => storeMain.r[instanceId].connect()">{{
+            connectText
+          }}
+        </ExecButton>
+      </div>
+      <div class="col-auto" v-if="connection.state.isConnected">
+        <ExecButton icon="" class="btn btn-warning" :callback="() => storeMain.r[instanceId].disconnect()">Disconnect
+        </ExecButton>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+
+<style scoped>
+.is-dirty {
+  border-left: 2px solid red;
+}
+
+.connection-details {
+  background-color: var(--bs-secondary-bg);
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.connection {
+  padding: 1rem;
+  border: 2px solid black;
+}
+
+</style>