diff --git a/src/app/App.vue b/src/app/App.vue index c5176eec4e889513f0ff6f910bf98dba5ce89ae8..32edf7fef04d12555900c8e58e0a298bfd3deda0 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -1,29 +1,20 @@ diff --git a/src/app/assets/main.css b/src/app/assets/main.css index 47d862b137378901a236f2fa9f8c818a9ef0adff..b7736c78700718a292db44a8f0684192d644af85 100644 --- a/src/app/assets/main.css +++ b/src/app/assets/main.css @@ -8,6 +8,15 @@ --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; + --slate-100: #f1f5f9; + --slate-200: #e2e8f0; + --slate-300: #cbd5e1; + --slate-400: #94a3b8; + --slate-500: #64748b; + --slate-600: #475569; + --slate-700: #334155; + --slate-800: #1e293b; + --slate-900: #0f172a; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; @@ -35,6 +44,15 @@ --yellow-700: #a16207; --yellow-800: #854d0e; --yellow-900: #713f12; + --lime-100: #ecfccb; + --lime-200: #d9f99d; + --lime-300: #bef264; + --lime-400: #a3e635; + --lime-500: #84cc16; + --lime-600: #65a30d; + --lime-700: #4d7c0f; + --lime-800: #3f6212; + --lime-900: #365314; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; @@ -44,6 +62,15 @@ --green-700: #15803d; --green-800: #166534; --green-900: #14532d; + --teal-100: #ccfbf1; + --teal-200: #99f6e4; + --teal-300: #5eead4; + --teal-400: #2dd4bf; + --teal-500: #14b8a6; + --teal-600: #0d9488; + --teal-700: #0f766e; + --teal-800: #115e59; + --teal-900: #134e4a; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; @@ -98,6 +125,15 @@ --pink-700: #be185d; --pink-800: #9d174d; --pink-900: #831843; + --rose-100: #ffe4e6; + --rose-200: #fecdd3; + --rose-300: #fda4af; + --rose-400: #fb7185; + --rose-500: #f43f5e; + --rose-600: #e11d48; + --rose-700: #be123c; + --rose-800: #9f1239; + --rose-900: #881337; } body { min-height: 100vh; @@ -107,6 +143,9 @@ body { display: flex; flex-flow: column; } +#pageContainer { + padding-top: 80px; +} #app > main { flex: 1 1 auto; } diff --git a/src/app/components.d.ts b/src/app/components.d.ts index df565292d4f5081e553a4cccdba79edd930c4ba8..7120db426a9908774994570677fe37bd8ba7f97c 100644 --- a/src/app/components.d.ts +++ b/src/app/components.d.ts @@ -8,6 +8,7 @@ export {} declare module 'vue' { export interface GlobalComponents { App: typeof import('./App.vue')['default'] + AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default'] Avatar: typeof import('primevue/avatar')['default'] BaseDivider: typeof import('./../shared/BaseDivider.vue')['default'] BaseLoader: typeof import('./../shared/BaseLoader.vue')['default'] @@ -15,27 +16,32 @@ declare module 'vue' { Button: typeof import('primevue/button')['default'] CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default'] CropImageModal: typeof import('./../modules/CropImageModal.vue')['default'] + DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default'] Dialog: typeof import('primevue/dialog')['default'] Divider: typeof import('primevue/divider')['default'] DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default'] DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default'] + DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default'] Drawer: typeof import('primevue/drawer')['default'] EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default'] EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default'] EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default'] - HomePage: typeof import('./../pages/HomePage.vue')['default'] ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default'] ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default'] ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default'] ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default'] ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default'] LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default'] + MenuHeader: typeof import('./../modules/MenuHeader.vue')['default'] page: typeof import('./../modules/Home page.vue')['default'] PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default'] PageHeader: typeof import('./../modules/PageHeader.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default'] + SignIn: typeof import('./../pages/authorization/signIn.vue')['default'] + SignUp: typeof import('./../pages/authorization/signUp.vue')['default'] + SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default'] SpeedDial: typeof import('primevue/speeddial')['default'] TelegramSection: typeof import('./../modules/TelegramSection.vue')['default'] TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default'] diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts index 5bb4a9d0e8ec18bdf214e15982eecd1c8826be0e..d007a1ec7f57f99c62e4c77562cf2d652ef5675d 100644 --- a/src/app/helpers/index.ts +++ b/src/app/helpers/index.ts @@ -5,13 +5,13 @@ import type { IEntity } from '@/app/interfaces/environment'; import { checkIsImage } from '@/app/helpers/images'; import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket'; import type { IImage } from '@/app/interfaces/entities'; +import cookies from '@/app/plugins/Cookie'; -export const setDefaultHomeBackground = () => { +export const setDefaultPageBackground = () => { const interfaceStore = useInterfaceStore(); - interfaceStore.resetHomeBackground(); + interfaceStore.resetPageBackground(); }; - -export const fetchForHomeEntities = () => { +export const fetchForEntities = (page_uuid: string) => { const dataStore = useDataStore(); const interfaceStore = useInterfaceStore(); const websocketStore = useWebsocketStore(); @@ -19,27 +19,29 @@ export const fetchForHomeEntities = () => { const filesBuffer = filesWebsocketStore.filesBuffer; if (filesBuffer.length) { filesBuffer[0] = new Blob([filesBuffer[0].data], { type: 'image/jpeg' }); - interfaceStore.setHomeBackgroundFromDB(URL.createObjectURL(filesBuffer[0])); + interfaceStore.setPageBackgroundFromDB(URL.createObjectURL(filesBuffer[0])); } - if (!dataStore.homeEntities.length) { - const getHomeEntitiesData = { - event: 'getHomeEntities' + if (!dataStore.entities.length) { + const getEntitiesData = { + event: 'getPageEntities', + body: { page_uuid } }; - websocketStore.sendData(getHomeEntitiesData); + websocketStore.sendData(getEntitiesData); } filesWebsocketStore.removeFirstFilesBuffer(); }; -export const createHomeEntity = (newEntity: IEntity) => { +export const createEntity = (newEntity: IEntity) => { const websocketStore = useWebsocketStore(); + const page_uuid = cookies.get('current_page_uuid'); if (newEntity.image_buffer) { websocketStore.setFileData(newEntity); const filesWebsocketStore = useFilesWebsocketStore(); return filesWebsocketStore.sendData(newEntity.image_buffer); } const data = { - event: 'createHomeEntity', - body: newEntity + event: 'createEntity', + body: { ...newEntity, page_uuid } }; websocketStore.sendData(data); }; @@ -48,7 +50,7 @@ export const editEntity = (newState: IEntity) => { newState = checkIsImage(newState); const websocketStore = useWebsocketStore(); const data = { - event: 'editHomeEntity', + event: 'editEntity', body: { ...newState } }; websocketStore.sendData(data); @@ -57,22 +59,28 @@ export const editEntity = (newState: IEntity) => { export const deleteEntity = (entityUuid: string) => { const dataStore = useDataStore(); const websocketStore = useWebsocketStore(); - const entities = dataStore.homeEntities; + const entities = dataStore.entities; const entityToDelete = entities.find((entity) => entity.entity_uuid === entityUuid); const data = { - event: 'deleteHomeEntity', + event: 'deleteEntity', body: { ...entityToDelete } }; websocketStore.sendData(data); }; -export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'down') => { +export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down') => { const websocketStore = useWebsocketStore(); + const dataStore = useDataStore(); + const entities = dataStore.entities; + const mainEntity = entities.find((entity: IEntity) => entity.entity_uuid === entityUuid)!; + const mainEntityIndex = entities.indexOf(mainEntity); + const targetEntityIndex = direction === 'up' ? mainEntityIndex - 1 : mainEntityIndex + 1; + const targetEntity = entities[targetEntityIndex]; const data = { - event: 'changeOrderHomeEntity', + event: 'changeEntitiesOrder', body: { - entity_uuid: entityUuid, - direction + main: mainEntity, + target: targetEntity } }; websocketStore.sendData(data); diff --git a/src/app/interfaces/authorization.ts b/src/app/interfaces/authorization.ts index 659cadb75267441aaa51101c92929da9c9a5ff10..1bb6115ba3903796f03caf2c2f31a73a9f58288e 100644 --- a/src/app/interfaces/authorization.ts +++ b/src/app/interfaces/authorization.ts @@ -1,17 +1,15 @@ -import type { TThemes } from '@/app/interfaces/environment'; -import type { IImage } from '@/app/interfaces/entities'; +import type { TColors } from '@/app/interfaces/environment'; export interface IUserData { user_uuid: string; nick_name: string; - first_name: string; - last_name: string; - middle_name: string; + first_name?: string; + last_name?: string; + middle_name?: string; email: string; - phone_number: string; + phone_number?: string; settings: IUserSettings; } interface IUserSettings { - theme: TThemes; - background: IImage; + favoriteColor: TColors; } diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts index b367311ad87eb2e26f7fa75050846d150157d3aa..050bca6928ddbe72c06377bc32985449dea5fe3e 100644 --- a/src/app/interfaces/entities.ts +++ b/src/app/interfaces/entities.ts @@ -33,8 +33,8 @@ export interface IDivider extends IEntity { divider_type: 'solid' | 'dashed' | 'dotted'; } -export interface IText extends IEntity { - entity_type: 'text'; +export interface IParagraph extends IEntity { + entity_type: 'paragraph'; entity_uuid: string; title?: string | null; text: string; diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts index e307c3dc36d972708f365b6250ae1aaaf7dad480..0abd79679ffbcf2ef738afa120fb189ffdfbb6bb 100644 --- a/src/app/interfaces/environment.ts +++ b/src/app/interfaces/environment.ts @@ -1,10 +1,14 @@ import type { ITableColumn } from '@/app/interfaces/entities'; -export interface ISheet { - sheet_uuid: string; - title: string; - address: string; - entities: IEntity[]; +export interface IPageInfo { + page_uuid: string; + page_title: string; + page_icon: string; + page_navigation_order: string; + entities?: { + entity_uuid: string; + entity_type: 'divider' | 'paragraph' | 'image' | 'table'; + }[]; } export interface IEntity { @@ -33,7 +37,7 @@ export interface IEntity { }[]; } -export type TThemes = +export type TColors = | 'green-blue' | 'red-yellow' | 'darkBlue-pink-orange' diff --git a/src/app/plugins/Cookie.ts b/src/app/plugins/Cookie.ts new file mode 100644 index 0000000000000000000000000000000000000000..0a3fd6285295664bd11cefd7ff92b2cb1ba3977f --- /dev/null +++ b/src/app/plugins/Cookie.ts @@ -0,0 +1,6 @@ +import Cookies from 'universal-cookie'; +const cookies = new Cookies(null, { + path: '/' + // domain: process.env.VUE_APP_COOKIE_DOMAIN +}); +export default cookies; diff --git a/src/app/router/index.ts b/src/app/router/index.ts index 98dcd9051c6891900820960dfe184ced17a95d24..10f5fc7bd982c2edf7daa6f1dcff7a1b4ddfcb9f 100644 --- a/src/app/router/index.ts +++ b/src/app/router/index.ts @@ -1,18 +1,17 @@ import { createRouter, createWebHistory } from 'vue-router'; -import HomePage from '@/pages/HomePage.vue'; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ - { - path: '/', - name: 'home', - component: HomePage - }, { path: '/:sheetUuid', name: 'sheet', - component: () => import('../../pages/[uuid]/SheetPage.vue') + component: () => import('@/pages/[uuid]/SheetPage.vue') + }, + { + path: '/signUp', + name: 'signUp', + component: () => import('@/pages/authorization/signUp.vue') } ] }); diff --git a/src/app/stores/authorization.ts b/src/app/stores/authorization.ts index 846b16051ee3f788dc7872f7fd4a7ba508ec39a2..01a931ccb0dc678492e355e67c434d54e19c0299 100644 --- a/src/app/stores/authorization.ts +++ b/src/app/stores/authorization.ts @@ -1,10 +1,32 @@ import { defineStore } from 'pinia'; import type { IUserData } from '@/app/interfaces/authorization'; +import cookies from '@/app/plugins/Cookie'; export const useAuthorizationStore = defineStore('authorizationStore', () => { - const userUuid = ref('e786de50-f33c-4ef9-9dfe-329eed32b023'); - const userNickName = ref('malyusgun'); + const router = useRouter(); + + const userUuid = ref(''); + const userNickName = ref('malyusgunDmitriyMalyugin'); const userData = ref(); - return { userUuid, userNickName, userData }; + function setUserUuid(uuid: string) { + userUuid.value = uuid; + } + function setUserNickName(nickName: string) { + userNickName.value = nickName; + } + function setUserData(data: IUserData) { + userData.value = data; + } + function logout() { + userUuid.value = ''; + userNickName.value = ''; + userData.value = null; + cookies.remove('user_uuid'); + cookies.remove('current_page_uuid'); + cookies.remove('home_uuid'); + cookies.remove('favorite_color'); + router.push('/signUp'); + } + return { userUuid, userNickName, userData, setUserUuid, setUserNickName, setUserData, logout }; }); diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts index 0e3b2e99ba6071d89c9de63bacaf1547b0dcb13d..6d30c22730be2cc3eac5aadd8ac6335d983d48d2 100644 --- a/src/app/stores/data.ts +++ b/src/app/stores/data.ts @@ -1,5 +1,6 @@ import { defineStore } from 'pinia'; -import type { IEntity } from '@/app/interfaces/environment'; +import type { IEntity, IPageInfo } from '@/app/interfaces/environment'; +import cookies from '@/app/plugins/Cookie'; export const useDataStore = defineStore('dataStore', () => { const sheets = ref([ @@ -53,15 +54,37 @@ export const useDataStore = defineStore('dataStore', () => { } ]); - const homeEntities = ref([]); - - function editHomeEntities(newState: IEntity) { - homeEntities.value = newState; - console.log('homeEntities.value', homeEntities.value); + const pagesData = ref([]); + const currentPage = computed(() => + pagesData.value.find((page) => page.page_uuid === cookies.get('current_page_uuid')) + ); + const entities = ref([]); + function setCurrentPageUuid(uuid: string) { + cookies.set('current_page_uuid', uuid); } - - function setHomeEntities(entities: IEntity[]) { - homeEntities.value = [...entities]; + function setCurrentPageData(data: IPageInfo) { + currentPage.value = data; + } + function setPagesData(data: IPageInfo[]) { + pagesData.value = data; + } + function addPageData(data: IPageInfo) { + pagesData.value.push(data); + } + function editEntities(newState: IEntity[]) { + entities.value = newState.sort( + (entity, prevEntity) => +entity?.entity_order - +prevEntity?.entity_order + ); } - return { sheets, homeEntities, editHomeEntities, setHomeEntities }; + return { + sheets, + entities, + pagesData, + currentPage, + setCurrentPageUuid, + setCurrentPageData, + setPagesData, + addPageData, + editEntities + }; }); diff --git a/src/app/stores/filesWebsocket.ts b/src/app/stores/filesWebsocket.ts index 02dcc58b61115e5748b29c19ba1d3b23084aa821..79087bcf14560870c570256ab032b0d4eb6fbeb6 100644 --- a/src/app/stores/filesWebsocket.ts +++ b/src/app/stores/filesWebsocket.ts @@ -33,6 +33,7 @@ export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => { imageUrl.value = ''; } function sendData(data: unknown) { + console.log('data: ', data); socket.value.send(data); } return { diff --git a/src/app/stores/interface.ts b/src/app/stores/interface.ts index a98f1e4004eaa07da354030b6d048a8188736fd5..c12fa1566aaf8e83ff7443de7e2352f7c5c7f451 100644 --- a/src/app/stores/interface.ts +++ b/src/app/stores/interface.ts @@ -4,56 +4,52 @@ import { useWebsocketStore } from '@/app/stores/websocket'; export const useInterfaceStore = defineStore('interfaceStore', () => { const websocketStore = useWebsocketStore(); - const defaultHomeBackground = ref( + const defaultPageBackground = ref( 'https://t3.ftcdn.net/jpg/05/01/28/98/360_F_501289843_4ITbthNCydFQGgJmoZe4IQKchItBubqZ.jpg' ); - const homeBackground = ref(defaultHomeBackground.value); + const pageBackground = ref(defaultPageBackground.value); const isFetchedForBackground = ref(false); function setIsFetchedForBackground() { isFetchedForBackground.value = true; - console.log('isFetchedForBackground.value', isFetchedForBackground.value); } - - function resetHomeBackground() { - homeBackground.value = defaultHomeBackground.value; + function resetPageBackground() { + pageBackground.value = defaultPageBackground.value; const data = { - event: 'removeHomeBackground' + event: 'deletePageBackground' }; websocketStore.sendData(data); } - function changeHomeBackground(newUrl: string) { - homeBackground.value = newUrl; + function editPageBackground(newUrl: string) { + pageBackground.value = newUrl; const image = new Image(); image.src = newUrl; image.onload = async () => { const response = await fetch(newUrl); const blob = await response.blob(); const data = { - event: 'changeHomeBackground', + event: 'editPageBackground', body: { - setting_name: 'homeBackground', - setting_value: newUrl, + background_url: newUrl, extension: blob.type } }; websocketStore.sendData(data); }; } - function setHomeBackgroundFromDB(url: string | null) { + function setPageBackgroundFromDB(url: string | null) { if (!url) { return; } - homeBackground.value = url; + pageBackground.value = url; } - return { - homeBackground, - defaultHomeBackground, + pageBackground, + defaultPageBackground, isFetchedForBackground, setIsFetchedForBackground, - resetHomeBackground, - changeHomeBackground, - setHomeBackgroundFromDB + resetPageBackground, + editPageBackground, + setPageBackgroundFromDB }; }); diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts index 1cc5d245c0f3676ac48a13dab2a84e50c70db469..450c42a962613f92c7d4f5a0a244ae7c81dff882 100644 --- a/src/app/stores/websocket.ts +++ b/src/app/stores/websocket.ts @@ -4,16 +4,20 @@ import type { IEntity } from '@/app/interfaces/environment'; import { useInterfaceStore } from '@/app/stores/interface'; import { addUrlsToImageEntities } from '@/app/helpers/images'; import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket'; +import { useAuthorizationStore } from '@/app/stores/authorization'; +import cookies from '@/app/plugins/Cookie'; export const useWebsocketStore = defineStore('websocketStore', () => { const dataStore = useDataStore(); + const authorizationStore = useAuthorizationStore(); const interfaceStore = useInterfaceStore(); const filesWebsocketStore = useFilesWebsocketStore(); + const router = useRouter(); const filesBufferLength = computed(() => filesWebsocketStore.filesBuffer.length); - const homeEntities = computed(() => dataStore.homeEntities); + const entities = computed(() => dataStore.entities); const imageEntitiesCount = computed( - () => homeEntities.value.filter((entity) => entity?.image_width).length + () => entities.value.filter((entity) => entity?.image_width).length ); const socket = ref(); @@ -24,55 +28,120 @@ export const useWebsocketStore = defineStore('websocketStore', () => { onMounted(() => { socket.value = new WebSocket('ws://localhost:5000'); socket.value.onopen = async () => { - socket.value.send(JSON.stringify(initialDataToSend.value)); + const userUuid = cookies.get('user_uuid'); + console.log('userUuid', userUuid); + if (userUuid) { + const getUserData = { + event: 'getUser', + body: { + user_uuid: userUuid + } + }; + sendData(getUserData); + const pageUuid = cookies.get('current_page_uuid'); + const getPageData = { + event: 'getPage', + body: { + page_uuid: pageUuid + } + }; + sendData(getPageData); + } + if (initialDataToSend.value) socket.value.send(JSON.stringify(initialDataToSend.value)); }; socket.value.onmessage = async (event: any) => { const response = JSON.parse(event.data); console.log('response: ', response); switch (response.event) { - case 'getHomeEntities': { - const entities = response.data; - if (imageEntitiesCount.value && filesBufferLength.value === imageEntitiesCount.value) { - const entitiesAddedUrls = addUrlsToImageEntities(entities); - dataStore.editHomeEntities(entitiesAddedUrls); - } else { - dataStore.editHomeEntities(entities); - } + // create + case 'createUser': { + cookies.set('user_uuid', response.data.user_uuid); + const pagesUuid = response.data.pages_uuid; + const homePageUuid = pagesUuid[0]; + const userSettings = response.data.settings; + cookies.set('favorite_color', userSettings.favorite_color); + cookies.set('home_uuid', homePageUuid); + const getUserData = { + event: 'getUser', + body: { + user_uuid: response.data.user_uuid + } + }; + sendData(getUserData); + const getPageData = { + event: 'getPage', + body: { + page_uuid: homePageUuid + } + }; + sendData(getPageData); + await router.push(`/${homePageUuid}`); break; } - case 'getHomeBackground': { - const blob = new Blob([response.data.setting_value.data], { - type: `image/jpeg` - }); - const url = URL.createObjectURL(blob); - interfaceStore.setHomeBackgroundFromDB(url); + case 'createPage': { + dataStore.addPageData(response.data); break; } - case 'createHomeEntity': { - const entities = [...homeEntities.value]; + case 'createEntity': { + const newState = [...entities.value]; if (response.data?.image_width) { response.data.imageUrl = filesWebsocketStore.imageUrl; filesWebsocketStore.cleanImageUrl(); } - entities.push(response.data); - dataStore.editHomeEntities([...entities]); + newState.push(response.data); + dataStore.editEntities([...newState]); break; } - case 'createImageHomeEntity': { + case 'createImageEntity': { if (!file.value) break; + const page_uuid = cookies.get('current_page_uuid'); const data = { - event: 'createHomeEntity', + event: 'createEntity', body: { - ...file.value + ...file.value, + page_uuid } }; file.value = null; sendData(data); break; } - case 'editHomeEntity': { - let entities = [...homeEntities.value]; - entities = entities.map((entity: IEntity) => { + // read + case 'getUser': { + authorizationStore.setUserNickName(response.data.nick_name); + authorizationStore.setUserData(response.data); + dataStore.setPagesData(response.data.pages_uuid); + console.log('getUser response.data: ', response.data); + break; + } + case 'getPage': { + dataStore.setCurrentPageUuid(response.data.page_uuid); + dataStore.setCurrentPageData(response.data); + console.log('getPage response.data: ', response.data); + break; + } + case 'getPageEntities': { + const newState = response.data; + if (imageEntitiesCount.value && filesBufferLength.value === imageEntitiesCount.value) { + const entitiesAddedUrls = addUrlsToImageEntities(newState); + dataStore.editEntities(entitiesAddedUrls); + } else { + dataStore.editEntities(newState); + } + break; + } + case 'getPageBackground': { + const blob = new Blob([response.data.setting_value.data], { + type: `image/jpeg` + }); + const url = URL.createObjectURL(blob); + interfaceStore.setPageBackgroundFromDB(url); + break; + } + // update + case 'editEntity': { + let newState = [...entities.value]; + newState = newState.map((entity: IEntity) => { if (entity.entity_uuid !== response.data.entity_uuid) return entity; if (response.data?.image_width) { response.data.imageUrl = filesWebsocketStore.imageUrl; @@ -80,34 +149,31 @@ export const useWebsocketStore = defineStore('websocketStore', () => { } return response.data; }); - dataStore.editHomeEntities(entities); + dataStore.editEntities(newState); break; } - case 'deleteHomeEntity': { - let newState = [...homeEntities.value]; - newState = newState.filter( - (entity: IEntity) => entity.entity_uuid !== response.data.entity_uuid + case 'changeEntitiesOrder': { + const mainEntity = response.data.main; + const mainEntityIndex = entities.value.findIndex( + (entity) => entity.entity_uuid === mainEntity.entity_uuid ); - dataStore.editHomeEntities(newState); + const newState = [...entities.value]; + if (mainEntity.entity_order > newState[mainEntityIndex].entity_order!) { + newState[mainEntityIndex + 1].entity_order = newState[mainEntityIndex].entity_order; + } else { + newState[mainEntityIndex - 1].entity_order = newState[mainEntityIndex].entity_order; + } + newState[mainEntityIndex] = { ...mainEntity }; + dataStore.editEntities(newState); break; } - case 'changeOrderHomeEntity': { - const newState = [...homeEntities.value]; - const entityIndex = newState.findIndex( - (entity: IEntity) => entity.entity_uuid === response.data.entity_uuid + // delete + case 'deleteEntity': { + let newState = [...entities.value]; + newState = newState.filter( + (entity: IEntity) => entity.entity_uuid !== response.data.entity_uuid ); - if (response.data.direction === 'up') { - [newState[entityIndex], newState[entityIndex - 1]] = [ - newState[entityIndex - 1], - newState[entityIndex] - ]; - } else { - [newState[entityIndex], newState[entityIndex + 1]] = [ - newState[entityIndex + 1], - newState[entityIndex] - ]; - } - dataStore.editHomeEntities(newState); + dataStore.editEntities(newState); break; } } @@ -120,25 +186,25 @@ export const useWebsocketStore = defineStore('websocketStore', () => { }; }); - watch([filesBufferLength, homeEntities], () => { + watch([filesBufferLength, entities], () => { if ( - (homeEntities.value.length && + (entities.value.length && filesBufferLength.value === imageEntitiesCount.value && imageEntitiesCount.value) || (isInitialAddUrlsToImageEntitiesFinished.value && filesBufferLength.value) ) { - const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value); - dataStore.setHomeEntities(entitiesAddedUrls); + const entitiesAddedUrls = addUrlsToImageEntities(entities.value); + dataStore.editEntities(entitiesAddedUrls); isInitialAddUrlsToImageEntitiesFinished.value = true; } }); - function setFileData(data: any) { + function setFileData(data: IEntity) { file.value = data; } - function setInitialDataToSend(data: any) { + function setInitialDataToSend(data) { initialDataToSend.value = data; } - function sendData(data: any) { + function sendData(data) { socket.value.send(JSON.stringify(data)); } return { diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue index e8a699352cf7201e2991258dd49b4bf461fe199b..c52ea6e5281b778fa8722f91efb0c7eeea1ee533 100644 --- a/src/components/CreateEntityMenu.vue +++ b/src/components/CreateEntityMenu.vue @@ -1,8 +1,8 @@ diff --git a/src/components/UserInfoHeaderWithSettings.vue b/src/components/UserInfoHeaderWithSettings.vue deleted file mode 100644 index 0264faa62e6277032fc429315319a743bce181d5..0000000000000000000000000000000000000000 --- a/src/components/UserInfoHeaderWithSettings.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/src/components/entities/image/ImagePositionMenu.vue b/src/components/entities/image/ImagePositionMenu.vue index 8a7e919c9f61b4249e41319888743dcb8634a0f3..612cb40438c2fd3c52c2379cf5e2d0a9417d170d 100644 --- a/src/components/entities/image/ImagePositionMenu.vue +++ b/src/components/entities/image/ImagePositionMenu.vue @@ -2,7 +2,7 @@ import { useDataStore } from '@/app/stores/data'; import type { IImage } from '@/app/interfaces/entities'; import type { IEntity } from '@/app/interfaces/environment'; -import { changeOrderHomeEntity } from '@/app/helpers'; +import { changeEntitiesOrder } from '@/app/helpers'; interface Props { entityData: IImage; @@ -16,13 +16,11 @@ const emit = defineEmits([ ]); const dataStore = useDataStore(); -const homeEntities = computed(() => dataStore.homeEntities); +const entities = computed(() => dataStore.entities); const position = computed(() => props.entityData.entity_position); const titlePosition = computed(() => props.entityData.entity_title_position); const entityIndex = computed(() => - homeEntities.value.findIndex( - (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid - ) + entities.value.findIndex((entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid) ); const speedDialMove = computed(() => { @@ -81,14 +79,14 @@ const speedDialMove = computed(() => { state.push({ label: 'Up', icon: 'pi pi-arrow-up', - command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up') + command: () => changeEntitiesOrder(props.entityData.entity_uuid, 'up') }); } - if (entityIndex.value !== homeEntities.value.length - 1) { + if (entityIndex.value !== entities.value.length - 1) { state.push({ label: 'Down', icon: 'pi pi-arrow-down', - command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down') + command: () => changeEntitiesOrder(props.entityData.entity_uuid, 'down') }); } if (props.entityData?.text || props.entityData?.text === '') { diff --git a/src/components/entities/image/ImageSizeMenu.vue b/src/components/entities/image/ImageSizeMenu.vue index ddff4c700e374c887070a95ef925d6bba275cc59..7a42aef6c64da638afa95ee51d1c0403898d2f15 100644 --- a/src/components/entities/image/ImageSizeMenu.vue +++ b/src/components/entities/image/ImageSizeMenu.vue @@ -66,7 +66,7 @@ const speedDialSizeBigger = computed(() => {