Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
81b7f96abc |
8
.github/workflows/build.yml
vendored
8
.github/workflows/build.yml
vendored
@@ -2,7 +2,7 @@ name: Build Quasar SPA and Go Backend for lightController
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
branches: [main]
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
@@ -36,7 +36,7 @@ jobs:
|
||||
|
||||
- name: Build Quasar SPA
|
||||
run: quasar build
|
||||
|
||||
|
||||
- name: Set up Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
@@ -57,9 +57,9 @@ jobs:
|
||||
working-directory: ./backend
|
||||
run: |
|
||||
if [ "${{ matrix.goos }}" == "windows" ]; then
|
||||
GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -o ../server-${{ matrix.goos }}-${{ matrix.goarch }}.exe main.go
|
||||
GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -ldflags="-s -w" -trimpath -o ../server-${{ matrix.goos }}-${{ matrix.goarch }}.exe main.go
|
||||
else
|
||||
GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
|
||||
GOOS=${{ matrix.goos }} GOARCH=${{ matrix.goarch }} go build -ldflags="-s -w" -trimpath -o ../server-${{ matrix.goos }}-${{ matrix.goarch }} main.go
|
||||
fi
|
||||
|
||||
- name: Upload build artifacts
|
||||
|
@@ -2,6 +2,7 @@ package main
|
||||
|
||||
import (
|
||||
"backend/login"
|
||||
"backend/models"
|
||||
secenes "backend/scenes"
|
||||
"backend/server"
|
||||
"backend/utils"
|
||||
@@ -20,6 +21,11 @@ import (
|
||||
)
|
||||
|
||||
func main() {
|
||||
|
||||
var allowOrigins models.StringSlice
|
||||
|
||||
flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
|
||||
|
||||
spa := flag.String("spa", "./dist/spa", "quasar spa files")
|
||||
workingDir := flag.String("workingDirectory", ".", "quasar spa files")
|
||||
ip := flag.String("ip", "0.0.0.0", "server listening ip")
|
||||
@@ -32,7 +38,7 @@ func main() {
|
||||
fmt.Println(1, *workingDir)
|
||||
os.Chdir(*workingDir)
|
||||
}
|
||||
fmt.Println(1.1, *workingDir)
|
||||
|
||||
wd, err := os.Getwd()
|
||||
if err != nil {
|
||||
log.Fatalf("Could not get working directory: %v", err)
|
||||
@@ -67,19 +73,17 @@ func main() {
|
||||
s := server.NewServer()
|
||||
|
||||
//get local ip
|
||||
origins := []string{"http://localhost:9000"}
|
||||
origins = append(origins, "http://localhost:9500")
|
||||
allowOrigins = append(allowOrigins, "http://localhost:9000", "http://localhost:9500")
|
||||
|
||||
localIP, err := utils.GetLocalIP()
|
||||
if err != nil {
|
||||
logger.Error("main", fmt.Sprintf("get local ip : %s", err.Error()))
|
||||
} else {
|
||||
origins = append(origins, fmt.Sprintf("http://%s:9000", localIP))
|
||||
origins = append(origins, fmt.Sprintf("http://%s:9500", localIP))
|
||||
allowOrigins = append(allowOrigins, fmt.Sprintf("http://%s:9000", localIP), fmt.Sprintf("http://%s:9500", localIP))
|
||||
}
|
||||
fmt.Println(123, origins)
|
||||
|
||||
s.Routes.Use(cors.New(cors.Config{
|
||||
AllowOrigins: origins,
|
||||
AllowOrigins: allowOrigins,
|
||||
AllowMethods: []string{"POST", "GET", "DELETE", "OPTIONS"},
|
||||
AllowHeaders: []string{"Origin", "Content-Type"},
|
||||
AllowCredentials: true,
|
||||
|
14
backend/models/stringSlice.go
Normal file
14
backend/models/stringSlice.go
Normal file
@@ -0,0 +1,14 @@
|
||||
package models
|
||||
|
||||
import "strings"
|
||||
|
||||
type StringSlice []string
|
||||
|
||||
func (s *StringSlice) String() string {
|
||||
return strings.Join(*s, ",")
|
||||
}
|
||||
|
||||
func (s *StringSlice) Set(value string) error {
|
||||
*s = append(*s, value)
|
||||
return nil
|
||||
}
|
@@ -204,12 +204,10 @@ func (sh *ScenesHandler) LoadScene(c *gin.Context) {
|
||||
return
|
||||
}
|
||||
c.JSON(http.StatusOK, scene)
|
||||
break
|
||||
}
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{
|
||||
"error": fmt.Errorf("scene '%s' not found", scene.Name),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusBadRequest, gin.H{
|
||||
"error": fmt.Errorf("scene '%s' not found", scene.Name),
|
||||
})
|
||||
}
|
||||
|
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lightcontrol",
|
||||
"version": "0.0.18",
|
||||
"version": "0.0.19",
|
||||
"description": "A Tecamino App",
|
||||
"productName": "Light Control",
|
||||
"author": "A. Zuercher",
|
||||
|
@@ -7,7 +7,7 @@ const baseURL = `http://${host}:${port}`;
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: baseURL,
|
||||
timeout: 10000,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import { boot } from 'quasar/wrappers';
|
||||
import type { QVueGlobals } from 'quasar';
|
||||
import { initWebSocket } from 'src/services/websocket';
|
||||
import { initWebSocket } from '../vueLib/services/websocket';
|
||||
|
||||
export default boot(({ app }) => {
|
||||
const $q = app.config.globalProperties.$q as QVueGlobals;
|
||||
|
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<div class="row">
|
||||
<q-card-section class="col-4 scroll tree-container">
|
||||
<q-tree
|
||||
class="text-blue text-bold"
|
||||
dense
|
||||
:nodes="dbmData"
|
||||
node-key="key"
|
||||
no-transition
|
||||
:default-expand-all="false"
|
||||
v-model:expanded="expanded"
|
||||
@update:expanded="onExpandedChange"
|
||||
@lazy-load="onLazyLoad"
|
||||
>
|
||||
<template v-slot:[`default-header`]="props">
|
||||
<div
|
||||
class="row items-center text-blue"
|
||||
@contextmenu.prevent.stop="openSubMenu($event, props.node.key)"
|
||||
>
|
||||
<div class="row items-center text-blue"></div>
|
||||
<div>{{ props.node.path }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<!-- not implemented yet <sub-menu ref="subMenuRef"></sub-menu> -->
|
||||
</q-card-section>
|
||||
<dataTable class="col-8" :rows="getRows()" />
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import {
|
||||
type TreeNode,
|
||||
buildTree,
|
||||
dbmData,
|
||||
removeSubtreeByParentKey,
|
||||
} from 'src/composables/dbm/dbmTree';
|
||||
import DataTable from './DataTable.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { QCard } from 'quasar';
|
||||
import { subscribe, unsubscribe } from 'src/services/websocket';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import { api } from 'boot/axios';
|
||||
// not implemented yet import SubMenu from './SubMenu.vue';
|
||||
import { type Subs, type RawSubs, convertToSubscribes } from 'src/models/Subscribe';
|
||||
import { addSubscriptions, getRows, removeAllSubscriptions } from 'src/models/Subscriptions';
|
||||
|
||||
const $q = useQuasar();
|
||||
const expanded = ref<string[]>([]);
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
let lastExpanded: string[] = [];
|
||||
const postQuery = '/json_data';
|
||||
|
||||
onMounted(() => {
|
||||
api
|
||||
.post(postQuery, { get: [{ path: '.*', query: { depth: 1 } }] })
|
||||
.then((res) => {
|
||||
if (res.data.get) buildTree(convertToSubscribes(res.data.get as RawSubs));
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err, 'error'));
|
||||
});
|
||||
|
||||
onBeforeRouteLeave(() => {
|
||||
unsubscribe([{ path: '.*', depth: 0 }]).catch((err) => NotifyResponse($q, err, 'error'));
|
||||
});
|
||||
|
||||
function onLazyLoad({
|
||||
node,
|
||||
done,
|
||||
fail,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
done: (children: TreeNode[]) => void;
|
||||
fail: () => void;
|
||||
}): void {
|
||||
api
|
||||
.post(postQuery, { get: [{ uuid: node.key ?? ZERO_UUID, path: '', query: { depth: 2 } }] })
|
||||
.then((resp) => {
|
||||
if (resp?.data.get) done(buildTree(convertToSubscribes(resp?.data.get as RawSubs)));
|
||||
else done([]); // no children returned
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
fail(); // trigger the fail handler
|
||||
});
|
||||
}
|
||||
|
||||
async function onExpandedChange(newExpanded: readonly string[]) {
|
||||
const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
|
||||
const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
|
||||
|
||||
try {
|
||||
await unsubscribe([{ path: '.*', depth: 0 }])
|
||||
.then(() => {
|
||||
removeAllSubscriptions();
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err, 'error'));
|
||||
|
||||
if (collapsed.length) {
|
||||
collapsed.forEach((key) => {
|
||||
removeSubtreeByParentKey(key);
|
||||
api
|
||||
.post(postQuery, { get: [{ uuid: key, path: '', query: { depth: 2 } }] })
|
||||
.then((resp) => {
|
||||
if (resp?.data.get) {
|
||||
buildTree(resp?.data.get as Subs);
|
||||
subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) =>
|
||||
NotifyResponse($q, err, 'error'),
|
||||
);
|
||||
addSubscriptions(resp?.data.get as RawSubs);
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err, 'error'));
|
||||
});
|
||||
}
|
||||
if (newlyExpanded.length) {
|
||||
newlyExpanded.forEach((key) => {
|
||||
api
|
||||
.post(postQuery, { get: [{ uuid: key, path: '', query: { depth: 2 } }] })
|
||||
.then((resp) => {
|
||||
if (resp?.data.get) {
|
||||
buildTree(resp?.data.get as Subs);
|
||||
subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) =>
|
||||
NotifyResponse($q, err, 'error'),
|
||||
);
|
||||
addSubscriptions(resp?.data.get as RawSubs);
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err, 'error'));
|
||||
});
|
||||
}
|
||||
|
||||
lastExpanded = [...newExpanded];
|
||||
} catch {
|
||||
console.error('error in expand function');
|
||||
}
|
||||
}
|
||||
|
||||
const subMenuRef = ref();
|
||||
|
||||
function openSubMenu(event: MouseEvent, uuid: string) {
|
||||
subMenuRef.value?.open(event, uuid);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tree-container {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.tree-container {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 1023px) {
|
||||
.tree-container {
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||
.tree-container {
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.tree-container {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
.tree-container {
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<q-menu ref="contextMenuRef" context-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="handleAction('Add')">
|
||||
<q-item-section>Add Datapoint</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:class="disable ? 'text-grey-5' : ''"
|
||||
:clickable="!disable"
|
||||
v-close-popup
|
||||
@click="handleAction('Delete')"
|
||||
>
|
||||
<q-item-section>Delete Datapoint</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<AddDialog :dialogLabel="label" width="700px" button-ok-label="Add" ref="addDialog" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AddDialog from 'src/components/dialog/AddDatapoint.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
const addDialog = ref();
|
||||
const datapointUuid = ref('');
|
||||
const contextMenuRef = ref();
|
||||
const label = ref('');
|
||||
const disable = ref(false);
|
||||
|
||||
function handleAction(action: string) {
|
||||
switch (action) {
|
||||
case 'Add':
|
||||
label.value = 'Add New Datapoint';
|
||||
addDialog.value?.open(datapointUuid.value);
|
||||
break;
|
||||
case 'Delete':
|
||||
label.value = 'Remove Datapoint';
|
||||
addDialog.value?.open(datapointUuid.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const open = (event: MouseEvent, uuid: string) => {
|
||||
if (uuid === ZERO_UUID) disable.value = true;
|
||||
event.preventDefault();
|
||||
datapointUuid.value = uuid;
|
||||
contextMenuRef.value?.show(event);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-table
|
||||
v-if="tableRows.length > 0"
|
||||
style="height: 600px"
|
||||
flat
|
||||
bordered
|
||||
:title="props.rows[0]?.path"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="path"
|
||||
virtual-scroll
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<template v-slot:body-cell-value="props">
|
||||
<q-td :props="props" @click="openDialog(props.row)">
|
||||
<div :class="['cursor-pointer', 'q-mx-sm']">
|
||||
{{ props.row.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-drivers="props">
|
||||
<q-td :props="props" @click="openDialog(props.row, 'driver')">
|
||||
<div v-if="props.row.type !== 'none'" :class="['cursor-pointer']">
|
||||
<q-icon size="sm" name="cell_tower" :color="props.row.drivers ? 'blue-5' : 'grey-4'" />
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
<UpdateDialog
|
||||
dialogLabel="Update Value"
|
||||
width="400px"
|
||||
button-ok-label="Write"
|
||||
ref="updateDialog"
|
||||
v-model:datapoint="dialogValue"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UpdateDialog from 'src/components/dialog/UpdateValueDialog.vue';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { Subscribe } from 'src/models/Subscribe';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { Subs } from 'src/models/Subscribe';
|
||||
|
||||
const updateDialog = ref();
|
||||
const dialogValue = ref();
|
||||
|
||||
const openDialog = (sub: Subscribe, type?: string) => {
|
||||
updateDialog.value?.open(sub, type);
|
||||
};
|
||||
|
||||
// we generate lots of rows here
|
||||
const props = defineProps<{
|
||||
rows: Subs;
|
||||
}>();
|
||||
|
||||
const tableRows = computed(() => [...props.rows]);
|
||||
|
||||
const columns = [
|
||||
{ name: 'path', label: 'Path', field: 'path', align: 'left' },
|
||||
{
|
||||
name: 'type',
|
||||
label: 'Type',
|
||||
field: 'type',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
field: 'value',
|
||||
align: 'left',
|
||||
},
|
||||
// {. not implemented yet
|
||||
// name: 'drivers',
|
||||
// label: 'Drivers',
|
||||
// field: 'drivers',
|
||||
// align: 'center',
|
||||
// },
|
||||
] as QTableProps['columns'];
|
||||
</script>
|
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>{{ props.dialogLabel }}
|
||||
</q-card-section>
|
||||
<q-form ref="addForm" @submit="onSubmit" class="q-gutter-md">
|
||||
<q-input
|
||||
class="q-pa-md"
|
||||
filled
|
||||
v-model="path"
|
||||
label=""
|
||||
:rules="[(val) => !!val || 'Path is required']"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="column">
|
||||
<span class="text-caption text-primary non-editable-prefix">Path *</span>
|
||||
<span class="text-body2 text-grey-6 non-editable-prefix">{{ staticPrefix }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
<DataTypes class="q-ma-md" flat></DataTypes>
|
||||
<q-btn no-caps class="q-ma-lg" type="submit" color="primary">{{ props.buttonOkLabel }}</q-btn>
|
||||
</q-form>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { ref } from 'vue';
|
||||
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
|
||||
import { api } from 'boot/axios';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import DataTypes from 'src/vueLib/buttons/DataTypes.vue';
|
||||
//import datatype from 'src/vueLib/buttons/DataType.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const Dialog = ref();
|
||||
const path = ref('');
|
||||
const staticPrefix = ref('');
|
||||
//const radio = ref('bool');
|
||||
const addForm = ref();
|
||||
|
||||
const open = (uuid: string) => {
|
||||
Dialog.value?.open();
|
||||
getDatapoint(uuid);
|
||||
};
|
||||
|
||||
function validate() {
|
||||
addForm.value.validate().then((success: undefined) => {
|
||||
if (success) {
|
||||
console.log(909);
|
||||
// yay, models are correct
|
||||
} else {
|
||||
console.log(910);
|
||||
// oh no, user has filled in
|
||||
// at least one invalid value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
validate();
|
||||
console.log('submit', props);
|
||||
}
|
||||
|
||||
function getDatapoint(uuid: string) {
|
||||
api
|
||||
.post('/json_data', { get: [{ uuid: uuid, query: { depth: 1 } }] })
|
||||
.then((resp) => {
|
||||
if (resp.data.get) {
|
||||
staticPrefix.value = resp.data.get[0].path;
|
||||
if (staticPrefix.value !== '') staticPrefix.value += ':';
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err, 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>{{ props.dialogLabel + ': ' + props.datapoint?.path }}</q-card-section
|
||||
>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
class="q-px-md q-ma-sm"
|
||||
label="current value"
|
||||
dense
|
||||
filled
|
||||
readonly
|
||||
v-model="inputValue as string | number"
|
||||
></q-input>
|
||||
<q-input
|
||||
class="q-px-md q-mx-sm"
|
||||
label="new value"
|
||||
dense
|
||||
filled
|
||||
@keyup.enter="write"
|
||||
v-model="writeValue as string | number"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
|
||||
props.text
|
||||
}}</q-card-section>
|
||||
<q-card-actions align="left" class="text-primary">
|
||||
<q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="q-mb-xl q-ml-lg q-mt-none"
|
||||
v-if="props.buttonOkLabel"
|
||||
color="primary"
|
||||
:label="props.buttonOkLabel"
|
||||
@click="write"
|
||||
>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
|
||||
import type { Subscribe } from 'src/models/Subscribe';
|
||||
import type { PropType } from 'vue';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
const Dialog = ref();
|
||||
const writeValue = ref();
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
buttonCancelLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
datapoint: Object as PropType<Subscribe>,
|
||||
});
|
||||
|
||||
const inputValue = ref(props.datapoint?.value);
|
||||
|
||||
const open = (sub: Subscribe, type?: string) => {
|
||||
Dialog.value?.open();
|
||||
switch (type) {
|
||||
case 'driver':
|
||||
console.log(9, sub.drivers);
|
||||
writeValue.value = sub.drivers;
|
||||
break;
|
||||
default:
|
||||
writeValue.value = sub.value;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.datapoint?.value,
|
||||
(newVal) => {
|
||||
inputValue.value = newVal;
|
||||
},
|
||||
);
|
||||
|
||||
function write() {
|
||||
setValues([{ uuid: props.datapoint?.uuid ?? '', value: writeValue.value ?? undefined }])
|
||||
.then((resp) => {
|
||||
if (resp?.set) {
|
||||
resp.set.forEach((set) => {
|
||||
inputValue.value = set.value;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.outercard {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
@@ -105,14 +105,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { watch, reactive, ref } from 'vue';
|
||||
import type { Light } from 'src/models/Light';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import { setValues } from 'src/vueLib/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { NotifyResponse } = useNotify();
|
||||
const settings = ref(false);
|
||||
|
||||
const light = reactive<Light>({
|
||||
@@ -154,10 +154,10 @@ watch(light, (newVal: Light) => {
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
NotifyResponse($q, response);
|
||||
NotifyResponse(response);
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
@@ -109,8 +109,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { addOne, substractOne } from 'src/utils/number-helpers';
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { updateValue } from 'src/vueLib/dbm/dbmTree';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
|
||||
const props = defineProps({
|
||||
reversePan: {
|
||||
@@ -141,16 +141,15 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const togglePan = ref(false);
|
||||
const toggleTilt = ref(false);
|
||||
const pad = ref<HTMLElement | null>(null);
|
||||
const dragging = ref(false);
|
||||
const containerSize = ref(0);
|
||||
|
||||
const pan = updateValue(props.panPath, $q, togglePan, props.panPath2);
|
||||
const tilt = updateValue(props.tiltPath, $q, toggleTilt, props.tiltPath2);
|
||||
const pan = updateValue(NotifyResponse, props.panPath, togglePan, props.panPath2);
|
||||
const tilt = updateValue(NotifyResponse, props.tiltPath, toggleTilt, props.tiltPath2);
|
||||
|
||||
const scaleFactor = computed(() => containerSize.value / 255);
|
||||
// 200px → 2, 400px → 4, etc.
|
||||
@@ -202,7 +201,7 @@ function stopDrag() {
|
||||
}
|
||||
|
||||
function startTouch(e: TouchEvent) {
|
||||
e.preventDefault(); // ✅ block scroll
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
if (!touch) return;
|
||||
dragging.value = true;
|
||||
|
@@ -66,21 +66,21 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { unsubscribe, subscribeToPath } from 'src/services/websocket';
|
||||
import { unsubscribe, subscribeToPath } from 'src/vueLib/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
import { removeAllSubscriptions } from 'src/models/Subscriptions';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { updateValue } from 'src/vueLib/dbm/dbmTree';
|
||||
import { removeAllSubscriptions } from 'src/vueLib/models/Subscriptions';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { NotifyResponse } = useNotify();
|
||||
const settings = ref(false);
|
||||
const brightness = updateValue('LightBar:Brightness', $q);
|
||||
const state = updateValue('LightBar:State', $q);
|
||||
const brightness = updateValue(NotifyResponse, 'LightBar:Brightness');
|
||||
const state = updateValue(NotifyResponse, 'LightBar:State');
|
||||
onMounted(() => {
|
||||
subscribeToPath($q, 'LightBar:.*');
|
||||
subscribeToPath(NotifyResponse, 'LightBar:.*');
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -90,7 +90,7 @@ onUnmounted(() => {
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
removeAllSubscriptions();
|
||||
});
|
||||
|
@@ -45,11 +45,9 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
import { updateValue } from 'src/vueLib/dbm/dbmTree';
|
||||
import { addOne, substractOne } from 'src/utils/number-helpers';
|
||||
|
||||
const $q = useQuasar();
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
|
||||
const props = defineProps({
|
||||
toggleHighLow: {
|
||||
@@ -123,10 +121,11 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const toggle = ref(false);
|
||||
const localValue = updateValue(
|
||||
NotifyResponse,
|
||||
props.dbmPath,
|
||||
$q,
|
||||
toggle,
|
||||
props.dbmPath2,
|
||||
props.dbmPath3,
|
||||
|
@@ -101,21 +101,21 @@ select
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { onBeforeUpdate, computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { subscribeToPath, unsubscribe, setValues } from 'src/services/websocket';
|
||||
import { subscribeToPath, unsubscribe, setValues } from 'src/vueLib/services/websocket';
|
||||
import { LocalStorage } from 'quasar';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
import { updateValue } from 'src/vueLib/dbm/dbmTree';
|
||||
import DragPad from 'src/components/lights/DragPad.vue';
|
||||
import SettingDialog from './SettingMovingHead.vue';
|
||||
import type { Settings } from 'src/models/MovingHead';
|
||||
import { findSubscriptionByPath, removeAllSubscriptions } from 'src/models/Subscriptions';
|
||||
import { findSubscriptionByPath, removeAllSubscriptions } from 'src/vueLib/models/Subscriptions';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { NotifyResponse } = useNotify();
|
||||
const brightness = updateBrightnessValue('MovingHead:Brightness');
|
||||
const state = updateValue('MovingHead:State', $q);
|
||||
const state = updateValue(NotifyResponse, 'MovingHead:State');
|
||||
const settings = ref<Settings>({
|
||||
show: false,
|
||||
reversePan: false,
|
||||
@@ -126,11 +126,11 @@ const settings = ref<Settings>({
|
||||
onMounted(() => {
|
||||
settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
|
||||
settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
|
||||
subscribeToPath($q, 'MovingHead:.*');
|
||||
subscribeToPath(NotifyResponse, 'MovingHead:.*');
|
||||
});
|
||||
|
||||
onBeforeUpdate(() => {
|
||||
subscribeToPath($q, 'MovingHead:.*');
|
||||
subscribeToPath(NotifyResponse, 'MovingHead:.*');
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -140,7 +140,7 @@ onUnmounted(() => {
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
removeAllSubscriptions();
|
||||
});
|
||||
@@ -172,7 +172,7 @@ function updateBrightnessValue(path: string) {
|
||||
setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.then((response) => NotifyResponse(response))
|
||||
.catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
|
||||
},
|
||||
});
|
||||
|
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<!-- new edit scene dialog-->
|
||||
<q-dialog v-model="showDialog" persistent>
|
||||
<q-card style="min-width: 350px">
|
||||
<DialogFrame ref="sceneDialog" width="350px">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-primary text-h6">{{ dialogLabel }}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-input
|
||||
:readonly="dialog === 'load'"
|
||||
class="q-mb-md"
|
||||
dense
|
||||
v-model="newScene.name"
|
||||
@@ -17,6 +18,7 @@
|
||||
@keyup.enter="saveScene"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="dialog === 'load'"
|
||||
dense
|
||||
v-model="newScene.description"
|
||||
placeholder="Description"
|
||||
@@ -32,11 +34,10 @@
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="Cancel" v-close-popup />
|
||||
<q-btn flat :label="dialogLabel" @click="saveScene()" />
|
||||
<q-btn flat :label="dialogLabel" v-close-popup @click="saveScene()" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</DialogFrame>
|
||||
<Dialog
|
||||
dialogLabel="Duplicate Scene"
|
||||
:text="`Scene '${newScene.name}' exists already`"
|
||||
@@ -110,18 +111,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NotifyDialog } from 'src/composables/notify';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import type { Scene } from 'src/models/Scene';
|
||||
import type { Set } from 'src/models/Set';
|
||||
import type { Set } from 'src/vueLib/models/Set';
|
||||
import axios from 'axios';
|
||||
import { api } from 'boot/axios';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import Dialog from 'src/components/dialog/OkDialog.vue';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
const $q = useQuasar();
|
||||
const showDialog = ref(false);
|
||||
import { setValues } from 'src/vueLib/services/websocket';
|
||||
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse, NotifyDialog } = useNotify();
|
||||
const sceneDialog = ref();
|
||||
const dialog = ref('');
|
||||
const existsAlready = ref(false);
|
||||
const editIndex = ref(-1);
|
||||
@@ -154,13 +156,13 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err.response.data.error, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
});
|
||||
|
||||
function removeScene(name: string) {
|
||||
dialog.value = '';
|
||||
NotifyDialog($q, 'Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
|
||||
NotifyDialog('Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
scenes.value = scenes.value.filter((s) => s.name !== name);
|
||||
@@ -171,15 +173,15 @@ function removeScene(name: string) {
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
NotifyResponse($q, res.data, 'warning');
|
||||
NotifyResponse(res.data, 'warning');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err.response.data.error, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err.resp, 'warning'));
|
||||
.catch((err) => NotifyResponse(catchError(err), 'warning'));
|
||||
}
|
||||
|
||||
function openDialog(dialogType: string, scene?: Scene, index?: number) {
|
||||
@@ -190,7 +192,6 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
|
||||
newScene.name = '';
|
||||
newScene.movingHead = true;
|
||||
newScene.lightBar = true;
|
||||
showDialog.value = true;
|
||||
break;
|
||||
case 'edit':
|
||||
if (!scene) return;
|
||||
@@ -199,7 +200,6 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
|
||||
dialogLabel.value = 'Update Scene';
|
||||
editIndex.value = index;
|
||||
Object.assign(newScene, JSON.parse(JSON.stringify(scene)));
|
||||
showDialog.value = true;
|
||||
break;
|
||||
case 'load':
|
||||
if (!scene) return;
|
||||
@@ -210,15 +210,12 @@ function openDialog(dialogType: string, scene?: Scene, index?: number) {
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
Object.assign(newScene, JSON.parse(JSON.stringify(res.data)));
|
||||
showDialog.value = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse($q, err.response.data.error, 'error'));
|
||||
break;
|
||||
default:
|
||||
showDialog.value = false;
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
break;
|
||||
}
|
||||
sceneDialog.value.open();
|
||||
}
|
||||
|
||||
const saveScene = async () => {
|
||||
@@ -258,7 +255,7 @@ const saveScene = async () => {
|
||||
const res = await api.post('/json_data', { get: sendValues });
|
||||
newScene.values = res.data.get;
|
||||
} catch (err) {
|
||||
NotifyResponse($q, err as Error, 'error');
|
||||
NotifyResponse(err as Error, 'error');
|
||||
}
|
||||
} else {
|
||||
newScene.values = [];
|
||||
@@ -273,14 +270,15 @@ const saveScene = async () => {
|
||||
.post('/api/saveScene', JSON.stringify(newScene))
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
NotifyResponse($q, res.data);
|
||||
NotifyResponse(res.data);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err.response.data.error, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
scenes.value = [...scenes.value];
|
||||
break;
|
||||
|
||||
case 'edit':
|
||||
if (exists) {
|
||||
existsAlready.value = true;
|
||||
@@ -306,7 +304,7 @@ const saveScene = async () => {
|
||||
const res = await api.post('/json_data', { get: sendValues });
|
||||
newScene.values = res.data.get;
|
||||
} catch (err) {
|
||||
NotifyResponse($q, err as Error, 'error');
|
||||
NotifyResponse(err as Error, 'error');
|
||||
}
|
||||
} else {
|
||||
newScene.values = [];
|
||||
@@ -319,43 +317,41 @@ const saveScene = async () => {
|
||||
.post('/api/saveScene', JSON.stringify(newScene))
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
NotifyResponse($q, res.data);
|
||||
NotifyResponse(res.data);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err.response.data.error, 'error');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
scenes.value = [...scenes.value];
|
||||
break;
|
||||
|
||||
case 'load':
|
||||
{
|
||||
const setPaths = <Set[]>[];
|
||||
|
||||
if (newScene.movingHead) {
|
||||
newScene.values?.forEach((element) => {
|
||||
if (element.path && element.path.includes('MovingHead')) {
|
||||
setPaths.push({ path: element.path, value: element.value });
|
||||
}
|
||||
});
|
||||
}
|
||||
newScene.values?.forEach((element) => {
|
||||
if (!element.path) return;
|
||||
|
||||
if (newScene.movingHead && element.path.includes('MovingHead'))
|
||||
setPaths.push({ uuid: element.uuid, path: element.path, value: element.value });
|
||||
|
||||
if (newScene.lightBar && element.path.includes('LightBar'))
|
||||
setPaths.push({ uuid: element.uuid, path: element.path, value: element.value });
|
||||
});
|
||||
|
||||
if (newScene.lightBar) {
|
||||
newScene.values?.forEach((element) => {
|
||||
if (element.path && element.path.includes('LightBar')) {
|
||||
setPaths.push({ path: element.path, value: element.value });
|
||||
}
|
||||
});
|
||||
}
|
||||
setValues(setPaths)
|
||||
.then((response) => {
|
||||
NotifyResponse($q, response);
|
||||
NotifyResponse(response);
|
||||
})
|
||||
.catch((err) => console.error(`Failed to load scene ${newScene.name}`, err));
|
||||
.catch((err) => {
|
||||
NotifyResponse(`Failed to load scene ${newScene.name}`, 'warning');
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
dialog.value = '';
|
||||
showDialog.value = false;
|
||||
};
|
||||
</script>
|
||||
|
@@ -1,131 +0,0 @@
|
||||
import { reactive, computed, type Ref } from 'vue';
|
||||
import type { QVueGlobals } from 'quasar';
|
||||
import type { Subs } from 'src/models/Subscribe';
|
||||
import { NotifyResponse } from '../notify';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import { findSubscriptionByPath } from 'src/models/Subscriptions';
|
||||
|
||||
export const dbmData = reactive<TreeNode[]>([]);
|
||||
//export const reactiveValues = new Map<string, Ref<string | number | boolean | null>>();
|
||||
|
||||
export type TreeNode = {
|
||||
path: string | undefined;
|
||||
key?: string; // optional: useful for QTree's node-key
|
||||
lazy: boolean;
|
||||
children?: TreeNode[];
|
||||
};
|
||||
|
||||
type TreeMap = {
|
||||
[key: string]: {
|
||||
__children: TreeMap;
|
||||
uuid?: string;
|
||||
value?: string | number | boolean | null;
|
||||
lazy: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
const root: TreeMap = {};
|
||||
|
||||
export function buildTree(subs: Subs): TreeNode[] {
|
||||
for (const { path, uuid, value, hasChild } of subs) {
|
||||
if (!path) continue;
|
||||
|
||||
const parts = path.split(':');
|
||||
let current = root;
|
||||
|
||||
parts.forEach((part, idx) => {
|
||||
if (!part) return;
|
||||
|
||||
if (!current[part]) {
|
||||
current[part] = { __children: {}, lazy: true };
|
||||
}
|
||||
|
||||
if (idx === parts.length - 1 && uuid) {
|
||||
if (current[part].uuid === uuid) return;
|
||||
|
||||
current[part].uuid = uuid;
|
||||
current[part].value = value?.value ?? null;
|
||||
current[part].lazy = hasChild ?? false;
|
||||
}
|
||||
|
||||
current = current[part].__children;
|
||||
});
|
||||
}
|
||||
|
||||
function mapToTree(map: TreeMap): TreeNode[] {
|
||||
return Object.entries(map).map(([key, node]) => ({
|
||||
path: key,
|
||||
key: node.uuid ?? key,
|
||||
value: node.value,
|
||||
lazy: node.lazy,
|
||||
children: mapToTree(node.__children),
|
||||
}));
|
||||
}
|
||||
|
||||
const newTree = [
|
||||
{
|
||||
path: 'DBM',
|
||||
key: '00000000-0000-0000-0000-000000000000',
|
||||
lazy: true,
|
||||
children: mapToTree(root),
|
||||
},
|
||||
];
|
||||
return dbmData.splice(0, dbmData.length, ...newTree);
|
||||
}
|
||||
|
||||
export function removeSubtreeByParentKey(parentKey: string) {
|
||||
function removeChildrenAndMarkLazy(nodes: TreeNode[], targetKey: string): boolean {
|
||||
for (const node of nodes) {
|
||||
if (node.key === targetKey) {
|
||||
delete node.children;
|
||||
node.lazy = true;
|
||||
return true;
|
||||
}
|
||||
if (node.children) {
|
||||
const found = removeChildrenAndMarkLazy(node.children, targetKey);
|
||||
if (found) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
removeChildrenAndMarkLazy(dbmData, parentKey);
|
||||
}
|
||||
|
||||
export function updateValue(
|
||||
path1: string,
|
||||
$q: QVueGlobals,
|
||||
toggle?: Ref<boolean>,
|
||||
path2?: string,
|
||||
path3?: string,
|
||||
value3?: number,
|
||||
) {
|
||||
return computed({
|
||||
get() {
|
||||
const sub = findSubscriptionByPath(toggle?.value && path2 ? path2 : path1);
|
||||
return sub?.value ? Number(sub.value ?? 0) : 0;
|
||||
},
|
||||
set(val) {
|
||||
const baseValue = val;
|
||||
const setPaths = [];
|
||||
if (toggle?.value && path2) {
|
||||
setPaths.push({ path: path2, value: baseValue });
|
||||
} else {
|
||||
setPaths.push({ path: path1, value: baseValue });
|
||||
}
|
||||
|
||||
if (path3) {
|
||||
setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
|
||||
}
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.catch((err) => {
|
||||
NotifyResponse(
|
||||
$q,
|
||||
`Failed to update [${path1 + ' ' + path2 + ' ' + path3}]: ${err}`,
|
||||
'error',
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
@@ -1,67 +0,0 @@
|
||||
import type { Response } from 'src/models/Response';
|
||||
import type { QVueGlobals } from 'quasar';
|
||||
|
||||
export function NotifyResponse(
|
||||
$q: QVueGlobals,
|
||||
response: Response | string | undefined,
|
||||
type?: 'warning' | 'error',
|
||||
timeout: number = 5000,
|
||||
) {
|
||||
let color = 'green';
|
||||
let icon = 'check_circle';
|
||||
|
||||
switch (type) {
|
||||
case 'warning':
|
||||
color = 'orange';
|
||||
icon = 'warning';
|
||||
break;
|
||||
case 'error':
|
||||
color = 'red';
|
||||
icon = 'error';
|
||||
break;
|
||||
}
|
||||
|
||||
if (response) {
|
||||
const message = typeof response === 'string' ? response : (response.message ?? '');
|
||||
if (message === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
color = typeof response === 'string' ? color : response?.error ? 'red' : color;
|
||||
icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
|
||||
$q?.notify({
|
||||
message: message,
|
||||
color: color,
|
||||
position: 'bottom-right',
|
||||
icon: icon,
|
||||
timeout: timeout,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function NotifyDialog(
|
||||
$q: QVueGlobals,
|
||||
title: string,
|
||||
text: string,
|
||||
okText?: string,
|
||||
cancelText?: string,
|
||||
) {
|
||||
return new Promise((resolve) => {
|
||||
$q.dialog({
|
||||
title: title,
|
||||
message: text,
|
||||
persistent: true,
|
||||
ok: okText ?? 'OK',
|
||||
cancel: cancelText ?? 'CANCEL',
|
||||
})
|
||||
.onOk(() => {
|
||||
resolve(true);
|
||||
})
|
||||
.onCancel(() => {
|
||||
resolve(false);
|
||||
})
|
||||
.onDismiss(() => {
|
||||
resolve(false);
|
||||
});
|
||||
});
|
||||
}
|
@@ -1,16 +0,0 @@
|
||||
export type Publish = {
|
||||
event: string;
|
||||
uuid: string;
|
||||
path: string;
|
||||
type: string;
|
||||
value: string | number | boolean | null;
|
||||
};
|
||||
export type Pubs = Publish[];
|
||||
|
||||
import { updateSubscriptionValue } from './Subscriptions';
|
||||
|
||||
export function publishToSubscriptions(pubs: Pubs) {
|
||||
pubs.forEach((pub) => {
|
||||
updateSubscriptionValue(pub.uuid, pub.value);
|
||||
});
|
||||
}
|
@@ -1,10 +0,0 @@
|
||||
import type { Gets } from './Get';
|
||||
import type { Sets } from './Set';
|
||||
import type { Subs } from './Subscribe';
|
||||
|
||||
export type Request = {
|
||||
get?: Gets;
|
||||
set?: Sets;
|
||||
subscribe?: Subs;
|
||||
unsubscribe?: Subs;
|
||||
};
|
@@ -1,4 +1,4 @@
|
||||
import type { Value } from './Value';
|
||||
import type { Value } from '../vueLib/models/Value';
|
||||
|
||||
export interface Scene {
|
||||
name: string;
|
||||
|
@@ -4,17 +4,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DBMTree from 'src/components/dbm/DBMTree.vue';
|
||||
import DBMTree from 'src/vueLib/dbm/DBMTree.vue';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { NotifyResponse } = useNotify();
|
||||
|
||||
function saveDBM() {
|
||||
api
|
||||
.get('saveData')
|
||||
.then((resp) => NotifyResponse($q, resp.data))
|
||||
.catch((err) => NotifyResponse($q, err));
|
||||
.then((resp) => NotifyResponse(resp.data))
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
</script>
|
||||
|
@@ -3,22 +3,90 @@
|
||||
<div class="text-primary q-ma-md">Datatypes *</div>
|
||||
<div>
|
||||
<div class="row q-gutter-sm q-ml-sm">
|
||||
<q-card-section class="items-between">
|
||||
<RadioButton class="q-ma-xs" v-model:opt="datatype" text="None" hint="none">
|
||||
<div>
|
||||
<div class="text-grey text-bold">General</div>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-lg q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="None"
|
||||
hint="none"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton class="q-ma-xs" v-model:opt="datatype" text="String" hint="Text">
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-lg q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="String"
|
||||
hint="Text"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton class="q-ma-xs" v-model:opt="datatype" text="Bool" hint="On / Off">
|
||||
<RadioButton class="q-my-xs q-px-lg" v-model:opt="datatype" text="Bool" hint="On / Off">
|
||||
</RadioButton>
|
||||
</q-card-section>
|
||||
<RadioButton v-model:opt="datatype" text="Uint8" hint="0 - 255"> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Uint16" hint="0 - 65535"> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Uint32" hint="0 - 429496..."> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Int8" hint="-128 - 127"> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Int16" hint="-32768 - 3..."> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Int32" hint="-21474836..."> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="Int32" hint="-2^63 - (2^...)"> </RadioButton>
|
||||
<RadioButton v-model:opt="datatype" text="double" hint="1.7E 1/- 3..."> </RadioButton>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-grey text-bold">Numbers</div>
|
||||
<div>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-lg q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Uint8"
|
||||
hint="0 - 255"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-lg q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Uint16"
|
||||
hint="0 - 65535"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Uint32"
|
||||
hint="0 - 429496..."
|
||||
>
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div>
|
||||
<RadioButton
|
||||
class="q-my-xs q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Int8"
|
||||
hint="-128 - 127"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
class="q-my-xs q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Int16"
|
||||
hint="-32768 - 3..."
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Int32"
|
||||
hint="-21474836..."
|
||||
>
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-sm q-mr-sm"
|
||||
v-model:opt="datatype"
|
||||
text="Int"
|
||||
hint="-2^63 - (2^...)"
|
||||
>
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
class="q-my-xs q-px-md"
|
||||
v-model:opt="datatype"
|
||||
text="Double"
|
||||
hint="1.7E 1/- 3..."
|
||||
>
|
||||
</RadioButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
@@ -26,7 +94,10 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import RadioButton from './RadioButton.vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const datatype = ref('none');
|
||||
const emit = defineEmits(['update:datatype']);
|
||||
const datatype = ref('None');
|
||||
|
||||
watch(datatype, (newVal) => emit('update:datatype', newVal));
|
||||
</script>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<q-btn style="border-radius: 8px" no-caps
|
||||
><q-radio v-model="opt" :val="props.text"></q-radio>
|
||||
<div class="column items-start q-mx-md">
|
||||
<div class="column items-start q-mx-sm">
|
||||
<div class="text-body1 text-black">{{ props.text }}</div>
|
||||
<div class="text-caption text-grey">{{ props.hint }}</div>
|
||||
</div>
|
||||
|
125
src/vueLib/dbm/DBMTree.vue
Normal file
125
src/vueLib/dbm/DBMTree.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<div class="row">
|
||||
<q-card-section class="col-4 scroll tree-container">
|
||||
<q-tree
|
||||
class="text-blue text-bold"
|
||||
dense
|
||||
:nodes="dbmData"
|
||||
node-key="key"
|
||||
no-transition
|
||||
:default-expand-all="false"
|
||||
v-model:expanded="expanded"
|
||||
@update:expanded="onExpandedChange(expanded)"
|
||||
@lazy-load="onLazyLoad"
|
||||
>
|
||||
<template v-slot:[`default-header`]="props">
|
||||
<div
|
||||
class="row items-center text-blue"
|
||||
@contextmenu.prevent.stop="openSubMenu($event, props.node)"
|
||||
>
|
||||
<div class="row items-center text-blue"></div>
|
||||
<div>{{ props.node.path }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<sub-menu ref="subMenuRef"></sub-menu>
|
||||
</q-card-section>
|
||||
<dataTable class="col-8" />
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import {
|
||||
type TreeNode,
|
||||
dbmData,
|
||||
onExpandedChange,
|
||||
expanded,
|
||||
buildTree,
|
||||
} from '../../vueLib/dbm/dbmTree';
|
||||
import DataTable from './DataTable.vue';
|
||||
import { useNotify } from '../general/useNotify';
|
||||
import { QCard } from 'quasar';
|
||||
import { unsubscribe } from '../services/websocket';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import SubMenu from './SubMenu.vue';
|
||||
import { convertToSubscribes, type RawSubs } from '../models/Subscribe';
|
||||
import { getRequest } from '../models/Request';
|
||||
import { catchError } from '../models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
onMounted(() => {
|
||||
getRequest('', '.*', 1)
|
||||
.then((res) => {
|
||||
const test = res;
|
||||
if (res) buildTree(convertToSubscribes(test as RawSubs));
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
});
|
||||
|
||||
onBeforeRouteLeave(() => {
|
||||
unsubscribe([{ path: '.*', depth: 0 }]).catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
});
|
||||
|
||||
function onLazyLoad({
|
||||
node,
|
||||
done,
|
||||
fail,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
done: (children: TreeNode[]) => void;
|
||||
fail: () => void;
|
||||
}) {
|
||||
getRequest(node.key ?? ZERO_UUID, '', 2)
|
||||
.then((resp) => {
|
||||
if (resp) done(buildTree(convertToSubscribes(resp as RawSubs)));
|
||||
else done([]); // no children returned
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse(err, 'error');
|
||||
fail(); // trigger the fail handler
|
||||
});
|
||||
}
|
||||
|
||||
const subMenuRef = ref();
|
||||
|
||||
function openSubMenu(event: MouseEvent, uuid: string) {
|
||||
subMenuRef.value?.open(event, uuid);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tree-container {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.tree-container {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 1023px) {
|
||||
.tree-container {
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||
.tree-container {
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.tree-container {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
.tree-container {
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
</style>
|
124
src/vueLib/dbm/DataTable.vue
Normal file
124
src/vueLib/dbm/DataTable.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-table
|
||||
v-if="tableRows.length > 0"
|
||||
style="height: 600px"
|
||||
flat
|
||||
bordered
|
||||
:title="tableRows[0]?.path"
|
||||
:rows="tableRows"
|
||||
:columns="columns"
|
||||
row-key="path"
|
||||
virtual-scroll
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<template v-slot:body-cell-path="props">
|
||||
<q-td :props="props" @click="openDialog(props.row, 'rename')">
|
||||
<div
|
||||
:class="[
|
||||
'text-left',
|
||||
!props.row.path.includes('System') && props.row.path !== 'DBM'
|
||||
? 'cursor-pointer'
|
||||
: '',
|
||||
'q-mx-sm',
|
||||
]"
|
||||
>
|
||||
{{ props.row.path?.split(':').pop() ?? '' }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-type="props">
|
||||
<q-td :props="props" @click="openDialog(props.row, 'type')">
|
||||
<div
|
||||
:class="[
|
||||
'text-center',
|
||||
!props.row.path.includes('System') && props.row.path !== 'DBM'
|
||||
? 'cursor-pointer'
|
||||
: '',
|
||||
'q-mx-sm',
|
||||
]"
|
||||
>
|
||||
{{ convertFromType(props.row.type) }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-value="props">
|
||||
<q-td :props="props" @click="openDialog(props.row)">
|
||||
<div :class="['text-center', 'cursor-pointer', 'q-mx-sm']">
|
||||
{{ props.row.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-drivers="props">
|
||||
<q-td :props="props" @click="openDialog(props.row, 'driver')">
|
||||
<div v-if="props.row.type !== 'none'" :class="['cursor-pointer']">
|
||||
<q-icon size="sm" name="cell_tower" :color="props.row.drivers ? 'blue-5' : 'grey-4'" />
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
<RenameDialog width="400px" button-ok-label="Rename" ref="renameDialog" />
|
||||
<UpdateDialog width="400px" button-ok-label="Write" ref="updateDialog" />
|
||||
<UpdateDatatype
|
||||
width="400px"
|
||||
button-ok-label="Update"
|
||||
ref="updateDatatype"
|
||||
dialog-label="Update Datatype"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UpdateDialog from './dialog/UpdateValueDialog.vue';
|
||||
import RenameDialog from './dialog/RenameDatapoint.vue';
|
||||
import UpdateDatatype from './dialog/UpdateDatatype.vue';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { Subscribe } from '../models/Subscribe';
|
||||
import { computed, ref } from 'vue';
|
||||
import { TableSubs } from '../dbm/updateTable';
|
||||
import { convertFromType } from './Datapoint';
|
||||
|
||||
const renameDialog = ref();
|
||||
const updateDialog = ref();
|
||||
const updateDatatype = ref();
|
||||
|
||||
const openDialog = (sub: Subscribe, type?: string) => {
|
||||
if (sub.path?.includes('System') || sub.path === 'DBM') return;
|
||||
switch (type) {
|
||||
case 'type':
|
||||
updateDatatype.value.open(sub.uuid);
|
||||
break;
|
||||
case 'rename':
|
||||
renameDialog.value.open(sub.uuid);
|
||||
break;
|
||||
default:
|
||||
if (sub.type === 'none') return;
|
||||
updateDialog.value?.open(ref(sub), type);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const tableRows = computed(() => [...(TableSubs.value ?? [])]);
|
||||
|
||||
const columns = [
|
||||
{ name: 'path', label: 'Path', field: 'path', align: 'left' },
|
||||
{
|
||||
name: 'type',
|
||||
label: 'Type',
|
||||
field: 'type',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
field: 'value',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'drivers',
|
||||
label: 'Drivers',
|
||||
field: 'drivers',
|
||||
align: 'center',
|
||||
},
|
||||
] as QTableProps['columns'];
|
||||
</script>
|
72
src/vueLib/dbm/Datapoint.ts
Normal file
72
src/vueLib/dbm/Datapoint.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import type { Gets } from '../models/Get';
|
||||
import type { Sets } from '../models/Set';
|
||||
|
||||
export function datapointRequestForCopy(response: Gets, oldPath: string, newPath: string): Sets {
|
||||
const copySet = <Sets>[];
|
||||
|
||||
response.forEach((get) => {
|
||||
copySet.push({
|
||||
path: typeof get.path === 'string' ? get.path.replace(oldPath, newPath) : '',
|
||||
type: get.type ? get.type : '',
|
||||
value: get.value,
|
||||
rights: get.rights ? get.rights : '',
|
||||
});
|
||||
});
|
||||
return copySet;
|
||||
}
|
||||
|
||||
export function convertFromType(type: string): string {
|
||||
switch (type) {
|
||||
case 'STR':
|
||||
return 'string';
|
||||
case 'BIT':
|
||||
return 'bool';
|
||||
case 'BYU':
|
||||
return 'uint8';
|
||||
case 'WOU':
|
||||
return 'uint16';
|
||||
case 'DWU':
|
||||
return 'uint32';
|
||||
case 'BYS':
|
||||
return 'int8';
|
||||
case 'WOS':
|
||||
return 'int16';
|
||||
case 'DWS':
|
||||
return 'int32';
|
||||
case 'LOU':
|
||||
return 'uint64';
|
||||
case 'LOS':
|
||||
return 'int64';
|
||||
case 'F64':
|
||||
return 'double';
|
||||
default:
|
||||
return 'none';
|
||||
}
|
||||
}
|
||||
|
||||
export function convertToType(type: string): string {
|
||||
switch (type) {
|
||||
case 'String':
|
||||
return 'STR';
|
||||
case 'Bool':
|
||||
return 'BIT';
|
||||
case 'Uint8':
|
||||
return 'BYU';
|
||||
case 'Int8':
|
||||
return 'BYS';
|
||||
case 'Uint16':
|
||||
return 'WOU';
|
||||
case 'Int16':
|
||||
return 'WOS';
|
||||
case 'Uint32':
|
||||
return 'DWU';
|
||||
case 'Int32':
|
||||
return 'DWS';
|
||||
case 'Int':
|
||||
return 'LOS';
|
||||
case 'Double':
|
||||
return 'F64';
|
||||
default:
|
||||
return 'NONE';
|
||||
}
|
||||
}
|
179
src/vueLib/dbm/SubMenu.vue
Normal file
179
src/vueLib/dbm/SubMenu.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<q-menu ref="contextMenuRef" context-menu>
|
||||
<q-list>
|
||||
<q-item :clickable="!disableAll" v-close-popup @click="handleAction('Add')">
|
||||
<q-item-section>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<q-icon
|
||||
:color="disableAll ? 'grey-5' : 'primary'"
|
||||
class="q-pr-sm"
|
||||
name="add"
|
||||
size="xs"
|
||||
left
|
||||
/>
|
||||
</div>
|
||||
<div :class="['col-7', disableAll ? 'text-grey-5' : 'text-primary']">Add</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:class="disable ? 'text-grey-5' : ''"
|
||||
:clickable="!disable"
|
||||
v-close-popup
|
||||
@click="handleAction('Rename')"
|
||||
><q-item-section>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<q-icon
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
class="q-pr-sm"
|
||||
name="edit"
|
||||
size="xs"
|
||||
left
|
||||
/>
|
||||
</div>
|
||||
<div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Rename</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:class="disable ? 'text-grey-5' : ''"
|
||||
:clickable="!disable"
|
||||
v-close-popup
|
||||
@click="handleAction('Delete')"
|
||||
><q-item-section>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<q-icon
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
class="q-pr-sm"
|
||||
name="delete"
|
||||
size="xs"
|
||||
left
|
||||
/>
|
||||
</div>
|
||||
<div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Delete</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
:clickable="!disable"
|
||||
v-close-popup
|
||||
@click="handleAction('Copy')"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<q-icon
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
class="q-pr-sm"
|
||||
name="content_copy"
|
||||
size="xs"
|
||||
left
|
||||
/>
|
||||
</div>
|
||||
<div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Copy</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
:clickable="!disable"
|
||||
v-close-popup
|
||||
@click="handleAction('Datatype')"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<q-icon
|
||||
:color="disable ? 'grey-5' : 'primary'"
|
||||
class="q-pr-sm"
|
||||
name="text_fields"
|
||||
size="xs"
|
||||
left
|
||||
/>
|
||||
</div>
|
||||
<div :class="['col-7', disable ? 'text-grey-5' : 'text-primary']">Datatype</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<RenameDatapoint :dialogLabel="label" width="700px" button-ok-label="Rename" ref="renameDialog" />
|
||||
<AddDialog :dialogLabel="label" width="700px" button-ok-label="Add" ref="addDialog" />
|
||||
<RemoveDialog :dialogLabel="label" width="350px" button-ok-label="Remove" ref="removeDialog" />
|
||||
<CopyDialog :dialogLabel="label" width="300px" button-ok-label="Copy" ref="copyDialog" />
|
||||
<UpdateDatapoint
|
||||
:dialogLabel="label"
|
||||
width="300px"
|
||||
button-ok-label="Update"
|
||||
ref="datatypeDialog"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AddDialog from './dialog/AddDatapoint.vue';
|
||||
import RemoveDialog from './dialog/RemoveDatapoint.vue';
|
||||
import CopyDialog from './dialog/CopyDatapoint.vue';
|
||||
import UpdateDatapoint from './dialog/UpdateDatatype.vue';
|
||||
import { ref } from 'vue';
|
||||
import { type TreeNode } from '../dbm/dbmTree';
|
||||
import { findSubscriptionByUuid } from '../models/Subscriptions';
|
||||
import RenameDatapoint from './dialog/RenameDatapoint.vue';
|
||||
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
const renameDialog = ref();
|
||||
const addDialog = ref();
|
||||
const removeDialog = ref();
|
||||
const copyDialog = ref();
|
||||
const datatypeDialog = ref();
|
||||
const datapointUuid = ref('');
|
||||
const contextMenuRef = ref();
|
||||
const label = ref('');
|
||||
const disable = ref(false);
|
||||
const disableAll = ref(false);
|
||||
|
||||
function handleAction(action: string) {
|
||||
switch (action) {
|
||||
case 'Rename':
|
||||
label.value = 'Rename Datapoint';
|
||||
renameDialog.value?.open(datapointUuid.value);
|
||||
break;
|
||||
case 'Add':
|
||||
label.value = 'Add New Datapoint';
|
||||
addDialog.value?.open(datapointUuid.value);
|
||||
break;
|
||||
case 'Delete':
|
||||
label.value = 'Remove Datapoint';
|
||||
removeDialog.value.open(datapointUuid.value);
|
||||
break;
|
||||
case 'Copy':
|
||||
label.value = 'Copy Datapoint';
|
||||
copyDialog.value.open(datapointUuid.value);
|
||||
break;
|
||||
case 'Datatype':
|
||||
label.value = 'Update Datatype';
|
||||
datatypeDialog.value.open(datapointUuid.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const open = (event: MouseEvent, sub: TreeNode) => {
|
||||
disable.value = false;
|
||||
disableAll.value = false;
|
||||
|
||||
if (findSubscriptionByUuid(sub.key ?? '')?.path?.includes('System')) {
|
||||
disable.value = true;
|
||||
disableAll.value = true;
|
||||
}
|
||||
if (sub.key === ZERO_UUID) disable.value = true;
|
||||
|
||||
event.preventDefault();
|
||||
datapointUuid.value = sub.key ?? '';
|
||||
contextMenuRef.value?.show(event);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
264
src/vueLib/dbm/dbmTree.ts
Normal file
264
src/vueLib/dbm/dbmTree.ts
Normal file
@@ -0,0 +1,264 @@
|
||||
import { ref, computed, type Ref } from 'vue';
|
||||
import { convertToSubscribes, type Subs } from '../models/Subscribe';
|
||||
import { setValues, subscribe, unsubscribe } from '../services/websocket';
|
||||
import {
|
||||
findSubscriptionByPath,
|
||||
addRawSubscriptions,
|
||||
removeAllSubscriptions,
|
||||
} from '../models/Subscriptions';
|
||||
import { UpdateTable } from '..//dbm/updateTable';
|
||||
import type { Response } from '..//models/Response';
|
||||
import type { RawSubs } from '..//models/Subscribe';
|
||||
import { getRequest } from '../models/Request';
|
||||
import type { Pubs } from '../models/Publish';
|
||||
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
export const dbmData = ref<TreeNode[]>([]);
|
||||
export const expanded = ref<string[]>([]);
|
||||
|
||||
let lastExpanded: string[] = [];
|
||||
|
||||
export type TreeNode = {
|
||||
path?: string;
|
||||
key?: string;
|
||||
lazy: boolean;
|
||||
children?: TreeNode[];
|
||||
};
|
||||
|
||||
type TreeMap = {
|
||||
[key: string]: {
|
||||
__children: TreeMap;
|
||||
uuid?: string;
|
||||
value?: string | number | boolean | null;
|
||||
lazy: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
const root: TreeMap = {};
|
||||
|
||||
export function buildTreeWithRawSubs(subs: RawSubs): TreeNode[] {
|
||||
return buildTree(convertToSubscribes(subs));
|
||||
}
|
||||
|
||||
export function buildTree(subs: Subs | null): TreeNode[] {
|
||||
if (subs) {
|
||||
for (const { path, uuid, value, hasChild } of subs) {
|
||||
if (!path) continue;
|
||||
const parts = path.split(':');
|
||||
let current = root;
|
||||
|
||||
parts.forEach((part, idx) => {
|
||||
if (!part) return;
|
||||
if (!current[part]) current[part] = { __children: {}, lazy: true };
|
||||
|
||||
if (idx === parts.length - 1 && uuid) {
|
||||
current[part].uuid = uuid;
|
||||
current[part].value = value?.value ?? null;
|
||||
current[part].lazy = !!hasChild;
|
||||
}
|
||||
|
||||
current = current[part].__children;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const toTreeNodes = (map: TreeMap): TreeNode[] =>
|
||||
Object.entries(map)
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([key, node]) => ({
|
||||
path: key,
|
||||
key: node.uuid ?? key,
|
||||
value: node.value,
|
||||
lazy: node.lazy,
|
||||
children: toTreeNodes(node.__children),
|
||||
}));
|
||||
|
||||
const newTree = [
|
||||
{
|
||||
path: 'DBM',
|
||||
key: ZERO_UUID,
|
||||
lazy: true,
|
||||
children: toTreeNodes(root),
|
||||
},
|
||||
];
|
||||
|
||||
dbmData.value.splice(0, dbmData.value.length, ...newTree);
|
||||
return newTree;
|
||||
}
|
||||
|
||||
export function removeNodes(pubs: Pubs) {
|
||||
pubs.forEach((pub) => {
|
||||
removeNode(pub.uuid);
|
||||
});
|
||||
}
|
||||
|
||||
export function removeNode(uuid: string) {
|
||||
removeFromTreeMap(root, uuid);
|
||||
removeFromTree(dbmData.value, uuid);
|
||||
collapseNode(uuid);
|
||||
}
|
||||
|
||||
function removeFromTreeMap(tree: TreeMap, uuid: string): boolean {
|
||||
for (const [key, node] of Object.entries(tree)) {
|
||||
if (node.uuid === uuid) {
|
||||
delete tree[key];
|
||||
return true;
|
||||
}
|
||||
if (removeFromTreeMap(node.__children, uuid)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function removeFromTree(nodes: TreeNode[], uuid: string): boolean {
|
||||
const index = nodes.findIndex((n) => n.key === uuid);
|
||||
if (index !== -1) {
|
||||
nodes.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
|
||||
for (const node of nodes) {
|
||||
if (node.children && removeFromTree(node.children, uuid)) {
|
||||
if (node.children.length === 0) {
|
||||
delete node.children;
|
||||
node.lazy = true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function removeSubtreeByParentKey(parentKey: string) {
|
||||
const recurse = (nodes: TreeNode[]): boolean => {
|
||||
for (const node of nodes) {
|
||||
if (node.key === parentKey) {
|
||||
delete node.children;
|
||||
node.lazy = true;
|
||||
return true;
|
||||
}
|
||||
if (node.children && recurse(node.children)) return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
recurse(dbmData.value);
|
||||
}
|
||||
|
||||
function collapseNode(uuid: string) {
|
||||
const idx = expanded.value.indexOf(uuid);
|
||||
if (idx !== -1) {
|
||||
expanded.value.splice(idx, 1);
|
||||
const lastIdx = lastExpanded.indexOf(uuid);
|
||||
if (lastIdx !== -1) lastExpanded.splice(lastIdx, 1);
|
||||
onExpandedChange([...expanded.value]).catch(console.error);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateValue(
|
||||
NotifyResponse: (
|
||||
response: Response | string | undefined,
|
||||
type?: 'warning' | 'error',
|
||||
timeout?: 5000,
|
||||
) => void,
|
||||
path1: string,
|
||||
toggle?: Ref<boolean>,
|
||||
path2?: string,
|
||||
path3?: string,
|
||||
value3?: number,
|
||||
) {
|
||||
return computed({
|
||||
get() {
|
||||
const path = toggle?.value && path2 ? path2 : path1;
|
||||
return Number(findSubscriptionByPath(path)?.value ?? 0);
|
||||
},
|
||||
set(val) {
|
||||
const baseValue = val;
|
||||
const updates = [
|
||||
{ path: toggle?.value && path2 ? path2 : path1, value: baseValue },
|
||||
...(path3 ? [{ path: path3, value: value3 ?? baseValue }] : []),
|
||||
];
|
||||
|
||||
setValues(updates)
|
||||
.then((response) => NotifyResponse(response))
|
||||
.catch((err) =>
|
||||
NotifyResponse(`Failed to update [${[path1, path2, path3].join(' ')}]: ${err}`, 'error'),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function onExpandedChange(newExpanded: readonly string[]) {
|
||||
const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
|
||||
const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
|
||||
|
||||
try {
|
||||
await unsubscribe([{ path: '.*', depth: 0 }]).then(removeAllSubscriptions);
|
||||
|
||||
for (const key of collapsed) {
|
||||
removeSubtreeByParentKey(key);
|
||||
fetchAndUpdateNode(key);
|
||||
}
|
||||
|
||||
for (const key of newlyExpanded) {
|
||||
fetchAndUpdateNode(key);
|
||||
}
|
||||
|
||||
lastExpanded = [...newExpanded];
|
||||
} catch (err) {
|
||||
console.error('error in expand function', err);
|
||||
}
|
||||
}
|
||||
|
||||
function fetchAndUpdateNode(key: string) {
|
||||
getRequest(key, '', 2)
|
||||
.then((resp) => {
|
||||
if (resp) {
|
||||
buildTreeWithRawSubs(resp);
|
||||
subscribe([{ uuid: key, path: '', depth: 2 }]).catch((err) => console.error(err));
|
||||
addRawSubscriptions(resp);
|
||||
}
|
||||
UpdateTable(key);
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
}
|
||||
|
||||
export function findParentKey(
|
||||
childKey: string,
|
||||
parentKey: string | null = null,
|
||||
nodes?: TreeNode[],
|
||||
): string | null {
|
||||
if (!nodes) nodes = dbmData.value;
|
||||
for (const node of nodes) {
|
||||
if (node.key === childKey) return parentKey;
|
||||
if (node.children) {
|
||||
const found = findParentKey(childKey, node.key ?? null, node.children);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getNodeUuidByPath(path: string, nodes?: TreeNode[]): string {
|
||||
if (!nodes) nodes = dbmData.value;
|
||||
for (const node of nodes) {
|
||||
if (node.path === path) return node.key ?? '';
|
||||
if (node.children) {
|
||||
const found = getNodeUuidByPath(path, node.children);
|
||||
if (found !== '') return found;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
export function pathIsExpanded(path: string): boolean {
|
||||
if (!path.includes(':')) {
|
||||
return true;
|
||||
}
|
||||
let p = path.replace(/:.+$/, '');
|
||||
if (expanded.value.includes(getNodeUuidByPath(p))) {
|
||||
return true;
|
||||
}
|
||||
p = path.replace(/:.+$/, '');
|
||||
return expanded.value.includes(getNodeUuidByPath(p));
|
||||
}
|
144
src/vueLib/dbm/dialog/AddDatapoint.vue
Normal file
144
src/vueLib/dbm/dialog/AddDatapoint.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>
|
||||
</q-card-section>
|
||||
<q-form ref="addForm" class="q-gutter-md">
|
||||
<q-input
|
||||
class="q-mt-lg q-mb-none q-pl-lg q-pr-xl"
|
||||
filled
|
||||
v-model="path"
|
||||
label=""
|
||||
:rules="[(val) => !!val || 'Path is required']"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="column">
|
||||
<span class="text-caption text-primary non-editable-prefix">Path *</span>
|
||||
<span class="text-body2 text-grey-6 non-editable-prefix"
|
||||
>{{ prefix }}{{ staticPrefix }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
<DataTypes class="q-mt-lg q-pl-md q-pr-xl" flat v-model:datatype="datatype"></DataTypes>
|
||||
<div class="q-pl-lg">
|
||||
<div class="text-grey text-bold">Read Write Access</div>
|
||||
<q-checkbox v-model="read">Read</q-checkbox>
|
||||
<q-checkbox v-model="write">Write</q-checkbox>
|
||||
</div>
|
||||
<q-input
|
||||
:type="valueType"
|
||||
stack-label
|
||||
label="Value"
|
||||
class="q-pl-md q-pr-xl"
|
||||
filled
|
||||
v-model="value"
|
||||
></q-input>
|
||||
<q-btn no-caps class="q-mb-xl q-mx-xl q-px-lg" @click="onSubmit" color="primary">{{
|
||||
props.buttonOkLabel
|
||||
}}</q-btn>
|
||||
</q-form>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import DataTypes from '../../buttons/DataTypes.vue';
|
||||
import { addRawSubscription } from '../../models/Subscriptions';
|
||||
import { UpdateTable } from '../../dbm/updateTable';
|
||||
import { getRequest, setRequest } from 'src/vueLib/models/Request';
|
||||
import { convertToType } from '../Datapoint';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const path = ref('');
|
||||
const staticPrefix = ref('');
|
||||
const value = ref('');
|
||||
const valueType = ref<'text' | 'number'>('text');
|
||||
const read = ref(true);
|
||||
const write = ref(true);
|
||||
const datatype = ref('None');
|
||||
const addForm = ref();
|
||||
const prefix = 'DBM:';
|
||||
|
||||
const open = (uuid: string) => {
|
||||
Dialog.value?.open();
|
||||
getDatapoint(uuid);
|
||||
};
|
||||
|
||||
watch(datatype, (newVal) => {
|
||||
if (newVal === 'String') valueType.value = 'text';
|
||||
else valueType.value = 'number';
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
let type = 'NONE';
|
||||
let access = '';
|
||||
addForm.value.validate().then((success: undefined) => {
|
||||
if (success) {
|
||||
type = convertToType(datatype.value);
|
||||
|
||||
if (read.value) access = 'R';
|
||||
if (write.value) access += 'W';
|
||||
if (access == '') access = 'R';
|
||||
|
||||
setRequest(staticPrefix.value + path.value, type, value.value, access)
|
||||
.then((respond) => {
|
||||
if (respond) {
|
||||
respond.forEach((set) => {
|
||||
NotifyResponse("Datapoint '" + prefix + set.path + "' added");
|
||||
});
|
||||
addRawSubscription(respond[0]);
|
||||
UpdateTable();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
});
|
||||
} else {
|
||||
if (path.value === '') {
|
||||
NotifyResponse("Field 'Path' is requierd", 'error');
|
||||
return;
|
||||
} else NotifyResponse('Form not validated', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
function getDatapoint(uuid: string) {
|
||||
getRequest(uuid, '', 1)
|
||||
.then((resp) => {
|
||||
if (resp[0]) {
|
||||
staticPrefix.value = resp[0].path ?? '';
|
||||
if (staticPrefix.value !== '') staticPrefix.value += ':';
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
131
src/vueLib/dbm/dialog/CopyDatapoint.vue
Normal file
131
src/vueLib/dbm/dialog/CopyDatapoint.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>
|
||||
</q-card-section>
|
||||
<q-form ref="copyForm" class="q-gutter-md">
|
||||
<q-input
|
||||
class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
|
||||
filled
|
||||
v-model="path"
|
||||
label="Current Path"
|
||||
label-color="primary"
|
||||
readonly
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
|
||||
filled
|
||||
v-model="copyPath"
|
||||
label="New Path *"
|
||||
label-color="primary"
|
||||
@keyup.enter="onSubmit"
|
||||
:rules="[(val) => !!val || 'Path is required']"
|
||||
>
|
||||
</q-input>
|
||||
<div class="q-mx-sm">
|
||||
<q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
|
||||
props.buttonOkLabel
|
||||
}}</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import { getRequest, setsRequest } from 'src/vueLib/models/Request';
|
||||
import { datapointRequestForCopy } from '../Datapoint';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const path = ref('');
|
||||
const copyPath = ref('');
|
||||
const copyForm = ref();
|
||||
const prefix = 'DBM:';
|
||||
|
||||
const open = (uuid: string) => {
|
||||
Dialog.value?.open();
|
||||
getDatapoint(uuid);
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
copyForm.value.validate().then((success: undefined) => {
|
||||
if (success) {
|
||||
if (copyPath.value === path.value) {
|
||||
NotifyResponse('copy path can not be the same as current path', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const absolutePath = path.value.slice(prefix.length);
|
||||
const absolutecopyPath = copyPath.value.slice(prefix.length);
|
||||
|
||||
getRequest('', absolutecopyPath, 1)
|
||||
.then((response) => {
|
||||
if (response?.length > 0) {
|
||||
NotifyResponse("path '" + copyPath.value + "' already exists", 'warning');
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err instanceof Error && err.message === 'No data returned') {
|
||||
getRequest('', absolutePath, 0)
|
||||
.then((response) => {
|
||||
setsRequest(
|
||||
datapointRequestForCopy(response, absolutePath, absolutecopyPath),
|
||||
).catch((err) => console.error(err));
|
||||
NotifyResponse(copyPath.value + ' copied');
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
} else {
|
||||
NotifyResponse(catchError(err), 'error');
|
||||
}
|
||||
return;
|
||||
});
|
||||
} else {
|
||||
if (copyPath.value === '') {
|
||||
NotifyResponse("Field 'New Path' is requierd", 'error');
|
||||
return;
|
||||
} else NotifyResponse('Form not validated', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
function getDatapoint(uuid: string) {
|
||||
getRequest(uuid)
|
||||
.then((resp) => {
|
||||
if (resp[0]) {
|
||||
path.value = prefix + resp[0].path;
|
||||
copyPath.value = prefix + resp[0].path;
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
102
src/vueLib/dbm/dialog/RemoveDatapoint.vue
Normal file
102
src/vueLib/dbm/dialog/RemoveDatapoint.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>
|
||||
</q-card-section>
|
||||
<div class="text-center text-bold text-primary">
|
||||
Do you want to remove Datapoint
|
||||
<br />
|
||||
'{{ datapoint.path ?? '' }}'
|
||||
</div>
|
||||
<q-btn no-caps class="q-ma-md" filled color="negative" @click="remove">{{
|
||||
props.buttonOkLabel
|
||||
}}</q-btn>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import { subscribe } from '../../services/websocket';
|
||||
import { findParentKey, buildTree } from '../../dbm/dbmTree';
|
||||
import { addRawSubscriptions } from '../../models/Subscriptions';
|
||||
import { UpdateTable } from '../../dbm/updateTable';
|
||||
import { convertToSubscribes } from '../../models/Subscribe';
|
||||
import { deleteRequest, getRequest } from 'src/vueLib/models/Request';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const datapoint = ref();
|
||||
const prefix = 'DBM:';
|
||||
|
||||
const open = (uuid: string) => {
|
||||
getDatapoint(uuid)
|
||||
.then(() => Dialog.value?.open())
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
};
|
||||
|
||||
function remove() {
|
||||
deleteRequest(datapoint.value.uuid)
|
||||
.then((respond) => {
|
||||
const sub = respond[respond.length - 1];
|
||||
if (sub) NotifyResponse("Datapoint '" + prefix + sub.path + "' removed", 'warning');
|
||||
|
||||
Dialog.value.close();
|
||||
{
|
||||
const parentKey = findParentKey(datapoint.value.uuid);
|
||||
|
||||
if (parentKey) {
|
||||
subscribe([{ uuid: parentKey, path: '', depth: 2 }])
|
||||
.then((res) => {
|
||||
if (res?.subscribe) {
|
||||
addRawSubscriptions(res.subscribe);
|
||||
buildTree(convertToSubscribes(res.subscribe));
|
||||
UpdateTable();
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse('Subscribe failed ' + catchError(err), 'error'));
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response) {
|
||||
NotifyResponse(err.response.data.message, 'error');
|
||||
} else console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
async function getDatapoint(uuid: string) {
|
||||
await getRequest(uuid, '', 1)
|
||||
.then((resp) => {
|
||||
if (resp) {
|
||||
datapoint.value = resp[0];
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
defineExpose({ open, close });
|
||||
</script>
|
141
src/vueLib/dbm/dialog/RenameDatapoint.vue
Normal file
141
src/vueLib/dbm/dialog/RenameDatapoint.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>
|
||||
</q-card-section>
|
||||
<q-form ref="copyForm" class="q-gutter-md">
|
||||
<q-input
|
||||
class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
|
||||
filled
|
||||
v-model="path"
|
||||
label="Current Path"
|
||||
label-color="primary"
|
||||
readonly
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
|
||||
filled
|
||||
v-model="newPath"
|
||||
label="New Path *"
|
||||
label-color="primary"
|
||||
@keyup.enter="onSubmit"
|
||||
:rules="[(val) => !!val || 'Path is required']"
|
||||
>
|
||||
</q-input>
|
||||
<div class="q-mx-sm">
|
||||
<q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
|
||||
props.buttonOkLabel
|
||||
}}</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import { getRequest, setRequest } from 'src/vueLib/models/Request';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
import { convertToSubscribes, type RawSubs } from 'src/vueLib/models/Subscribe';
|
||||
import { UpdateTable } from '../updateTable';
|
||||
import { addRawSubscriptions } from 'src/vueLib/models/Subscriptions';
|
||||
import { buildTree } from '../dbmTree';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const datapoint = ref();
|
||||
const path = ref('');
|
||||
const newPath = ref('');
|
||||
const copyForm = ref();
|
||||
const prefix = 'DBM:';
|
||||
|
||||
const open = (uuid: string) => {
|
||||
Dialog.value?.open();
|
||||
getDatapoint(uuid);
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
copyForm.value.validate().then((success: undefined) => {
|
||||
if (success) {
|
||||
if (newPath.value === path.value) {
|
||||
NotifyResponse('same name', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
getRequest('', newPath.value.slice(prefix.length), 1)
|
||||
.then((response) => {
|
||||
console.log(10, response);
|
||||
if (response?.length > 0) {
|
||||
NotifyResponse("path '" + response[0]?.path + "' already exists", 'warning');
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
const error = catchError(err);
|
||||
if (error !== 'No data returned') {
|
||||
NotifyResponse(error, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setRequest(
|
||||
newPath.value.slice(prefix.length),
|
||||
datapoint.value.type,
|
||||
datapoint.value.value,
|
||||
datapoint.value.rights,
|
||||
datapoint.value.uuid,
|
||||
true,
|
||||
)
|
||||
.then((res) => {
|
||||
addRawSubscriptions(res as RawSubs);
|
||||
buildTree(convertToSubscribes(res as RawSubs));
|
||||
UpdateTable();
|
||||
})
|
||||
.catch((err) => NotifyResponse(err, 'error'));
|
||||
});
|
||||
} else {
|
||||
if (newPath.value === '') {
|
||||
NotifyResponse("Field 'New Path' is requierd", 'error');
|
||||
return;
|
||||
} else NotifyResponse('Form not validated', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
function getDatapoint(uuid: string) {
|
||||
getRequest(uuid)
|
||||
.then((resp) => {
|
||||
if (resp[0]) {
|
||||
datapoint.value = resp[0];
|
||||
path.value = prefix + resp[0].path;
|
||||
newPath.value = prefix + resp[0].path;
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
140
src/vueLib/dbm/dialog/UpdateDatatype.vue
Normal file
140
src/vueLib/dbm/dialog/UpdateDatatype.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="props.dialogLabel">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>DBM:{{ datapoint.path }}
|
||||
</q-card-section>
|
||||
<q-form ref="datatypeForm" class="q-gutter-md">
|
||||
<q-input
|
||||
class="q-mt-lg q-mb-none q-pl-md q-mx-lg"
|
||||
filled
|
||||
dense
|
||||
v-model="currentDatatype"
|
||||
label="Current Path"
|
||||
label-color="primary"
|
||||
readonly
|
||||
>
|
||||
</q-input>
|
||||
<q-select
|
||||
class="q-mt-lg q-mt-none q-pl-md q-mx-lg"
|
||||
popup-content-class="small-dropdown"
|
||||
filled
|
||||
dense
|
||||
v-model="selectedDatatype"
|
||||
:options="options"
|
||||
option-label="label"
|
||||
>
|
||||
</q-select>
|
||||
<div class="q-mx-sm">
|
||||
<q-btn no-caps class="q-mb-xl q-ml-lg q-px-lg" @click="onSubmit" color="primary">{{
|
||||
props.buttonOkLabel
|
||||
}}</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import { getRequest, setRequest } from 'src/vueLib/models/Request';
|
||||
import { UpdateTable } from '../updateTable';
|
||||
import { updateSubscription } from 'src/vueLib/models/Subscriptions';
|
||||
import { convertToSubscribe } from 'src/vueLib/models/Subscribe';
|
||||
import { convertFromType } from '../Datapoint';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const datapoint = ref();
|
||||
const currentDatatype = ref('');
|
||||
const datatypeForm = ref();
|
||||
const selectedDatatype = ref({ label: 'None', value: 'NONE' });
|
||||
const options = [
|
||||
{ label: 'None', value: 'NONE' },
|
||||
{ label: 'String (Text)', value: 'STR' },
|
||||
{ label: 'Bool (On/Off)', value: 'BIT' },
|
||||
{ label: 'Uint8 (0 - 256)', value: 'BYU' },
|
||||
{ label: 'Uint16 (0 - 65535)', value: 'WOU' },
|
||||
{ label: 'Uint32 (0 - 429496...)', value: 'DWU' },
|
||||
{ label: 'Int8 (-128 - 127)', value: 'BYS' },
|
||||
{ label: 'Int16 (-32768 -3...)', value: 'WOS' },
|
||||
{ label: 'Int32 (-21474836...)', value: 'DWS' },
|
||||
{ label: 'Int64 (-2^63 -(2^...))', value: 'DWS' },
|
||||
{ label: 'Double (1.7E 1/-3...)', value: 'F64' },
|
||||
];
|
||||
|
||||
const open = async (uuid: string) => {
|
||||
await getDatapoint(uuid);
|
||||
Dialog.value?.open();
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
const success = await datatypeForm.value.validate();
|
||||
if (!success) {
|
||||
NotifyResponse('Form not validated', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const datatype = options.find((s) => s.label === selectedDatatype.value.label)?.value;
|
||||
if (datatype === undefined) return;
|
||||
try {
|
||||
const response = await setRequest(datapoint.value.path, datatype, datapoint.value.value);
|
||||
if (response[0]) updateSubscription(convertToSubscribe(response[0]));
|
||||
NotifyResponse(
|
||||
'new datatype: ' +
|
||||
convertFromType(response[0]?.type ?? '') +
|
||||
' for datapoint :DBM:' +
|
||||
response[0]?.path,
|
||||
);
|
||||
UpdateTable();
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
async function getDatapoint(uuid: string) {
|
||||
await getRequest(uuid)
|
||||
.then((resp) => {
|
||||
if (resp[0]) {
|
||||
datapoint.value = resp[0];
|
||||
const type = options.find((s) => s.value === (resp[0]?.type ?? 'NONE'))?.label ?? 'None';
|
||||
currentDatatype.value = type;
|
||||
selectedDatatype.value.value = type;
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.small-dropdown .q-item {
|
||||
min-height: 28px; /* default is 48px */
|
||||
padding: 4px 8px;
|
||||
}
|
||||
</style>
|
159
src/vueLib/dbm/dialog/UpdateValueDialog.vue
Normal file
159
src/vueLib/dbm/dialog/UpdateValueDialog.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<DialogFrame ref="Dialog" :width="props.width" :header-title="datapoint?.path">
|
||||
<q-card-section
|
||||
v-if="props.dialogLabel || localDialogLabel"
|
||||
class="text-bold text-left q-mb-none q-pb-none"
|
||||
:class="'text-' + props.labelColor"
|
||||
>{{ props.dialogLabel ? props.dialogLabel : localDialogLabel }}</q-card-section
|
||||
>
|
||||
<q-card-section v-if="drivers && drivers.length == 0">
|
||||
<q-input
|
||||
class="q-px-md q-ma-sm"
|
||||
label="current value"
|
||||
dense
|
||||
filled
|
||||
readonly
|
||||
v-model="inputValue as string | number"
|
||||
></q-input>
|
||||
<q-input
|
||||
class="q-px-md q-mx-sm"
|
||||
label="new value"
|
||||
dense
|
||||
filled
|
||||
:readonly="onlyRead"
|
||||
@keyup.enter="write"
|
||||
:type="writeType"
|
||||
v-model="writeValue as string | number"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-card-section v-else>
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
virtual-scroll
|
||||
:rows-per-page-options="[0]"
|
||||
:rows="drivers"
|
||||
:columns="columns"
|
||||
>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
|
||||
props.text
|
||||
}}</q-card-section>
|
||||
<q-card-actions align="left" class="text-primary">
|
||||
<q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="q-mb-xl q-ml-lg q-mt-none"
|
||||
v-if="props.buttonOkLabel"
|
||||
color="primary"
|
||||
no-caps
|
||||
:label="props.buttonOkLabel"
|
||||
@click="write"
|
||||
>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</DialogFrame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import DialogFrame from '../../dialog/DialogFrame.vue';
|
||||
import type { Subscribe } from '../../models/Subscribe';
|
||||
import type { Ref } from 'vue';
|
||||
import { setValues } from '../../services/websocket';
|
||||
import { useNotify } from '../../general/useNotify';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { Driver } from '../../models/Drivers';
|
||||
import { catchError } from 'src/vueLib/models/error';
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const Dialog = ref();
|
||||
const writeValue = ref();
|
||||
const onlyRead = ref(false);
|
||||
const writeType = ref<'text' | 'number'>('text');
|
||||
|
||||
const props = defineProps({
|
||||
buttonOkLabel: {
|
||||
type: String,
|
||||
default: 'OK',
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
dialogLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
buttonCancelLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
const datapoint = ref();
|
||||
const inputValue = ref(datapoint?.value);
|
||||
const localDialogLabel = ref('');
|
||||
const drivers = ref<Driver[]>([]);
|
||||
const columns = [
|
||||
{ name: 'type', label: 'Driver Name', field: 'type', align: 'left' },
|
||||
{ name: 'bus', label: 'Bus Name', field: 'bus', align: 'center' },
|
||||
{ name: 'address', label: 'Address', field: 'address', align: 'center' },
|
||||
] as QTableProps['columns'];
|
||||
|
||||
const open = (sub: Ref<Subscribe>, type?: string) => {
|
||||
datapoint.value = sub.value;
|
||||
if (datapoint.value.rights == 'R') onlyRead.value = true;
|
||||
drivers.value = [];
|
||||
switch (type) {
|
||||
case 'driver':
|
||||
localDialogLabel.value = 'Update Drivers';
|
||||
if (sub.value.drivers) drivers.value = Object.values(sub.value.drivers);
|
||||
writeValue.value = sub.value.drivers;
|
||||
break;
|
||||
default:
|
||||
localDialogLabel.value = 'Update Value';
|
||||
if (sub.value.type === 'STR') writeType.value = 'text';
|
||||
else if (sub.value.type === 'BIT') writeType.value = 'text';
|
||||
else writeType.value = 'number';
|
||||
writeValue.value = sub.value.value;
|
||||
}
|
||||
Dialog.value?.open();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => datapoint.value?.value,
|
||||
(newVal) => {
|
||||
inputValue.value = newVal;
|
||||
},
|
||||
);
|
||||
|
||||
function write() {
|
||||
setValues([{ uuid: datapoint.value?.uuid ?? '', value: writeValue.value ?? undefined }])
|
||||
.then((resp) => {
|
||||
if (resp?.set) {
|
||||
resp.set.forEach((set) => {
|
||||
inputValue.value = set.value;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => NotifyResponse(catchError(err), 'error'));
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.outercard {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
22
src/vueLib/dbm/updateTable.ts
Normal file
22
src/vueLib/dbm/updateTable.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { Subs } from '../models/Subscribe';
|
||||
import { Subscriptions } from '../models/Subscriptions';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export const TableSubs = ref<Subs>();
|
||||
|
||||
export function UpdateTable(targetUuid?: string) {
|
||||
TableSubs.value = Object.values(Subscriptions)
|
||||
.map((sub) => {
|
||||
sub.type = sub.type ?? 'none';
|
||||
return sub;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (targetUuid) {
|
||||
if (a.uuid === targetUuid) return -1; // move `a` to front
|
||||
if (b.uuid === targetUuid) return 1; // move `b` to front
|
||||
}
|
||||
const aPath = a.path ?? '';
|
||||
const bPath = b.path ?? '';
|
||||
return aPath.localeCompare(bPath);
|
||||
});
|
||||
}
|
@@ -8,12 +8,17 @@
|
||||
:seamless="!minMaxState"
|
||||
>
|
||||
<q-card class="layout" :style="cardStyle" v-touch-pan.mouse.prevent.stop="handlePan">
|
||||
<div class="row justify-end q-mx-sm q-mt-xs">
|
||||
<q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
|
||||
<q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
|
||||
<div :class="props.headerTitle ? 'row items-center justify-between' : ''">
|
||||
<div v-if="headerTitle" class="q-mx-sm q-mt-xs text-left text-bold text-caption">
|
||||
{{ props.headerTitle }}
|
||||
</div>
|
||||
<div class="row justify-end q-mx-sm q-mt-xs">
|
||||
<q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
|
||||
<q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator color="black" class="q-my-none" />
|
||||
<slot />
|
||||
<div class="scrollArea"><slot /></div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
@@ -23,6 +28,7 @@ import { ref, computed } from 'vue';
|
||||
|
||||
const dialogRef = ref();
|
||||
const open = () => dialogRef.value?.show();
|
||||
const close = () => dialogRef.value?.hide();
|
||||
|
||||
const minMaxIcon = ref('fullscreen');
|
||||
const minMaxState = ref(false);
|
||||
@@ -36,6 +42,10 @@ function minMax() {
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
headerTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
@@ -55,11 +65,18 @@ const cardStyle = computed(() => ({
|
||||
transform: `translate(${position.value.x}px, ${position.value.y}px)`,
|
||||
}));
|
||||
|
||||
defineExpose({ open });
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.scrollArea {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
67
src/vueLib/general/useNotify.ts
Normal file
67
src/vueLib/general/useNotify.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import type { Response } from '../models/Response';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export function useNotify() {
|
||||
const $q = useQuasar();
|
||||
function NotifyResponse(
|
||||
response: Response | string | undefined,
|
||||
type?: 'warning' | 'error',
|
||||
timeout: number = 5000,
|
||||
) {
|
||||
let color = 'green';
|
||||
let icon = 'check_circle';
|
||||
|
||||
switch (type) {
|
||||
case 'warning':
|
||||
color = 'orange';
|
||||
icon = 'warning';
|
||||
break;
|
||||
case 'error':
|
||||
color = 'red';
|
||||
icon = 'error';
|
||||
break;
|
||||
}
|
||||
|
||||
if (response) {
|
||||
const message = typeof response === 'string' ? response : (response.message ?? '');
|
||||
if (message === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
color = typeof response === 'string' ? color : response?.error ? 'red' : color;
|
||||
icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
|
||||
$q?.notify({
|
||||
message: message,
|
||||
color: color,
|
||||
position: 'bottom-right',
|
||||
icon: icon,
|
||||
timeout: timeout,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function NotifyDialog(title: string, text: string, okText?: string, cancelText?: string) {
|
||||
return new Promise((resolve) => {
|
||||
$q.dialog({
|
||||
title: title,
|
||||
message: text,
|
||||
persistent: true,
|
||||
ok: okText ?? 'OK',
|
||||
cancel: cancelText ?? 'CANCEL',
|
||||
})
|
||||
.onOk(() => {
|
||||
resolve(true);
|
||||
})
|
||||
.onCancel(() => {
|
||||
resolve(false);
|
||||
})
|
||||
.onDismiss(() => {
|
||||
resolve(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
return {
|
||||
NotifyDialog,
|
||||
NotifyResponse,
|
||||
};
|
||||
}
|
5
src/vueLib/models/Drivers.ts
Normal file
5
src/vueLib/models/Drivers.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface Driver {
|
||||
type: string;
|
||||
addess: number;
|
||||
value: number;
|
||||
}
|
@@ -7,7 +7,7 @@ type Get = {
|
||||
path?: string;
|
||||
type?: string;
|
||||
rights?: string;
|
||||
value?: undefined;
|
||||
value?: string | number | boolean | null;
|
||||
query?: Query;
|
||||
hasChild?: boolean;
|
||||
};
|
50
src/vueLib/models/Publish.ts
Normal file
50
src/vueLib/models/Publish.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export type Publish = {
|
||||
event: string;
|
||||
uuid: string;
|
||||
path: string;
|
||||
type: string;
|
||||
value: string | number | boolean | null;
|
||||
hasChild: boolean;
|
||||
};
|
||||
export type Pubs = Publish[];
|
||||
|
||||
import { updateSubscriptionValue, removeRawSubscriptions } from './Subscriptions';
|
||||
import { buildTree, buildTreeWithRawSubs, removeNodes } from '../dbm/dbmTree';
|
||||
import type { RawSubs, RawSubscribe } from '../models/Subscribe';
|
||||
import { ref } from 'vue';
|
||||
import { UpdateTable } from '../dbm/updateTable';
|
||||
import { pathIsExpanded } from '../dbm/dbmTree';
|
||||
|
||||
export function publishToSubscriptions(pubs: Pubs) {
|
||||
let event = '';
|
||||
const rawSubs = ref<RawSubs>([]);
|
||||
pubs.forEach((pub) => {
|
||||
switch (pub.event) {
|
||||
case 'onCreate':
|
||||
event = 'onCreate';
|
||||
if (!pathIsExpanded(pub.path)) break;
|
||||
pub.hasChild = pubs.length > 0;
|
||||
rawSubs.value.push(pub as RawSubscribe);
|
||||
break;
|
||||
case 'onChange':
|
||||
break;
|
||||
case 'onDelete':
|
||||
event = 'onDelete';
|
||||
rawSubs.value.push(pub as RawSubscribe);
|
||||
break;
|
||||
}
|
||||
updateSubscriptionValue(pub.uuid, pub.value);
|
||||
});
|
||||
|
||||
switch (event) {
|
||||
case 'onCreate':
|
||||
buildTreeWithRawSubs(rawSubs.value);
|
||||
break;
|
||||
case 'onDelete':
|
||||
buildTree(null);
|
||||
removeRawSubscriptions(rawSubs.value);
|
||||
UpdateTable();
|
||||
removeNodes(pubs);
|
||||
break;
|
||||
}
|
||||
}
|
121
src/vueLib/models/Request.ts
Normal file
121
src/vueLib/models/Request.ts
Normal file
@@ -0,0 +1,121 @@
|
||||
import type { Gets } from './Get';
|
||||
import type { Sets } from './Set';
|
||||
import type { Subs } from './Subscribe';
|
||||
import { api } from 'src/boot/axios';
|
||||
|
||||
export type Request = {
|
||||
get?: Gets;
|
||||
set?: Sets;
|
||||
subscribe?: Subs;
|
||||
unsubscribe?: Subs;
|
||||
};
|
||||
|
||||
const query = '/json_data';
|
||||
|
||||
export async function getRequest(
|
||||
uuid: string,
|
||||
path: string = '',
|
||||
depth: number = 1,
|
||||
): Promise<Gets> {
|
||||
let payload = {};
|
||||
if (uuid !== '') {
|
||||
payload = { uuid: uuid, path: path, query: { depth: depth } };
|
||||
} else {
|
||||
payload = { path: path, query: { depth: depth } };
|
||||
}
|
||||
|
||||
const resp = await api.post(query, {
|
||||
get: [payload],
|
||||
});
|
||||
|
||||
if (resp.data.get && resp.data.get.length > 0) {
|
||||
return resp.data.get;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
||||
|
||||
export async function getRequests(gets: Gets): Promise<Gets> {
|
||||
const resp = await api.post(query, {
|
||||
get: gets,
|
||||
});
|
||||
|
||||
if (resp.data.get && resp.data.get.length > 0) {
|
||||
return resp.data.get;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
||||
|
||||
export async function rawSetsRequest(sets: Sets): Promise<Sets> {
|
||||
const resp = await api.post(query, {
|
||||
set: sets,
|
||||
});
|
||||
|
||||
if (resp.data.set && resp.data.set.length > 0) {
|
||||
return resp.data.set;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
||||
|
||||
export async function setRequest(
|
||||
path: string,
|
||||
type: string,
|
||||
value: string | number | boolean,
|
||||
rights?: string,
|
||||
uuid?: string,
|
||||
rename?: boolean,
|
||||
): Promise<Sets> {
|
||||
const payload = {
|
||||
path: path,
|
||||
type: type,
|
||||
value: value,
|
||||
rights: rights,
|
||||
uuid: uuid,
|
||||
rename: rename,
|
||||
};
|
||||
|
||||
const resp = await api.post(query, {
|
||||
set: [payload],
|
||||
});
|
||||
|
||||
if (resp.data.set && resp.data.set.length > 0) {
|
||||
return resp.data.set;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
||||
|
||||
export async function setsRequest(sets: Sets): Promise<Sets> {
|
||||
const resp = await api.post(query, {
|
||||
set: sets,
|
||||
});
|
||||
|
||||
if (resp.data.set && resp.data.set.length > 0) {
|
||||
return resp.data.set;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteRequest(uuid?: string, path?: string, rename?: boolean): Promise<Sets> {
|
||||
let payload = {};
|
||||
if (uuid) {
|
||||
payload = { uuid: uuid, rename: rename };
|
||||
} else if (path) {
|
||||
payload = { path: path };
|
||||
}
|
||||
|
||||
const resp = await api.delete('/json_data', {
|
||||
data: {
|
||||
set: [payload],
|
||||
},
|
||||
});
|
||||
|
||||
if (resp.data.set && resp.data.set.length > 0) {
|
||||
return resp.data.set;
|
||||
} else {
|
||||
throw new Error('No data returned');
|
||||
}
|
||||
}
|
@@ -2,8 +2,10 @@ export type Set = {
|
||||
uuid?: string | undefined;
|
||||
path?: string;
|
||||
type?: string;
|
||||
value: string | number | boolean | undefined;
|
||||
value: string | number | boolean | null | undefined;
|
||||
rights?: string;
|
||||
create?: boolean;
|
||||
hasChild?: boolean;
|
||||
};
|
||||
|
||||
export type Sets = Set[];
|
@@ -1,12 +1,14 @@
|
||||
import { ref } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import type { Driver } from './Drivers';
|
||||
import type { Set } from './Set';
|
||||
|
||||
export type Subscribe = {
|
||||
uuid?: string;
|
||||
path?: string;
|
||||
depth?: number;
|
||||
type?: string;
|
||||
drivers?: object | undefined;
|
||||
drivers?: Record<string, Driver>;
|
||||
value?: Ref<string | number | boolean | null | undefined>;
|
||||
hasChild?: boolean;
|
||||
};
|
||||
@@ -18,20 +20,26 @@ export type RawSubscribe = {
|
||||
path?: string;
|
||||
depth?: number;
|
||||
value?: string | number | boolean | null;
|
||||
rights?: string;
|
||||
hasChild?: boolean;
|
||||
};
|
||||
|
||||
export type RawSubs = RawSubscribe[];
|
||||
|
||||
export function convertToSubscribe(raw: RawSubscribe): Subscribe {
|
||||
export function convertToSubscribe(raw: RawSubscribe | Set): Subscribe {
|
||||
return {
|
||||
...raw,
|
||||
uuid: raw.uuid ?? '',
|
||||
value: ref(raw.value ?? null),
|
||||
};
|
||||
}
|
||||
|
||||
export function convertToSubscribes(rawList: RawSubs): Subs {
|
||||
const subs = rawList.map(convertToSubscribe);
|
||||
const subs = rawList.map(convertToSubscribe).sort((a, b) => {
|
||||
const aPath = a.path ?? '';
|
||||
const bPath = b.path ?? '';
|
||||
return aPath.localeCompare(bPath);
|
||||
});
|
||||
return subs as Subs;
|
||||
}
|
||||
|
@@ -1,7 +1,8 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { convertToSubscribe } from 'src/models/Subscribe';
|
||||
import type { Subs, Subscribe, RawSubs } from 'src/models/Subscribe';
|
||||
import { convertToSubscribe } from '../models/Subscribe';
|
||||
import type { Subscribe, RawSubs, RawSubscribe } from '../models/Subscribe';
|
||||
import type { Set } from './Set';
|
||||
|
||||
const EMPTYUUID = '00000000-0000-0000-0000-000000000000';
|
||||
export const Subscriptions = reactive<Record<string, Subscribe>>({});
|
||||
@@ -11,16 +12,12 @@ export type TableSubscription = {
|
||||
value: Ref<string | number | boolean | null | undefined>;
|
||||
};
|
||||
|
||||
export function getRows(): Subs {
|
||||
return Object.values(Subscriptions).map((sub) => {
|
||||
sub.path = sub.path?.split(':').pop() ?? '';
|
||||
if (!sub.type) sub.type = 'None';
|
||||
else sub.type = sub.type.toLowerCase();
|
||||
return sub;
|
||||
});
|
||||
export function addRawSubscription(sub: RawSubscribe | Set | undefined) {
|
||||
if (sub === undefined) return;
|
||||
addSubscription(convertToSubscribe(sub as RawSubscribe));
|
||||
}
|
||||
|
||||
export function addSubscriptions(subs: RawSubs) {
|
||||
export function addRawSubscriptions(subs: RawSubs) {
|
||||
subs.forEach((sub) => addSubscription(convertToSubscribe(sub)));
|
||||
}
|
||||
|
||||
@@ -46,9 +43,13 @@ export function updateSubscriptionValue(
|
||||
Subscriptions[uuid].value = ref(value);
|
||||
}
|
||||
|
||||
export function removeSubscriptions(subs: RawSubs) {
|
||||
export function removeRawSubscription(sub: RawSubscribe | string) {
|
||||
removeSubscription(typeof sub === 'string' ? sub : sub.uuid);
|
||||
}
|
||||
|
||||
export function removeRawSubscriptions(subs: RawSubs) {
|
||||
subs.forEach((sub) => {
|
||||
removeSubscription(sub.path);
|
||||
removeSubscription(sub.uuid);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -56,7 +57,7 @@ export function removeAllSubscriptions() {
|
||||
Object.keys(Subscriptions).forEach((key) => delete Subscriptions[key]);
|
||||
}
|
||||
|
||||
function removeSubscription(uuid: string | undefined) {
|
||||
export function removeSubscription(uuid: string | undefined) {
|
||||
if (uuid === undefined) return;
|
||||
if (!Subscriptions || Subscriptions[uuid] === undefined) return;
|
||||
delete Subscriptions[uuid];
|
||||
@@ -65,3 +66,8 @@ function removeSubscription(uuid: string | undefined) {
|
||||
export function findSubscriptionByPath(path: string): Subscribe | undefined {
|
||||
return Object.values(Subscriptions).find((sub) => sub.path === path);
|
||||
}
|
||||
|
||||
export function findSubscriptionByUuid(uuid: string): Subscribe | undefined {
|
||||
if (!Subscriptions[uuid]) return;
|
||||
return Subscriptions[uuid];
|
||||
}
|
13
src/vueLib/models/error.ts
Normal file
13
src/vueLib/models/error.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { Response } from './Response';
|
||||
|
||||
export function catchError(data: Error | Response): string {
|
||||
if (data instanceof Response) {
|
||||
if (data.message) return data.message;
|
||||
else console.error(data);
|
||||
} else if (data instanceof Error) {
|
||||
return data.message;
|
||||
} else {
|
||||
console.error(data);
|
||||
}
|
||||
return '';
|
||||
}
|
@@ -1,42 +1,16 @@
|
||||
import type { Response } from 'src/models/Response';
|
||||
import { publishToSubscriptions } from 'src/models/Publish';
|
||||
import type { Request } from 'src/models/Request';
|
||||
import type { Response } from '../models/Response';
|
||||
import { publishToSubscriptions } from '../models/Publish';
|
||||
import type { Request } from '../models/Request';
|
||||
import type { QVueGlobals } from 'quasar';
|
||||
import { ref } from 'vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { type Subs } from 'src/models/Subscribe';
|
||||
import type { Sets } from 'src/models/Set';
|
||||
import type { PongMessage } from 'src/models/Pong';
|
||||
import { addSubscriptions } from 'src/models/Subscriptions';
|
||||
import { type Subs } from '../models/Subscribe';
|
||||
import type { Sets } from '../models/Set';
|
||||
import { addRawSubscriptions } from '../models/Subscriptions';
|
||||
const pendingResponses = new Map<string, (data: Response | undefined) => void>();
|
||||
//const lastKnownValues: Record<string, string> = reactive({});
|
||||
|
||||
export let socket: WebSocket | null = null;
|
||||
|
||||
const isConnected = ref(false);
|
||||
let lastPongTime = Date.now();
|
||||
|
||||
function pingLoop(interval: number = 5000) {
|
||||
// Start sending ping every 5 seconds
|
||||
setInterval(() => {
|
||||
if (!socket || socket.readyState !== WebSocket.OPEN) return;
|
||||
|
||||
// If no pong received in last 10 seconds, close
|
||||
if (Date.now() - lastPongTime > interval + 10000) {
|
||||
console.warn('No pong response, closing socket...');
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
socket.send(JSON.stringify({ type: 'ping' }));
|
||||
}, interval);
|
||||
}
|
||||
|
||||
function isPong(msg: PongMessage | undefined | null) {
|
||||
if (msg?.type === 'pong') {
|
||||
lastPongTime = Date.now();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function initWebSocket(url: string, $q?: QVueGlobals) {
|
||||
const connect = () => {
|
||||
@@ -45,9 +19,8 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
|
||||
socket.onopen = () => {
|
||||
console.log('WebSocket connected');
|
||||
isConnected.value = true;
|
||||
// Start sending ping every 5 seconds
|
||||
pingLoop(5000);
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
isConnected.value = false;
|
||||
console.log('WebSocket disconnected');
|
||||
@@ -74,9 +47,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
|
||||
if (typeof event.data === 'string') {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
// Handle pong
|
||||
if (isPong(message)) return;
|
||||
|
||||
const id = message.id;
|
||||
if (id && pendingResponses.has(id)) {
|
||||
pendingResponses.get(id)?.(message); // resolve the promise
|
||||
@@ -127,7 +97,14 @@ function waitForSocketConnection(): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
export function subscribeToPath(q: QVueGlobals, path: string) {
|
||||
export function subscribeToPath(
|
||||
NotifyResponse: (
|
||||
resp: Response | string | undefined,
|
||||
type?: 'warning' | 'error',
|
||||
timeout?: 5000,
|
||||
) => void,
|
||||
path: string,
|
||||
) {
|
||||
subscribe([
|
||||
{
|
||||
path: path,
|
||||
@@ -136,13 +113,13 @@ export function subscribeToPath(q: QVueGlobals, path: string) {
|
||||
])
|
||||
.then((response) => {
|
||||
if (response?.subscribe) {
|
||||
addSubscriptions(response.subscribe);
|
||||
addRawSubscriptions(response.subscribe);
|
||||
} else {
|
||||
NotifyResponse(q, response);
|
||||
NotifyResponse(response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse(q, err, 'error');
|
||||
NotifyResponse(err, 'error');
|
||||
});
|
||||
}
|
||||
|
Reference in New Issue
Block a user