paadi/lightController
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make new folder for reuse ngLib add new features for datatree like change add remove rename datapoints improve pingpong

Browse Source
This commit is contained in:
Adrian Zuercher
2025-07-25 18:37:18 +02:00
parent ffb8e4994e
commit 81b7f96abc
52 changed files with 2145 additions and 960 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/boot/axios.ts
View File

@@ -7,7 +7,7 @@ const baseURL = `http://${host}:${port}`;
const api = axios.create({
baseURL: baseURL,
timeout: 10000,
timeout: 30000,
headers: {
'Content-Type': 'application/json',
},

2
src/boot/websocket.ts
View File

@@ -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;

180
src/components/dbm/DBMTree.vue
View File

@@ -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>

52
src/components/dbm/SubMenu.vue
View File

@@ -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>

82
src/components/dbm/dataTable.vue
View File

@@ -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>

101
src/components/dialog/AddDatapoint.vue
View File

@@ -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>

126
src/components/dialog/UpdateValueDialog.vue
View File

@@ -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>

12
src/components/lights/DomeLight.vue
View File

@@ -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>

13
src/components/lights/DragPad.vue
View File

@@ -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;

20
src/components/lights/LightBarCBL.vue
View File

@@ -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();
});

9
src/components/lights/LightSlider.vue
View File

@@ -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,

22
src/components/lights/MovingHead.vue
View File

@@ -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));
},
});

92
src/components/scenes/ScenesPage.vue
View File

@@ -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>

131
src/composables/dbm/dbmTree.ts
View File

@@ -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',
);
});
},
});
}

67
src/composables/notify.ts
View File

@@ -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);
});
});
}

16
src/models/Publish.ts
View File

@@ -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);
});
}

10
src/models/Request.ts
View File

@@ -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;
};

2
src/models/Scene.ts
View File

@@ -1,4 +1,4 @@
import type { Value } from './Value';
import type { Value } from '../vueLib/models/Value';
export interface Scene {
name: string;

12
src/pages/DataPage.vue
View File

@@ -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>

101
src/vueLib/buttons/DataTypes.vue
View File

@@ -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>

2
src/vueLib/buttons/RadioButton.vue
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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);
});
}

27
src/vueLib/dialog/DialogFrame.vue
View File

@@ -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
View 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
View File

@@ -0,0 +1,5 @@
export interface Driver {
type: string;
addess: number;
value: number;
}

2
src/models/Get.ts → src/vueLib/models/Get.ts
View File

@@ -7,7 +7,7 @@ type Get = {
path?: string;
type?: string;
rights?: string;
value?: undefined;
value?: string | number | boolean | null;
query?: Query;
hasChild?: boolean;
};

0
src/models/Pong.ts → src/vueLib/models/Pong.ts
View File

50
src/vueLib/models/Publish.ts Normal file
View 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
View 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');
}
}

0
src/models/Response.ts → src/vueLib/models/Response.ts
View File

4
src/models/Set.ts → src/vueLib/models/Set.ts
View File

@@ -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[];

14
src/models/Subscribe.ts → src/vueLib/models/Subscribe.ts
View File

@@ -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;
}

32
src/models/Subscriptions.ts → src/vueLib/models/Subscriptions.ts
View File

@@ -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];
}

0
src/models/Value.ts → src/vueLib/models/Value.ts
View File

13
src/vueLib/models/error.ts Normal file
View 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 '';
}

61
src/services/websocket.ts → src/vueLib/services/websocket.ts
View File

@@ -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');
});
}