Merge pull request #22 from bradenn/refactor

UDAP v2.13-rc1

.github/workflows/go.yml

@@ -17,7 +17,7 @@ jobs:
         with:
           go-version: '1.18.0'
       - name: Get Deps
-        run: go get
+        run: go get ./...
       - name: Build
-        run: go build -v main.go
+        run: go build -v cmd/udap/main.go
 

.gitignore

@@ -20,6 +20,7 @@ spotify.json
 
 # Client Ignore
 
+/client/node_modules/**
 /client/src/assets/js/
 /client/src/assets/**.css
 /client/src/assets/**.css.map

README.md

@@ -1,4 +1,4 @@
-# UDAP v2.12
+# UDAP v2.13
 [![Go](https://github.com/bradenn/udap/actions/workflows/go.yml/badge.svg?branch=main)](https://github.com/bradenn/udap/actions/workflows/go.yml)
 [![Go CodeQL](https://github.com/bradenn/udap/actions/workflows/codeql-analysis.yml/badge.svg?branch=main)](https://github.com/bradenn/udap/actions/workflows/codeql-analysis.yml)
 [![Typescript](https://github.com/bradenn/udap/actions/workflows/ts.yml/badge.svg)](https://github.com/bradenn/udap/actions/workflows/ts.yml)
@@ -31,4 +31,14 @@ Both modules and Endpoints are permitted to make modification to entities and at
 can concurrently modify multiple entities and attributes at a time. The command buffer can be modified to accept 4096
 concurrent commands, but for larger loads, instancing is recommended.
 
+## Glossary
+
+| Command  | Description |
+|----------| --- |
+| U.D.A.P. | Universal Device Aggregation Platform (encompasses all below terms) |
+| Core     | The physical running UDAP program instance |
+| Nexus    | The front-end interface for all of UDAP |
+| Terminal | An authoritative nexus instance (Used for configuration and management) |
+| Pad      | A general use nexus instance, can be used by anyone without authentication if configured by terminal. |
+
 #### Copyright © 2019-2022 Braden Nicholson

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "udap-nexus",
   "version": "2.10.9",
-  "main": "electron/main.js",
+  "main": "/src/main.js",
   "scripts": {
     "dev": "vue-tsc --noEmit && vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -12,12 +12,9 @@
     "@types/websocket": "^1.0.5",
     "axios": "^0.21.3",
     "bootstrap": "^5.1.0",
-    "colorthief": "^2.3.2",
-    "electron": "^16.0.5",
     "glob": "^8.0.1",
     "minimist": "~1.2.6",
     "moment": "^2.29.2",
-    "npm": "^8.5.3",
     "qrcanvas-vue": "^3.0.0",
     "qrcode": "^1.5.0",
     "sass": "^1.45.1",
@@ -36,6 +33,7 @@
     "@vitejs/plugin-vue": "^1.6.0",
     "@vue/compiler-sfc": "^3.2.6",
     "@vue/tsconfig": "^0.1.3",
+    "esbuild": "^0.14.42",
     "typescript": "~4.5.5",
     "vite": "^2.5.2",
     "vue-tsc": "^0.31.4"

client/src/App.vue

@@ -6,6 +6,7 @@ import {version} from "../package.json";
 
 interface Preferences {
   ui: {
+    blurBg: boolean
     background: string
     theme: string
     mode: string
@@ -20,6 +21,7 @@ interface Preferences {
 
 const preferenceDefaults: Preferences = {
   ui: {
+    blurBg: false,
     blur: 6,
     background: "milk",
     mode: "cursor",
@@ -123,7 +125,8 @@ provide('hideHome', hideHome)
   <div
       :class="`${preferences.ui.night?'night-vision':''} theme-${preferences.ui.theme} mode-${preferences.ui.mode} blurs-${preferences.ui.blur} brightness-${preferences.ui.brightness}`"
       class="root">
-    <img :src="`/custom/${preferences.ui.background}@4x.png`" alt="Background" class="backdrop "/>
+    <img :class="`${preferences.ui.blurBg?'backdrop-blurred':''}`" :src="`/custom/${preferences.ui.background}@4x.png`"
+         alt="Background" class="backdrop "/>
     <div v-if="preferences.ui.watermark" class="watermark">
       <div class="d-flex gap">
         <!--        <div>NEXUS v{{ state.system.nexus.system.version }}</div>-->
@@ -171,6 +174,10 @@ provide('hideHome', hideHome)
   animation: switch 0.25s ease-in-out forwards;
 }
 
+.backdrop-blurred {
+  filter: blur(4px);
+}
+
 .backdrop:after {
 
 }

client/src/assets/sass/app.scss

@@ -240,7 +240,7 @@ $fontColors: (
 }
 
 .subplot.active {
-  background-color: rgba(255, 255, 255, 0.06) !important;
+  background-color: $element-bg-active;
 }
 
 

client/src/assets/sass/element.scss

@@ -1,12 +1,12 @@
 // Copyright (c) 2022 Braden Nicholson
 
 // Static
-$element-bg: hsla(214, 16, 12, 0.4);
-$element-fg: hsla(214, 8, 16, 0.3);
-$element-shadow: hsla(214, 16, 2, 0.1);
-$element-bg-active: hsla(214, 16, 24, 0.25);
+$element-bg: rgba(28, 33, 36, 0.2);
+$element-fg: lighten($element-bg, 8%);
+$element-bg-active: lighten($element-bg, 10%);
+$element-shadow: rgba(0, 0, 0, 0.2);
 
-$element-border: hsla(214, 16, 64, 0.07);
+$element-border: lighten($element-bg, 18%);
 
 $element-border-radius: 0.25rem;
 
@@ -17,18 +17,31 @@ $element-bg-hover: rgba(255, 128, 0, 0.280);
 
 // Options
 
+$loadInDistance: 0.95;
 /* Blur Definitions */
 .bg-blur {
   position: relative;
+  box-shadow: 0 0 12px 2px $element-shadow, inset 0 0 2px 1px $element-border !important;
+  transform: translate3d(0, 0, 0) translateZ(0);
+  backface-visibility: visible;
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000px;
-  transform: translate3d(0, 0, 0) translateZ(0);
-  backface-visibility: hidden;
+
   perspective: 1000px;
-  backdrop-filter: blur(24px) contrast(98%);
+  overflow: hidden;
+  content: ' ';
+  border-radius: inherit;
+
+  //contrast(98%);
+  backdrop-filter: blur(24px);
 }
 
