c0ckp1t 1.0.0

package/core/pages/Connections.vue

@@ -0,0 +1,102 @@
+<script setup>
+/*
+  connection-header-details.vue
+*/
+
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import {reactive, onMounted, defineAsyncComponent, computed} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+import Constants from "Constants";
+import {useRoute} from "vue-router";
+import {api as notify} from "NotifyUtils"
+import ExecButton from "../../components/ExecButton.vue";
+const ConnectionHeaderDetails = defineAsyncComponent(() => import("./connections/connection-header-details.vue"))
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'page-connections.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+  moduleCache: null,
+  connectionName: "root"
+});
+
+function createConnection() {
+  const config  = JSON.parse(JSON.stringify(Constants.configDefault))
+  config.instanceId = local.connectionName
+  try {
+    apiMain.createRegistry(config)
+  } catch(e) {
+    notify.badDetails(`[${local.id}]`, e)
+  }
+}
+
+function deleteConnection() {
+
+}
+
+const route = useRoute()
+
+const showConnections = computed(() => {
+  if (route.fullPath.endsWith('default/connections')) {
+    return true
+  }
+  return false
+})
+
+async function loadDemo() {
+  const { config } = await import("/app-demo/IslandDefaultConfig.mjs")
+  await apiMain.registerStaticIsland(config)
+}
+
+//________________________________________________________________________________
+// INIT
+//________________________________________________________________________________
+async function init() {
+
+}
+
+onMounted(() => {
+  init()
+})
+
+</script>
+
+
+<template>
+  <div class="page-connections">
+    <x-section extra="fs-4" k="Connections" >
+      <div v-for="(v, k) in storeMain.r" class="row m-2">
+        <ConnectionHeaderDetails :id="k"></ConnectionHeaderDetails>
+      </div>
+
+      <x-section extra="fs-5" :visible="true" k="Create New Connection">
+        <div class="row mb-2">
+          <div class="col">
+            <x-input k="Name" v-model="local.connectionName"></x-input>
+          </div>
+          <div class="col-auto">
+            <ExecButton icon="fa-floppy-disk me-1 " :callback="() => createConnection()">Create Connection </ExecButton>
+          </div>
+        </div>
+      </x-section>
+
+
+      <ExecButton :callback="() => loadDemo()">Load Demo</ExecButton>
+
+
+    </x-section>
+
+  </div>
+</template>

package/core/pages/Documentation.vue

