diff --git a/package-lock.json b/package-lock.json index 6f490cb7a8595cf33c62d392f4fe34b0fd99903c..dadd3a1b4a6ccf8c5d69d83f2199a34f5f7977f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3824,7 +3824,6 @@ "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", - "sass": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" @@ -3839,9 +3838,6 @@ "lightningcss": { "optional": true }, - "sass": { - "optional": true - }, "stylus": { "optional": true }, diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts index 675d2782caf4d15c6130ef5f8a6c7429071de55b..f0b0eb889ed209911732af7515e4049153be64b7 100644 --- a/src/app/helpers/index.ts +++ b/src/app/helpers/index.ts @@ -2,6 +2,7 @@ import { useInterfaceStore } from '@/app/stores/interface'; import type { IEntity } from '@/app/interfaces/environment'; import { useDataStore } from '@/app/stores/data'; import { useWebsocketStore } from '@/app/stores/websocket'; +import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket'; export async function uploadFile($event: Event) { const target = $event.target as HTMLInputElement; @@ -58,3 +59,21 @@ export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'dow }; websocketStore.sendData(data); }; + +export function addUrlsToImageEntities(entities: IEntity[]) { + const filesWebsocketStore = useFilesWebsocketStore(); + const filesBlob = filesWebsocketStore.filesBlob; + let index = 0; + console.log('filesBlob[0].data', filesBlob[0]); + console.log('filesBlob[0].data', filesBlob[0]); + console.log('filesBlob.length', filesBlob.length); + return entities.map((entity: IEntity) => { + if (!entity.image_width) return entity; + filesBlob[index] = new Blob([filesBlob[index]], { type: 'image/jpeg' }); + entity.imageUrl = URL.createObjectURL(filesBlob[index]); + console.log('entity.imageUrl', entity.imageUrl); + index += 1; + console.log('filesBlob.length', filesBlob.length); + return entity; + }); +} diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts index a0f290d06f365453a4da8ded629dbfb8584c0921..e1159fed91ddc9cd8f6104cd084dec107e747612 100644 --- a/src/app/interfaces/environment.ts +++ b/src/app/interfaces/environment.ts @@ -16,6 +16,7 @@ export interface IEntity { font_size?: string; paragraph_size?: string; text_position?: string; + image_blob?: string; image_url?: string; image_width?: number; image_height?: number; diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts index bbd53f45806d3744512dff576e4ce2ea209e3e5d..c19d38965f5e4589fc433aab6cc0bc3285193bca 100644 --- a/src/app/stores/data.ts +++ b/src/app/stores/data.ts @@ -60,7 +60,7 @@ export const useDataStore = defineStore('dataStore', () => { } function setHomeEntities(entities: IEntity[]) { - homeEntities.value = entities; + homeEntities.value = [...entities]; } return { sheets, homeEntities, editHomeEntities, setHomeEntities }; }); diff --git a/src/app/stores/filesWebsocket.ts b/src/app/stores/filesWebsocket.ts new file mode 100644 index 0000000000000000000000000000000000000000..44e27a4e2067c5bf2a86a324598adc8dbeaa4508 --- /dev/null +++ b/src/app/stores/filesWebsocket.ts @@ -0,0 +1,50 @@ +import { defineStore } from 'pinia'; +import { useDataStore } from '@/app/stores/data'; +import type { IEntity } from '@/app/interfaces/environment'; +import { useInterfaceStore } from '@/app/stores/interface'; +import { useWebsocketStore } from '@/app/stores/websocket'; + +export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => { + const socket = ref(); + const dataStore = useDataStore(); + const interfaceStore = useInterfaceStore(); + const homeEntities = computed(() => dataStore.homeEntities); + const filesBlob = ref([]); + + onMounted(() => { + socket.value = new WebSocket('ws://localhost:5001'); + socket.value.binaryType = 'arraybuffer'; + socket.value.onmessage = (response: any) => { + console.log('response: ', response); + switch (response?.event) { + case 'changeHomeBackgroundUrl': + interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value); + break; + case 'editImageHomeEntity': { + let entities = [...dataStore.homeEntities]; + entities = entities.map((entity: IEntity) => { + if (entity.entity_uuid !== response.data.entity_uuid) return entity; + return response.data; + }); + dataStore.editHomeEntities(entities); + break; + } + default: { + console.log('default'); + filesBlob.value.push(response); + } + } + }; + socket.value.onclose = () => { + console.log('Websocket connection closed'); + }; + socket.value.onerror = () => { + console.log('Websocket caught an error'); + }; + }); + + function sendData(data: any) { + socket.value.send(data); + } + return { filesBlob, sendData }; +}); diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts index 20ea30571b2ebf132a2ebfdf0f74bbec81511c17..ab36840309aaf149721f0a25b4c3e67ecb848435 100644 --- a/src/app/stores/websocket.ts +++ b/src/app/stores/websocket.ts @@ -2,17 +2,23 @@ import { defineStore } from 'pinia'; import { useDataStore } from '@/app/stores/data'; import type { IEntity } from '@/app/interfaces/environment'; import { useInterfaceStore } from '@/app/stores/interface'; +import { addUrlsToImageEntities } from '@/app/helpers'; +import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket'; export const useWebsocketStore = defineStore('websocketStore', () => { const socket = ref(); const dataStore = useDataStore(); const interfaceStore = useInterfaceStore(); + const filesWebsocketStore = useFilesWebsocketStore(); const homeEntities = computed(() => dataStore.homeEntities); - + const file = ref(); + const filesBlobLength = computed(() => filesWebsocketStore.filesBlob.length); + function setFileData(data: any) { + file.value = data; + } onMounted(() => { socket.value = new WebSocket('ws://localhost:5000'); socket.value.onopen = () => { - console.log('Websocket opened'); const getHomeEntitiesData = { event: 'getHomeEntities' }; @@ -23,12 +29,20 @@ export const useWebsocketStore = defineStore('websocketStore', () => { socket.value.send(JSON.stringify(getHomeBackgroundUrlData)); }; socket.value.onmessage = (event: any) => { + console.log('event: ', event); const response = JSON.parse(event.data); console.log('response: ', response); switch (response.event) { - case 'getHomeEntities': - dataStore.editHomeEntities(response.data); + case 'getHomeEntities': { + const entities = response.data; + if (filesBlobLength.value) { + const entitiesAddedUrls = addUrlsToImageEntities(entities); + dataStore.editHomeEntities(entitiesAddedUrls); + } else { + dataStore.editHomeEntities(entities); + } break; + } case 'getHomeBackgroundUrl': interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value); break; @@ -38,6 +52,18 @@ export const useWebsocketStore = defineStore('websocketStore', () => { dataStore.editHomeEntities([...entities]); break; } + case 'createImageHomeEntity': { + const data = { + event: 'createHomeEntity', + body: { + ...file.value + } + }; + console.log('send now:'); + sendData(data); + console.log('sent!'); + break; + } case 'editHomeEntity': { let entities = [...dataStore.homeEntities]; entities = entities.map((entity: IEntity) => { @@ -83,8 +109,15 @@ export const useWebsocketStore = defineStore('websocketStore', () => { }; }); + watch(filesBlobLength, () => { + console.log('watch'); + const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value); + console.log('entitiesAddedUrls', entitiesAddedUrls); + dataStore.setHomeEntities(entitiesAddedUrls); + }); + function sendData(data: any) { socket.value.send(JSON.stringify(data)); } - return { sendData }; + return { sendData, setFileData }; }); diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue index 58ba27209b0d4aff358b07550d64c499121fd94f..bd8d27bb868de6e460a288fed71f159927c9609b 100644 --- a/src/components/CreateEntityMenu.vue +++ b/src/components/CreateEntityMenu.vue @@ -29,12 +29,12 @@ const addImage = async (files: FileList) => { console.log('url: ', url); const response = await fetch(url); const blob = await response.blob(); + const buffer = await blob.arrayBuffer(); console.log('blob: ', blob); emit('addEntity', { entity_type: 'image', entity_uuid: imageUuid, - // image_url: image.src, - image_url: blob, + image_blob: buffer, entity_position: 'left', entity_title_position: 'center', image_width: image.width, diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue index fec8d712cdaa61f2ad4939575327b42f4443dbb4..7f491a041fdd98f878d676c633126e8af5e0db95 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/HomePage.vue @@ -7,8 +7,8 @@ import { useAuthorizationStore } from '@/app/stores/authorization'; import { useWebsocketStore } from '@/app/stores/websocket'; import type { IEntity } from '@/app/interfaces/environment'; import type { IImageMainInfo } from '@/app/interfaces/index.ts'; -import { createClient } from '@supabase/supabase-js'; import { v4 as uuidv4 } from 'uuid'; +import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket'; const backgroundImage = ref(); const { height: backgroundImageHeight } = useElementSize(backgroundImage); @@ -21,12 +21,19 @@ const dataStore = useDataStore(); const interfaceStore = useInterfaceStore(); const authorizationStore = useAuthorizationStore(); const websocketStore = useWebsocketStore(); +const filesWebsocketStore = useFilesWebsocketStore(); const entities = computed(() => dataStore.homeEntities); - +watchEffect(() => { + console.log('entities', entities.value, entities); +}); const backgroundUrl = computed(() => interfaceStore.homeBackgroundUrl); const defaultBackgroundUrl = computed(() => interfaceStore.defaultHomeBackgroundUrl); -const addEntity = (newEntity: IEntity) => { +function addEntity(newEntity: IEntity) { + if (newEntity.image_blob) { + websocketStore.setFileData(newEntity); + return filesWebsocketStore.sendData(newEntity.image_blob); + } const data = { event: 'createHomeEntity', body: { @@ -34,9 +41,9 @@ const addEntity = (newEntity: IEntity) => { } }; websocketStore.sendData(data); -}; +} -const imageInfo = ref({ +const backgroundImageInfo = ref({ image_url: backgroundUrl.value, image_width: 0, image_height: 0 @@ -53,9 +60,9 @@ function uploadFile($event: Event) { const url = URL.createObjectURL(file); image.src = url; image.onload = function () { - imageInfo.value.image_url = url; - imageInfo.value.image_width = image.width; - imageInfo.value.image_height = image.height; + backgroundImageInfo.value.image_url = url; + backgroundImageInfo.value.image_width = image.width; + backgroundImageInfo.value.image_height = image.height; openUploadFileModal(); }; } @@ -69,6 +76,15 @@ function saveImage(finalImageUrl: string) { const splitterHeight = computed(() => { return splitterPanelBackgroundHeight.value + entitiesHeight.value + 100; }); + +// function submitImage(e) { +// console.log('e.target.files[0]: ', e.target.files[0]); +// fetch('http://localhost:8000', { +// method: 'post', +// headers: { 'Content-Type': `multipart/form-data; boundary=8800-5553535` }, +// body: e.target.files[0] +// }); +// }