-$loadInDistance: 0.95;
+.bg-blur:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+}
 
 
 @keyframes loadIn {
@@ -41,25 +54,7 @@ $loadInDistance: 0.95;
 }
 
 //
-//.bg-blur::before {
-//  position: absolute;
-//  top: 0;
-//  right: 0;
-//
-//  transform: translate3d(0, 0, 0) translateZ(0);
-//  backface-visibility: visible;
-//  -webkit-backface-visibility: hidden;
-//  -webkit-perspective: 1000px;
-//
-//  perspective: 1000px;
-//  overflow: hidden;
-//  content: ' ';
-//  border-radius: inherit;
-//  z-index: -1;
-//  width: 100%;
-//  height: 100%;
-//  //backdrop-filter: blur(24px);
-//}
+
 
 /* Theme Definitions */
 $themes: (
@@ -76,11 +71,6 @@ $themes: (
 
     }
 
-    .element.active {
-      //box-shadow: 0 0 2px 1px $element-shadow, inset 0 0 2px 1.25px $element-border;
-      background-color: $element-bg-active !important;
-    }
-
 
   }
 }
@@ -91,7 +81,7 @@ $themes: (
 
 .element-secondary {
   background-color: $element-fg;
-  box-shadow: 0 0 8px 1px $element-shadow, inset 0 0 2px 1px $element-border;
+  box-shadow: 0 0 4px 0.2px opacify($element-shadow, 0.005), inset 0 0 2px 1px $element-border !important;
 }
 
 //.element-secondary:active {
@@ -103,8 +93,10 @@ $themes: (
 // Element Definition
 
 .element {
+
   @extend .bg-blur;
-  box-shadow: 0 0 8px 1px $element-shadow, inset 0 0 2px 1px $element-border;
+  position: relative;
+
   animation: loadIn 150ms forwards;
   padding: 0.25rem;
   border-radius: 0.5rem;
@@ -148,9 +140,6 @@ $themes: (
   15% {
     transform: scale(0.96);
   }
-  25% {
-    transform: scale(0.97);
-  }
   100% {
     transform: scale(0.96);
   }

client/src/components/AllocationBar.vue

@@ -1,60 +1,115 @@
 <!-- Copyright (c) 2022 Braden Nicholson -->
 
 <script lang="ts" setup>
-import {onMounted, reactive} from "vue";
+import {onMounted, reactive, watch} from "vue";
 
 
 export interface Allocation {
   name: string
   allocated: number
   source?: string
   active: number
+  battery?: boolean
   priority?: number
 }
 
 export interface AllocationBar {
   name: string
   allocatable: number
   allocations: Allocation[]
+  isFixed?: boolean
 }
 
 let props = defineProps<AllocationBar>()
 
 let state = reactive({
-  load: 0,
+  allocatedLoad: 0,
+  activeLoad: 0,
+})
+
+watch(props, (newProps, oldProps) => {
+  calculateLoad()
 })
 
 onMounted(() => {
   calculateLoad()
 })
 
 function calculateLoad() {
-  state.load = Math.round(props.allocations.reduce((a: number, b: Allocation) => a + b.active, 0))
+  state.allocatedLoad = props.allocations.reduce((a: number, b: Allocation) => a + b.allocated, 0)
+  state.activeLoad = props.allocations.reduce((a: number, b: Allocation) => a + b.active, 0)
+}
+
+function roundSmooth(input: number): number {
+  return Math.round(input * 10) / 10
 }
 
 </script>
 
 <template>
-  <div>
-    <div v-if="props.allocations">
-      <h5 class="mb-1 px-2">{{ name }} <span class="label-xs label-o4 float-end label-w500">{{
-          state.load
-        }}A / {{ props.allocatable }}A</span></h5>
+  <div v-if="props.allocations">
+
+    <div class="d-flex justify-content-between align-items-end">
+      <div class="label-xs label-r label-w400 label-o5 px-2">{{ props.name }}</div>
+      <div class="label-c1 label-r label-w400 label-o4 px-2">{{
+          roundSmooth((props.isFixed ? state.allocatedLoad : state.activeLoad) * 120)
+        }}<span class="label-o2 label-c3 label-w600 label-r">W</span> / {{ roundSmooth(props.allocatable * 120) }}<span
+            class="label-o2 label-c3 label-w600 label-r">W</span>
+      </div>
+
+    </div>
+    <div v-if="props.isFixed">
       <div class="power-chart element w-100 ">
-        <div v-for="(device, i) in props.allocations.sort((a, b) => b.active-a.active)"
+        <div v-for="device in props.allocations.sort((a, b) => b.active-a.active)"
              :style="`width: ${(device.allocated/props.allocatable)*100}% !important;`"
-             class="power-chart-point element">
+             class="power-chart-point element-secondary justify-content-center">
 
           <div :style="`width: ${(device.active/device.allocated)*100}% !important;`"
-               class="power-chart-meta element"></div>
-          <div>{{ device.name }}</div>
-          <div class="label-c3 label-o4 label-mono">{{ device.allocated }}A</div>
+               class="power-chart-meta element-secondary "></div>
+
+          <div class="label-w500 label-o4 label-r label-c2 lh-1"
+               style="overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+            {{ device.name }}
+          </div>
+          <div class="label-o2  label-c3">{{ roundSmooth(device.active * 120) }}W
+          </div>
+          <div class="label-o2  label-c3"></div>
+          <span v-if="device.battery" class="label-c3 text-success">􀛨</span>
+        </div>
+
+        <div :style="`width: ${((props.allocatable-state.allocatedLoad)/ props.allocatable)*100 }% !important;`"
+             class="power-chart-point subplot d-flex justify-content-center align-items-start px-2">
+          <div class="label-w500 label-o3 label-r label-c2 lh-1">Unallocated</div>
+          <div class="label-o2  label-c3">{{ roundSmooth((props.allocatable - state.allocatedLoad) * 120) }}W</div>
+
         </div>
-        <div class="power-chart-buttons">
+      </div>
+    </div>
+    <div v-else>
+      <div class="power-chart element w-100">
+        <div v-for="(device, i) in props.allocations.sort((a, b) => b.active-a.active)"
+             :style="`width: ${(device.active/props.allocatable)*100}% !important;`"
+             class="power-chart-point element-secondary justify-content-center">
+
+          <div class="label-w500 label-o4 label-r label-c2 lh-1 "
+               style="overflow: hidden; text-overflow: ellipsis; max-width: 100%;">{{ device.name }}
+          </div>
+          <div class="label-o2  label-c3">{{ roundSmooth(device.active * 120) }}W</div>
+
+          <span v-if="device.battery" class="label-c3 text-success">􀛨</span>
+        </div>
+
+        <div :style="`width: ${((props.allocatable - state.activeLoad) / props.allocatable)*100}% !important;`"
+             class="power-chart-point subplot d-flex justify-content-center align-items-start px-2">
+          <div class="label-w500 label-o3 label-r label-c2 lh-1">Unallocated</div>
+
+          <div class="label-o2  label-c3 ">{{ roundSmooth((props.allocatable - state.activeLoad) * 120) }}W
+          </div>
 
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -95,12 +150,13 @@ function calculateLoad() {
 .power-chart-point {
   min-width: 2.75rem;
   border-radius: 0.25rem;
-  height: 4rem;
+  height: 3rem;
   width: 8px;
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: start;
-
+  position: relative;
+  padding: 0.25rem;
 }
 </style>