@@ -0,0 +1,263 @@
+<script setup>
+/*
+  Main Documentation Page
+
+  Note: This depends on vue-router being configured with
+    { path: 'documentation', redirect: '/default/documentation/Introduction.md'},
+    { path: 'documentation/:pathMatch(.*)*', location:'core/pages/page-documentation.vue'}
+   See Constants.mjs
+
+*/
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import { reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import {store as storeMain, api as apiMain, store} from 'GlobalStore'
+import { getLogger } from "Logging";
+
+import { DocUtils, extractBasePathFromURL } from '../DocUtils.mjs'
+import MdToc from "../sfc/md-toc.vue";
+import Constants from "Constants";
+import {substrAfterFirstSlash} from "JsUtils";
+
+const route = useRoute()
+const router = useRouter()
+
+
+
+const props = defineProps({
+  homepage: {
+    type: String,
+    default: "/Introduction.md"
+  },
+  remotePathMapping: {
+    type: String,
+    default: "/docs"
+  }
+})
+
+const baseLocalURL = extractBasePathFromURL(route.fullPath)
+const docUtils = new DocUtils(baseLocalURL, props.remotePathMapping)
+
+const instanceId = substrAfterFirstSlash(baseLocalURL)
+const registry = storeMain.r[instanceId]
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'Documentation.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+  isDirty: false,
+  updated: null,
+
+  isHTMLVisible: true,
+  isEditVisible: false,
+
+  baseLocalURL : baseLocalURL,
+  homepage : `${baseLocalURL}${props.homepage}`,
+  previousPath :  `${baseLocalURL}${props.homepage}`,
+  currentPath : `${baseLocalURL}${props.homepage}`,
+
+  markdownText: "",
+  snapshot: "",
+  showScrollToTop: false,
+  isDev: Constants.isDev,
+});
+
+
+
+watch( () => route.fullPath, (fullPath) => {
+  logger.debug("[WATCH] currentPath", fullPath)
+  if(local.currentPath !== fullPath) {
+    local.previousPath = local.currentPath
+    local.currentPath = fullPath
+    href(docUtils.browserPathToDocumentPath((local.currentPath)))
+  }
+}, { immediate: false, deep: true } )
+
+
+watch(
+  () => local.markdownText,
+  (curr, prev) => {
+    if (local.snapshot === curr) {
+      local.isDirty = false
+    } else {
+      local.isDirty = true
+    }
+  },
+)
+
+// ________________________________________________________________________________
+// MARKDOWN EVENTS
+// ________________________________________________________________________________
+function adjustHrefPath(documentPath) {
+  const remotePathURL = docUtils.documentPathToRemotePath(local.currentPath, documentPath)
+  const browserPath = `${local.baseLocalURL}?p=${remotePathURL}`
+  logger.debug(`[adjustHrefPath] - ${documentPath} -> ${browserPath}`)
+  return browserPath.replace("/documentation/", "/")
+}
+
+async function reload() {
+  // await docUtils.removeFromCache(local.currentPath, documentURL)
+  const documentPath = docUtils.browserPathToDocumentPath(local.currentPath)
+  logger.info("[reload] documentPath=", documentPath)
+  await href(documentPath)
+}
+
+async function goToHomePage() {
+  await router.push(`${local.homepage}`)
+}
+
+async function href(documentPath) {
+  const browserPath = docUtils.documentPathToBrowserPath(local.currentPath, documentPath)
+  const remotePath = docUtils.browserPathToRemotePath(browserPath)
+  logger.info(`[href] \nbrowserPath=${browserPath}\ndocumentPath=${documentPath}\ncurrentPath=${local.currentPath}\nremotePath=${remotePath}`)
+  local.markdownText = ""
+
+  const resp = await docUtils.retrieveText(registry, remotePath)
+  logger.debug(resp)
+  if (resp.isOk) {
+    local.updated = new Date().getTime()
+    if(local.currentPath !== browserPath) {
+      local.previousPath = local.currentPath
+      local.currentPath = browserPath
+      await router.replace(browserPath)
+    }
+  }
+
+  // window.scrollTo({ top: 0, behavior: 'smooth' });
+  local.snapshot = resp.result
+  local.markdownText = resp.result
+
+
+}
+
+function fetchImage(documentPath) {
+  const remotePathURL = docUtils.documentPathToRemotePath(instanceId, local.baseLocalURL, local.currentPath, documentPath);
+  logger.info(`[fetchImage]  - documentPath=${documentPath} - remotePath=${remotePathURL}`);
+
+  // default registry case: fetch bytes and convert to Blob URL
+  return new Promise(async (resolve, reject) => {
+    try {
+      const resp = await registry.getBinary(remotePathURL);
+      logger.debug(resp);
+
+      if (!resp.isOk) {
+        reject(resp.result);
+        return;
+      }
+
+      resolve(URL.createObjectURL(new Blob([resp.result])));
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  if (storeMain.isReady && local.updated === null) {
+
+    const documentPath = docUtils.browserPathToDocumentPath(route.fullPath)
+    await href(documentPath)
+  } else {
+    setTimeout(() => { init() }, 500)
+  }
+
+}
+
+onMounted(() => {
+  init()
+})
+
+
+
+</script>
+
+<template>
+  <div class="container">
+
+<!--        {{router}}-->
+    <!--    <hr>-->
+<!--    baseLocalURL {{ local.baseLocalURL }} <br>-->
+<!--        current {{ local.currentPath }} <br>-->
+<!--        previous {{ local.previousPath }} <br>-->
+<!--        home {{ local.homepage }} <br>-->
+
+
+    <div class="row text-center mb-22">
+      <span class="fw-bold m-1">Current: <span>{{ local.currentPath }}</span> </span>
+    </div>
+
+    <div class="row markdown-header align-items-center">
+      <div class="col-auto">
+        <button class="btn btn-primary" @click="goToHomePage()" :title="local.homepage">
+          <i class="fa-solid fa-house"></i> Home Page
+        </button>
+      </div>
+
+      <div class="col"></div>
+
+      <div class="col-auto">
+        <ExecButton icon="fa-arrow-left me-1" :callback="() => router.push(`${local.previousPath}`)"
+          v-if="local.currentPath !== local.previousPath">
+          {{ local.previousPath }}
+        </ExecButton>
+      </div>
+      <div class="col-auto" v-if="local.isDev">
+        <ExecButton icon="fa-rotate-right" :callback="() => reload()">Reload</ExecButton>
+      </div>
+      <div class="col-auto" v-if="false">
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="remoteWork" v-model="local.isHTMLVisible">
+          <label class="form-check-label" for="remoteWork">HTML</label>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="row mt-4">
+      <div class="col order-last order-lg-first">
+        <div class="row markdown-body mb-4">
+          <div class="col" v-if="local.isHTMLVisible">
+            <x-markdown :fetchImage="fetchImage" @href="href" :adjustHrefPath="adjustHrefPath"
+              :v="local.markdownText"></x-markdown>
+          </div>
+          <div v-if="false">
+            <pre class="md-code mt-4">{{local.markdownText}}</pre>
+          </div>
+        </div>
+      </div>
+      <div class="col-auto order-first order-lg-last">
+        <MdToc :v="local.markdownText" :maxLevel="2" />
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<style scoped>
+.md-code {
+  padding: 1rem;
+  border: 1px solid var(--color3);
+  border-radius: 0.5rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

package/core/pages/Notifies.vue

@@ -0,0 +1,156 @@
+<script setup>
+/*
+    c0ckp1t-toast.vue
+*/
+
+//________________________________________________________________________________  
+// IMPORTS
+//________________________________________________________________________________  
+import {reactive, markRaw, watch, watchEffect, onMounted, computed, ref, version} from 'vue'
+import {api as apiMain} from 'GlobalStore'
+import {store as notifyStore, api as notifyApi} from 'NotifyUtils'
+import {getLogger, listLoggers, setLogger, clearLocalStorage} from "Logging";
+import { eventBus } from 'WsUtils'
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'notify/notify-logs.vue'
+const logger = getLogger(LOG_HEADER)
+logger.info("[INIT]")
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+  filter: "",
+})
+
+const loggers = ref({})
+
+const loggersSorted = computed(() => {
+  const res = []
+  for (const key of Object.keys(loggers.value)) {
+    res.push({name: key, level: loggers.value[key]});
+  }
+  return res
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .filter(obj => {
+        if (local.filter.trim() === '') return true
+        return obj.name.includes(local.filter)
+      })
+});
+
+// ________________________________________________________________________________
+// EVENTS
+// ________________________________________________________________________________
+function generateNotify() {
+  logger.info("generateNotify()")
+  notifyApi.good("good notify test")
+  notifyApi.bad("bad notify test")
+  notifyApi.info("info notify test")
+}
+
+function generateClientEvent() {
+  eventBus.emit('foo', { a: 'b' })
+}
+
+function updateLoggers() {
+  loggers.value = {...listLoggers()}
+}
+
+function clickSetLogger(name, level) {
+  setLogger(name, level)
+  updateLoggers()
+}
+
+function changeOrder(selection) {
+  if (selection === 'name') {
+  }
+
+  if (selection === 'level') {
+  }
+
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+onMounted(() => {
+  loggers.value = listLoggers()
+})
+
+</script>
+
+
+<template>
+  <x-section extra="fs-4" :visible="true" k="Notification">
+
+    <template v-slot:header>
+      <ExecButton icon="fa-info" :callback="() => apiMain.selectDocumentation(notifyStore.documentation)"></ExecButton>
+    </template>
+
+    <x-section extra="fs-4" :visible="true" k="Queued">
+      <button @click="generateNotify" class="btn btn-dark mb-2">Generate Notify</button>
+      <button @click="generateClientEvent" class="btn btn-dark mb-2">Generate Client Event</button>
+
+      <x-table-open :exclude="['']" :arr="notifyStore.notifyQueue" v-slot="slotProps">
+      </x-table-open>
+    </x-section>
+
+    <x-section extra="fs-4" :visible="true" k="Archive">
+      <ExecButton :callback=" () => notifyApi.clearNotifyHistory()" icon="fa-trash me-1" class="btn btn-dark mb-2">Clear
+      </ExecButton>
+
+      <x-table-open :exclude="['']" :arr="notifyStore.notifyLog" v-slot="slotProps">
+      </x-table-open>
+    </x-section>
+
+
+    <x-section extra="fs-4" :visible="true" k="Logger Configuration">
+      <ExecButton :callback=" () => updateLoggers" icon="fa-rotate-right me-1" class="btn btn-dark me-2 mb-2"></ExecButton>
+      <ExecButton :callback=" () => clearLocalStorage" icon="fa-trash me-1" class="btn btn-dark mb-2">Clear Local Storage
+      </ExecButton>
+
+      <div class="row mb-2">
+        <x-input k="Filter" v-model="local.filter"></x-input>
+      </div>
+
+      <table class="table table-sm">
+        <thead>
+        <tr title="click to order">
+          <th v-on:click="changeOrder('name')"><span>Name</span></th>
+          <th v-on:click="changeOrder('level')"><span>Level</span></th>
+        </tr>
+        </thead>
+
+        <tr v-for="logger in loggersSorted" :key="logger.name">
+          <td>{{ logger.name }}</td>
+          <td>
+            <div>
+              <button @click="clickSetLogger(logger.name, 'TRACE')" :class="(logger.level ==='TRACE') ? 'btn-primary' : 'btn-light'"
+                      class="btn btn-sm ">TRACE
+              </button>
+              <button @click="clickSetLogger(logger.name, 'DEBUG')" :class="(logger.level === 'DEBUG') ? 'btn-success' : 'btn-light'"
+                      class="btn btn-sm ">DEBUG
+              </button>
+              <button @click="clickSetLogger(logger.name, 'INFO')" :class="(logger.level ==='INFO') ? 'btn-info' : 'btn-light'"
+                      class="btn btn-sm">INFO
+              </button>
+              <button @click="clickSetLogger(logger.name, 'WARN')" :class="(logger.level==='WARN') ? 'btn-warning' : 'btn-light'"
+                      class="btn btn-sm">WARN
+              </button>
+              <button @click="clickSetLogger(logger.name, 'ERROR')" :class="(logger.level==='ERROR') ? 'btn-danger' : 'btn-light'"
+                      class="btn btn-sm">ERROR
+              </button>
+            </div>
+          </td>
+        </tr>
+      </table>
+
+    </x-section>
+
+  </x-section>
+</template>

package/core/pages/Traffic.vue

@@ -0,0 +1,152 @@
+<script setup>
+/*
+    c0ckp1t-wslog.vue
+    This is a frontend for WsLogUtils
+
+      START -> FACK 1 ms -> ACK -> LACK 12 ms
+      Start always happens at time 0 ms
+      FACK 1ms means it took 1ms to get an ACK from c0ckp1t
+      LACK 12ms means it took 12ms from start until it completed the flow and sent LACK
+
+      START means REQ or LREQ
+
+*/
+
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import { defineAsyncComponent, reactive, watch, onMounted, computed } from 'vue'
+import { store as storeMain, api as apiMain} from 'GlobalStore'
+
+import { store as logStore, api as logApi } from './traffic/WsLogUtils.mjs'
+const LogWsExec = defineAsyncComponent(() => import("./traffic/log-ws-exec.vue"))
+const LogWsExec2 = defineAsyncComponent(() => import("./traffic/log-ws-exec2.vue"))
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: `ws-log`,
+  isVisibile: {}
+})
+
+//________________________________________________________________________________
+// HELPERS
+//________________________________________________________________________________
+function recursiveJsonParse(dto) {
+  try {
+    //TODO: check value?
+    const parsedJson = JSON.parse(dto.message);
+    for (let key in parsedJson) {
+      if (typeof parsedJson[key] === 'string') {
+        parsedJson[key] = recursiveJsonParse(parsedJson[key]);
+      }
+    }
+    return parsedJson;
+  } catch (error) {
+    return dto;
+  }
+}
+
+function extractDtoType(dto) {
+  try {
+    return dto.type
+  } catch (error) {
+    return "unknown";
+  }
+}
+
+//________________________________________________________________________________
+// EVENT HANDLERS
+//________________________________________________________________________________
+function clearLogs() {
+  console.log(`clear logs not implemented`)
+}
+
+function select(index) {
+  console.log(`[${local.id}] -select ${index}`)
+  const id = index
+  if (Object.hasOwn(local.isVisibile, id)) {
+    delete local.isVisibile[id]
+  } else {
+    local.isVisibile[id] = true
+  }
+}
+
+function clickTable(idx) {
+
+}
+
+
+</script>
+
+
+<template>
+  <x-section extra="fs-4" :visible="true" k="Websocket Logs">
+
+
+    <template v-slot:header>
+      <ExecButton icon="fa-info" :callback="() => apiMain.selectDocumentation(logStore.documentation)"></ExecButton>
+    </template>
+
+      <x-collapse k="logStore">
+        <x-json :obj="logStore"></x-json>
+      </x-collapse>
+
+      <div class="row mt-2 mb-3">
+        <div class="col-auto">
+          <x-toggle k="Logging Enabled" v-model="logStore.enabled"></x-toggle>
+        </div>
+        <div class="col-auto">
+          <x-label k="Index"><span class="input-group-text"><a :href="`/#/default/traffic/#jump-${logStore.historyIdx - 1}`">{{ logStore.historyIdx - 1 }}</a></span></x-label>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-dark" @click="logApi.clearLogs">Clear Logs</button>
+        </div>
+      </div>
+
+      <x-table-open :exclude="[]" :arr="logStore.history"  @select="clickTable">
+
+        <template v-slot:default="slotProps">
+          <div v-if="logStore.history[slotProps.v].type === 'EXEC_REQ'">
+            <LogWsExec :v="logStore.history[slotProps.v]"></LogWsExec>
+          </div>
+          <div v-if="logStore.history[slotProps.v].type === 'EXEC2_REQ'">
+            <LogWsExec2 :v="logStore.history[slotProps.v]"></LogWsExec2>
+          </div>
+          <div v-else>
+            {{logStore.history[slotProps.v]}}
+          </div>
+        </template>
+
+        <template v-slot:index="props0">
+          <span :id="`jump-${props0.v}`" :class="{'active' : props0.v == logStore.historyIdx - 1 }"> {{props0.v}}</span>
+        </template>
+
+        <template v-slot:in="props1">
+          {{props1.v.length}}
+        </template>
+
+        <template v-slot:out="props2">
+          {{props2.v.length}}
+        </template>
+
+      </x-table-open>
+      <div v-if="logStore.history.length === 0">
+        <h3>No Items</h3>
+      </div>
+
+  </x-section>
+</template>
+
+
+  <!-- ________________________________________________________________________________ -->
+  <!-- STYLE -->
+  <!-- ________________________________________________________________________________ -->
+<style scoped>
+.active{
+  background-color: rgb(250 164 203);
+  font-weight: 800;
+  font-size: 1.2rem;
+}
+</style>