diff --git a/src/App.vue b/src/App.vue index 6fa3bca..d3c72d5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ import { RouterView } from 'vue-router' import LoadingOverlay from './components/LoadingOverlay.vue' import ErrorPresenter from './components/ErrorPresenter.vue' import SuccessPresenter from './components/SuccessPresenter.vue' +import DeviceGroupsDialog from './components/DeviceGroupsDialog.vue' - -

Device action

@@ -151,15 +149,11 @@ import { import InstructionLayout from './InstructionLayout.vue' import { onMounted, ref, watch } from 'vue' import type { Device, DeviceAction } from '@/model/devices-management/Device' -import { useUserInfoStore } from '@/stores/user-info' import { useInstructionsStore } from '@/stores/instructions' -import { findDevice } from '@/api/devices-management/requests/devices' import { Type } from '@/model/Type' import { getDefaultInput } from './emptyInstructions' -import { useLoadingOverlayStore } from '@/stores/loading-overlay' -import DeviceGroupsDialog from '../DeviceGroupsDialog.vue' import DeviceNameAndGroup from '../DeviceNameAndGroup.vue' -import { useGroupsStore } from '@/stores/groups' +import { useDevicesStore } from '@/stores/devices' const props = defineProps<{ id: string @@ -169,11 +163,10 @@ const props = defineProps<{ }>() const instructionsStore = useInstructionsStore() -const loadingOverlay = useLoadingOverlayStore() -const userInfo = useUserInfoStore() const instruction = ref(props.instruction.instruction as DeviceActionInstruction) const device = ref() const action = ref>() +const devicesStore = useDevicesStore() const selectedAction = ref>() @@ -187,7 +180,7 @@ watch( () => props.instruction, async (val) => { instruction.value = val.instruction as DeviceActionInstruction - await updateInstruction() + updateInstruction() }, { immediate: true }, ) @@ -291,22 +284,12 @@ function variableType(): TypeDTO { } } -onMounted(async () => await updateInstruction()) +onMounted(() => updateInstruction()) -async function updateInstruction() { - try { - loadingOverlay.startLoading() - const deviceGroups = useGroupsStore().deviceGroups(instruction.value.deviceId) - if (deviceGroups.length > 0) { - device.value = useGroupsStore().getDeviceFromGroups(instruction.value.deviceId)! - } else { - device.value = await findDevice(instruction.value.deviceId, userInfo.token) - } - action.value = device.value.actions.find((act) => act.id === instruction.value.deviceActionId) - selectedAction.value = action.value - } finally { - loadingOverlay.stopLoading() - } +function updateInstruction() { + device.value = devicesStore.getDevice(instruction.value.deviceId) + action.value = device.value?.actions.find((act) => act.id === instruction.value.deviceActionId) + selectedAction.value = action.value } function openDialog() { @@ -335,5 +318,4 @@ function closeDialog() { const dialog = document.getElementById(props.id.toString()) as HTMLDialogElement dialog.close() } - diff --git a/src/components/tasks-automations/InstructionItems.vue b/src/components/tasks-automations/InstructionItems.vue index 1427478..fa0f6bc 100644 --- a/src/components/tasks-automations/InstructionItems.vue +++ b/src/components/tasks-automations/InstructionItems.vue @@ -1,10 +1,7 @@ diff --git a/src/components/tasks-automations/TriggerComponent.vue b/src/components/tasks-automations/TriggerComponent.vue index 585cb9c..e8c1c3e 100644 --- a/src/components/tasks-automations/TriggerComponent.vue +++ b/src/components/tasks-automations/TriggerComponent.vue @@ -9,8 +9,7 @@ import { formatDuration, } from './timeUtils' import type { Device } from '@/model/devices-management/Device' -import { findDevice, getAllDevices } from '@/api/devices-management/requests/devices' -import { useUserInfoStore } from '@/stores/user-info' +import { useDevicesStore } from '@/stores/devices' const props = defineProps<{ trigger?: Trigger @@ -30,9 +29,9 @@ const trigger = computed({ watch( () => props.trigger, - async (val) => { + (val) => { if (isDeviceEventTrigger(val)) { - selectedDevice.value = await findDevice(val.deviceId, userInfo.token) + selectedDevice.value = useDevicesStore().getDevice(val.deviceId) selectedEvent.value = val.eventName } }, @@ -100,7 +99,6 @@ function addEmptyPeriodTrigger() { } } -const userInfo = useUserInfoStore() const selectedDevice = ref() const selectedEvent = ref('') const devices = ref() @@ -150,8 +148,8 @@ function closeDialog() { dialog.close() } -onMounted(async () => { - devices.value = await getAllDevices(userInfo.token) +onMounted(() => { + devices.value = useDevicesStore().devices }) diff --git a/src/components/tasks-automations/emptyInstructions.ts b/src/components/tasks-automations/emptyInstructions.ts index 6a3b36e..5824c53 100644 --- a/src/components/tasks-automations/emptyInstructions.ts +++ b/src/components/tasks-automations/emptyInstructions.ts @@ -11,6 +11,7 @@ import type { DeviceActionInstruction, } from '@/model/scripts/Instruction' import { ConditionOperatorType } from '@/model/scripts/Instruction' +import { TaskId } from '@/model/scripts/Script' import { Type } from '@/model/Type' export function EmptyIfInstruction(): IfInstruction { @@ -46,7 +47,7 @@ export function EmptyWaitInstruction(): WaitInstruction { export function EmptyStartTaskInstruction(): StartTaskInstruction { return { - taskId: '', + taskId: TaskId(''), } } diff --git a/src/main.ts b/src/main.ts index 8de3363..5f2f761 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,13 +11,16 @@ import { useNotificationsStore } from './stores/notifications' import { useGroupsStore } from './stores/groups' import { useLoadingOverlayStore } from './stores/loading-overlay' import { isGetUserInfoDTO } from './api/users-management/dtos/GetUserInfoDTO' +import { useDevicesStore } from './stores/devices' +import { useUsersStore } from './stores/users' +import { useTasksStore } from './stores/tasks' const app = createApp(App) app.use(createPinia()) app.use(router) -useLoadingOverlayStore() +const loadingOverlay = useLoadingOverlayStore() // Loading a session token if it exists const userInfo = useUserInfoStore() @@ -43,10 +46,26 @@ app.config.errorHandler = (err) => { } userInfo.$subscribe(async () => { - useGroupsStore().updateGroups() + await setupStores() }) -useGroupsStore().updateGroups() +setupStores() + +async function setupStores() { + if (userInfo.token) { + try { + loadingOverlay.startLoading() + await Promise.all([ + useGroupsStore().updateGroups(), + useDevicesStore().updateDevices(), + useUsersStore().updateUsers(), + useTasksStore().updateTasks() + ]) + } finally { + loadingOverlay.stopLoading() + } + } +} // During development it's possible to set a VITE_USER_INFO object to skip login: // VITE_USER_INFO='{"email": "a@email.com", "nickname": "Foo", "token": "blablabla", "role": "Admin" }' npm run dev diff --git a/src/model/scripts/Instruction.ts b/src/model/scripts/Instruction.ts index a35d5cf..405f0d9 100644 --- a/src/model/scripts/Instruction.ts +++ b/src/model/scripts/Instruction.ts @@ -1,5 +1,6 @@ import type { DeviceActionId, DeviceId, DevicePropertyId } from '../devices-management/Device' import type { Type } from '../Type' +import type { TaskId } from './Script' export enum InstructionType { SendNotificationInstruction = 'SendNotificationInstruction', @@ -55,7 +56,7 @@ export interface WaitInstruction { } export interface StartTaskInstruction { - taskId: string + taskId: TaskId } export interface DeviceActionInstruction { diff --git a/src/stores/devices.ts b/src/stores/devices.ts new file mode 100644 index 0000000..c2eee34 --- /dev/null +++ b/src/stores/devices.ts @@ -0,0 +1,20 @@ +import { defineStore } from "pinia" +import { useUserInfoStore } from "./user-info" +import { ref } from "vue" +import type { Device, DeviceId } from "@/model/devices-management/Device"; +import { getAllDevices } from "@/api/devices-management/requests/devices"; + +export const useDevicesStore = defineStore('devices', () => { + const userInfo = useUserInfoStore() + const devices = ref([]) + + async function updateDevices() { + devices.value = await getAllDevices(userInfo.token) + } + + function getDevice(deviceId: DeviceId) { + return devices.value?.find(d => d.id === deviceId) + } + + return { devices, updateDevices, getDevice } +}); diff --git a/src/stores/groups-dialog.ts b/src/stores/groups-dialog.ts new file mode 100644 index 0000000..56b0e34 --- /dev/null +++ b/src/stores/groups-dialog.ts @@ -0,0 +1,19 @@ +import { defineStore } from "pinia" +import { computed, ref } from "vue" +import { useGroupsStore } from "./groups" +import type { DeviceId } from "@/model/devices-management/Device" + +export const useGroupsDialogStore = defineStore('groups-dialog', () => { + const selectedDeviceGroups = computed(() => selectedDevice.value ? useGroupsStore().getGroupsOfDevice(selectedDevice.value!) : []) + const selectedDevice = ref() + + function showDeviceGroups(deviceId: DeviceId) { + selectedDevice.value = deviceId + } + + function closeDialog() { + selectedDevice.value = undefined + } + + return { selectedDeviceGroups, selectedDevice, showDeviceGroups, closeDialog } +}) diff --git a/src/stores/groups.ts b/src/stores/groups.ts index af78b62..0475146 100644 --- a/src/stores/groups.ts +++ b/src/stores/groups.ts @@ -3,36 +3,21 @@ import type { DeviceGroup } from "@/model/devices-management/DeviceGroup"; import { defineStore } from "pinia"; import { ref } from "vue"; import { useUserInfoStore } from "./user-info"; -import type { DeviceId } from "@/model/devices-management/Device"; -import { useLoadingOverlayStore } from "./loading-overlay"; +import { type DeviceId } from "@/model/devices-management/Device"; export const useGroupsStore = defineStore('groups', () => { const userInfo = useUserInfoStore() const groups = ref([]) async function updateGroups() { - const loadingOverlay = useLoadingOverlayStore() - if (userInfo.token) { - try { - loadingOverlay.startLoading() - groups.value = await getAllDeviceGroups(userInfo.token) - } finally { - loadingOverlay.stopLoading() - } - } + groups.value = await getAllDeviceGroups(userInfo.token) } - function deviceGroups(deviceId: DeviceId) { + function getGroupsOfDevice(deviceId: DeviceId) { return groups.value.filter((g) => - g.devices.map((d) => d.id).includes(deviceId), + g.devices.map(d => d.id).includes(deviceId) ) } - function getDeviceFromGroups(deviceId: DeviceId) { - return deviceGroups(deviceId)[0].devices.find( - (d) => d.id === deviceId, - )! - } - - return { groups, updateGroups, deviceGroups, getDeviceFromGroups } + return { groups, updateGroups, getGroupsOfDevice } }) diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts new file mode 100644 index 0000000..4c59ff2 --- /dev/null +++ b/src/stores/tasks.ts @@ -0,0 +1,20 @@ +import { getAllTasks } from "@/api/scripts/requests/tasks"; +import type { Task, TaskId } from "@/model/scripts/Script"; +import { defineStore } from "pinia"; +import { ref } from "vue"; +import { useUserInfoStore } from "./user-info"; + +export const useTasksStore = defineStore('tasks', () => { + const userInfo = useUserInfoStore() + const tasks = ref([]) + + async function updateTasks() { + tasks.value = await getAllTasks(userInfo.token) + } + + function getTask(taskId: TaskId) { + return tasks.value?.find(t => t.id === taskId) + } + + return { tasks, updateTasks, getTask } +}); diff --git a/src/stores/users.ts b/src/stores/users.ts new file mode 100644 index 0000000..c8938d6 --- /dev/null +++ b/src/stores/users.ts @@ -0,0 +1,20 @@ +import { defineStore } from "pinia"; +import { useUserInfoStore } from "./user-info"; +import { ref } from "vue"; +import type { User } from "@/model/users-management/User"; +import { getAllUsers } from "@/api/users-management/requests/users"; + +export const useUsersStore = defineStore('users', () => { + const userInfo = useUserInfoStore() + const users = ref([]) + + async function updateUsers() { + users.value = await getAllUsers(userInfo.token) + } + + function getUser(email: string) { + return users.value?.find(u => u.email === email) + } + + return { users, updateUsers, getUser } +}); diff --git a/src/views/admin/device-groups/DeviceGroupView.vue b/src/views/admin/device-groups/DeviceGroupView.vue index dd9f99c..af5640c 100644 --- a/src/views/admin/device-groups/DeviceGroupView.vue +++ b/src/views/admin/device-groups/DeviceGroupView.vue @@ -12,7 +12,6 @@ import * as devicesApi from '@/api/devices-management/requests/devices' import { presentSuccess, useSuccessPresenterStore } from '@/stores/success-presenter' import NavbarLayout from '@/components/NavbarLayout.vue' import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue' -import DeviceGroupsDialog from '@/components/DeviceGroupsDialog.vue' const props = defineProps({ id: { type: String, required: true } }) const groupId = DeviceGroupId(props.id) @@ -97,7 +96,6 @@ onMounted(async () => { class="btn btn-circle btn-ghost fa-solid fa-remove" @click="removeDeviceFromGroup(d.id)" > - @@ -128,7 +126,6 @@ onMounted(async () => { class="btn btn-circle btn-ghost fa-solid fa-add" @click="addDeviceToGroup(d.id)" > - diff --git a/src/views/admin/manage-devices/ManageDevicesView.vue b/src/views/admin/manage-devices/ManageDevicesView.vue index 02e3319..7a245fe 100644 --- a/src/views/admin/manage-devices/ManageDevicesView.vue +++ b/src/views/admin/manage-devices/ManageDevicesView.vue @@ -10,7 +10,6 @@ import { presentSuccess, useSuccessPresenterStore } from '@/stores/success-prese import AddButton from '@/components/AddButton.vue' import NavbarLayout from '@/components/NavbarLayout.vue' import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue' -import DeviceGroupsDialog from '@/components/DeviceGroupsDialog.vue' const userInfo = useUserInfoStore() const loadingOverlay = useLoadingOverlayStore() @@ -86,7 +85,6 @@ onMounted(async () => { class="btn btn-circle btn-ghost fa-solid fa-trash" v-on:click="removeDevice(d.id)" > - diff --git a/src/views/admin/users-permissions/UserPermissionsView.vue b/src/views/admin/users-permissions/UserPermissionsView.vue index 513855d..af917de 100644 --- a/src/views/admin/users-permissions/UserPermissionsView.vue +++ b/src/views/admin/users-permissions/UserPermissionsView.vue @@ -18,7 +18,6 @@ :aria-label="'Remove permission on: ' + device.name" @click="removeUserDevicePermission(device.id)" > - @@ -41,7 +40,6 @@ :aria-label="'Add permission of: ' + device" @click="addUserDevicePermission(device.id)" > - @@ -62,7 +60,6 @@ import { useRoute } from 'vue-router' import NavbarLayout from '@/components/NavbarLayout.vue' import DeviceListSkeleton from '@/components/admin/manage-devices/DeviceListSkeleton.vue' import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue' -import DeviceGroupsDialog from '@/components/DeviceGroupsDialog.vue' const loadingOverlay = useLoadingOverlayStore() const devicesWithPermissions = ref(undefined) diff --git a/src/views/automations/EditAutomationView.vue b/src/views/automations/EditAutomationView.vue index e3fdeb8..c3f3783 100644 --- a/src/views/automations/EditAutomationView.vue +++ b/src/views/automations/EditAutomationView.vue @@ -142,6 +142,6 @@ function showToastMessage(msg: string) {
- + diff --git a/src/views/devices/DeviceView.vue b/src/views/devices/DeviceView.vue index 2307ef1..4205f31 100644 --- a/src/views/devices/DeviceView.vue +++ b/src/views/devices/DeviceView.vue @@ -16,7 +16,6 @@ import { io } from 'socket.io-client' import { presentSuccess, useSuccessPresenterStore } from '@/stores/success-presenter' import NavbarLayout from '@/components/NavbarLayout.vue' import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue' -import DeviceGroupsDialog from '@/components/DeviceGroupsDialog.vue' const props = defineProps({ id: { type: String, required: true } }) const deviceId = DeviceId(props.id) const userInfo = useUserInfoStore() @@ -140,7 +139,6 @@ onUnmounted(() => {
Groups: -
  • diff --git a/src/views/devices/DevicesView.vue b/src/views/devices/DevicesView.vue index 027430d..3d72373 100644 --- a/src/views/devices/DevicesView.vue +++ b/src/views/devices/DevicesView.vue @@ -11,7 +11,6 @@ import { useLoadingOverlayStore } from '@/stores/loading-overlay' import NavbarLayout from '@/components/NavbarLayout.vue' import router from '@/router' import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue' -import DeviceGroupsDialog from '@/components/DeviceGroupsDialog.vue' const userInfo = useUserInfoStore() const loadingOverlay = useLoadingOverlayStore() @@ -102,7 +101,6 @@ onMounted(async () => {
    • -