From 5db54b6a62ab74e0f30982e8e000c128caf6e310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org>
Date: Wed, 11 Oct 2023 16:02:54 +0200
Subject: [PATCH] move images to localstorage

---
 frontend/package-lock.json                    |  6 ---
 frontend/package.json                         |  1 -
 frontend/src/components/inputs/ImageInput.vue | 10 +++-
 .../components/reload/AutoReloadCheckbox.vue  |  3 +-
 frontend/src/main.js                          |  2 -
 frontend/src/utils.js                         | 52 +++++++++++++++----
 .../basic_photo_banner/BasicPhotoBanner.vue   | 15 ++++--
 .../src/views/basic_photo_banner/canvas.js    |  2 +
 .../views/facebook_survey/FacebookSurvey.vue  | 13 +++--
 .../NewspaperQuoteBottom.vue                  | 13 +++--
 .../NewspaperQuoteMiddle.vue                  | 13 +++--
 frontend/src/views/text_banner/TextBanner.vue | 21 +++++---
 frontend/src/views/text_banner/canvas.js      |  6 +--
 .../views/twitter_banner/TwitterBanner.vue    | 13 +++--
 .../UrgentBasicPhotoBanner.vue                | 13 +++--
 .../urgent_text_banner/UrgentTextBanner.vue   | 21 +++++---
 .../src/views/urgent_text_banner/canvas.js    |  5 +-
 17 files changed, 147 insertions(+), 62 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0941da17..f8f447cf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,6 @@
         "alertifyjs": "^1.13.1",
         "fabric": "^5.3.0",
         "vue": "^3.2.47",
-        "vue-cookies": "^1.8.3",
         "vue-meta": "^3.0.0-alpha.2",
         "vue-router": "^4.1.6",
         "vue-select": "^4.0.0-beta.6"
@@ -4485,11 +4484,6 @@
         "@vue/shared": "3.2.47"
       }
     },
-    "node_modules/vue-cookies": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
-      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
-    },
     "node_modules/vue-eslint-parser": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.2.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1ec6074e..fa3c2117 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,6 @@
     "alertifyjs": "^1.13.1",
     "fabric": "^5.3.0",
     "vue": "^3.2.47",
-    "vue-cookies": "^1.8.3",
     "vue-meta": "^3.0.0-alpha.2",
     "vue-router": "^4.1.6",
     "vue-select": "^4.0.0-beta.6"
diff --git a/frontend/src/components/inputs/ImageInput.vue b/frontend/src/components/inputs/ImageInput.vue
index 1f5802be..d6541400 100644
--- a/frontend/src/components/inputs/ImageInput.vue
+++ b/frontend/src/components/inputs/ImageInput.vue
@@ -51,7 +51,13 @@ export default {
                 this.$emit('update:modelValue', image)
             }
 
-            image.src = window.URL.createObjectURL(file)
+            const reader = new FileReader()
+
+            reader.onloadend = () => {
+                image.src = reader.result
+            }
+
+            reader.readAsDataURL(file)
         },
         setSelectedImage (value) {
             this.selectedImage = value
@@ -84,7 +90,7 @@ export default {
         }
     },
     mounted () {
-        if (this.selectedImage) {
+        if (this.selectedImage && !this.modelValue) {
             this.setSelectedImage(this.selectedImage)
         }
     }
diff --git a/frontend/src/components/reload/AutoReloadCheckbox.vue b/frontend/src/components/reload/AutoReloadCheckbox.vue
index 679a8082..ca04a46e 100644
--- a/frontend/src/components/reload/AutoReloadCheckbox.vue
+++ b/frontend/src/components/reload/AutoReloadCheckbox.vue
@@ -11,7 +11,8 @@
             id="auto-reload-checkbox"
             name="auto-reload-checkbox"
             type="checkbox"
-            @input="$emit('update:modelValue', $event.target.value)"
+            :checked="modelValue"
+            @input="$emit('update:modelValue', $event.target.checked)"
         >
         <label
             for="auto-reload-checkbox"
diff --git a/frontend/src/main.js b/frontend/src/main.js
index ef906641..e30ce3c7 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,11 +3,9 @@ import './index.css'
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
-import VueCookies from 'vue-cookies'
 
 const app = createApp(App)
 
 app.use(router)
-app.use(VueCookies, {})
 
 app.mount('#app')
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index f08cd252..5c0f2ecb 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -25,25 +25,55 @@ const clearNullsFromArray = (originalArray) => {
 }
 
 
-const loadDataFromCookie = (cookies, data) => {
-    if (cookies.isKey("canvas_properties")) {
-        let dataCookie = {}
-
-        try {
-            dataCookie = cookies.get("canvas_properties")
-        } catch (exception) {
-            cookies.remove("canvas_properties")
-        }
+const updateAutoRedrawStorage = (autoRedraw) => {
+    window.sessionStorage.setItem("auto_redraw", JSON.stringify(autoRedraw))
+}
+
 
-        for (const [key, value] of Object.entries(dataCookie)) {
+const loadCanvasStorage = (data) => {
+    const canvasProperties = JSON.parse(window.sessionStorage.getItem("canvas_properties"))
+    const autoRedraw = JSON.parse(window.sessionStorage.getItem("auto_redraw"))
+
+    if (canvasProperties) {
+        for (const [key, value] of Object.entries(canvasProperties)) {
             if (!(key in data)) {
                 continue
             }
 
+            if (key.toLowerCase().endsWith("image") && value) {
+                const image = new Image()
+                image.src = value
+
+                data[key] = image
+
+                continue
+            }
+
             data[key] = value
         }
     }
+
+    if (autoRedraw) {
+        data.autoRedraw = autoRedraw
+    }
+}
+
+
+const setCanvasStorage = (data) => {
+    let processedData = {}
+
+    for (const [key, value] of Object.entries(data)) {
+        if (key.toLowerCase().endsWith("image") && value) {
+            processedData[key] = value.src
+
+            continue
+        }
+
+        processedData[key] = value
+    }
+
+    window.sessionStorage.setItem("canvas_properties", JSON.stringify(processedData))
 }
 
 
-export { loadFonts, clearNullsFromArray, loadDataFromCookie }
+export { loadFonts, clearNullsFromArray, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage }
diff --git a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
index bcefd5ba..af93b6d3 100644
--- a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
+++ b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
@@ -5,7 +5,7 @@ import COLORS from '../../colors'
 import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue'
 import redraw from './canvas'
@@ -75,7 +75,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -94,7 +94,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -118,7 +118,14 @@ export default {
                 deep: true
             }
         )
-    }
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
+    },
 }
 </script>
 
diff --git a/frontend/src/views/basic_photo_banner/canvas.js b/frontend/src/views/basic_photo_banner/canvas.js
index 83781443..4b698169 100644
--- a/frontend/src/views/basic_photo_banner/canvas.js
+++ b/frontend/src/views/basic_photo_banner/canvas.js
@@ -319,6 +319,8 @@ const redraw = async (canvas, options) => {
 
     /* BEGIN Main image render */
 
+    console.log(options.mainImage, mainImage, options.mainImage.src)
+
     if (
         options.mainImage !== null
         && (
diff --git a/frontend/src/views/facebook_survey/FacebookSurvey.vue b/frontend/src/views/facebook_survey/FacebookSurvey.vue
index 8d24795b..c8164f15 100644
--- a/frontend/src/views/facebook_survey/FacebookSurvey.vue
+++ b/frontend/src/views/facebook_survey/FacebookSurvey.vue
@@ -4,7 +4,7 @@ import { watch, ref } from 'vue'
 import COLORS from '../../colors'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue'
 import redraw from './canvas'
@@ -75,7 +75,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -96,7 +96,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -122,6 +122,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
diff --git a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
index 7ad84bc5..e622aae3 100644
--- a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
+++ b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
@@ -6,7 +6,7 @@ import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
 import { SOURCE_IMAGES } from '../utils/newspaper_quotes'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue'
 import redraw from './canvas';
@@ -85,7 +85,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -104,7 +104,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -128,6 +128,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
diff --git a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
index fdbbcc87..bc36a096 100644
--- a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
+++ b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
@@ -6,7 +6,7 @@ import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
 import { SOURCE_IMAGES } from '../utils/newspaper_quotes'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue'
 import redraw from './canvas';
@@ -90,7 +90,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -108,7 +108,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -131,6 +131,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
diff --git a/frontend/src/views/text_banner/TextBanner.vue b/frontend/src/views/text_banner/TextBanner.vue
index 9b7d3748..012f3e84 100644
--- a/frontend/src/views/text_banner/TextBanner.vue
+++ b/frontend/src/views/text_banner/TextBanner.vue
@@ -4,7 +4,7 @@ import { watch, ref } from 'vue';
 import COLORS from '../../colors';
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue';
 import redraw from './canvas';
@@ -45,7 +45,7 @@ export default {
         }
 
         let data = {
-            text: null,
+            mainText: null,
             logoImage: null,
             colorLabels: {
                 background: 'Pozadí',
@@ -60,14 +60,14 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
     methods: {
         async reloadCanvasProperties () {
             const canvasProperties = {
-                text: this.text,
+                mainText: this.mainText,
                 logoImage: this.logoImage,
                 colors: this.colors
             }
@@ -75,13 +75,13 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
         this.$watch(
             vm => [
-                vm.text,
+                vm.mainText,
                 vm.logoImage,
                 vm.colors
             ],
@@ -95,6 +95,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
@@ -126,7 +133,7 @@ export default {
                 />
                 <LongTextInput
                     name="Text"
-                    v-model="text"
+                    v-model="mainText"
                     :important="true"
                     :highlightable="true"
                     zIndex="10"
diff --git a/frontend/src/views/text_banner/canvas.js b/frontend/src/views/text_banner/canvas.js
index 3c614fd3..65dd4ae4 100644
--- a/frontend/src/views/text_banner/canvas.js
+++ b/frontend/src/views/text_banner/canvas.js
@@ -91,11 +91,11 @@ const redraw = async (canvas, options) => {
     /* END Logo render */
 
 
-    if (options.text !== null) {
+    if (options.mainText !== null) {
         /* BEGIN Text render */
 
         const highlightedData = transformHighlightedText(
-            options.text,
+            options.mainText,
             textSize,
             textBoxWidth,
             'Bebas Neue',
@@ -163,7 +163,7 @@ const redraw = async (canvas, options) => {
                 left: (
                     arrowMarginLeft
                     + (
-                        (options.text[0] === "*") ?
+                        (options.mainText[0] === "*") ?
                         arrowMarginLeftExtra : 0
                     )
                 ),
diff --git a/frontend/src/views/twitter_banner/TwitterBanner.vue b/frontend/src/views/twitter_banner/TwitterBanner.vue
index 3d9742dc..9ae28dce 100644
--- a/frontend/src/views/twitter_banner/TwitterBanner.vue
+++ b/frontend/src/views/twitter_banner/TwitterBanner.vue
@@ -4,7 +4,7 @@ import { watch, ref } from 'vue'
 import COLORS from '../../colors'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import defaultDarkLogoImage from '../../assets/logos/default-dark.png'
 
@@ -89,7 +89,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -108,7 +108,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -132,6 +132,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
diff --git a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
index 35907f72..c9ee6447 100644
--- a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
+++ b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
@@ -5,7 +5,7 @@ import COLORS from '../../colors'
 import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue'
 import redraw from '../basic_photo_banner/canvas'
@@ -75,7 +75,7 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
@@ -94,7 +94,7 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
@@ -118,6 +118,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
diff --git a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
index 0b1ddded..8b63b48d 100644
--- a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
+++ b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
@@ -4,7 +4,7 @@ import { watch, ref } from 'vue';
 import COLORS from '../../colors';
 import TEMPLATES from '../../templates'
 import { LOGOS } from '../../logos'
-import { loadFonts, loadDataFromCookie } from '../../utils'
+import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils'
 
 import Canvas from '../../components/canvas/Canvas.vue';
 import redraw from './canvas';
@@ -47,7 +47,7 @@ export default {
         }
 
         let data = {
-            text: null,
+            mainText: null,
             logoImage: null,
             colorLabels: {
                 background: 'Pozadí',
@@ -66,14 +66,14 @@ export default {
             autoRedraw: false
         }
 
-        loadDataFromCookie($cookies, data)
+        loadCanvasStorage(data)
 
         return data
     },
     methods: {
         async reloadCanvasProperties () {
             const canvasProperties = {
-                text: this.text,
+                mainText: this.mainText,
                 logoImage: this.logoImage,
                 colors: this.colors
             }
@@ -81,13 +81,13 @@ export default {
             await this.$refs.canvas.redraw(canvasProperties)
 
             await delete canvasProperties.colors
-            $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
+            setCanvasStorage(canvasProperties)
         }
     },
     mounted () {
         this.$watch(
             vm => [
-                vm.text,
+                vm.mainText,
                 vm.logoImage,
                 vm.colors
             ],
@@ -101,6 +101,13 @@ export default {
                 deep: true
             }
         )
+
+        this.$watch(
+            vm => [vm.autoRedraw],
+            async (value) => {
+                updateAutoRedrawStorage(this.autoRedraw)
+            }
+        )
     }
 }
 </script>
@@ -132,7 +139,7 @@ export default {
                 />
                 <LongTextInput
                     name="Text"
-                    v-model="text"
+                    v-model="mainText"
                     :important="true"
                     :highlightable="false"
                     zIndex="10"
diff --git a/frontend/src/views/urgent_text_banner/canvas.js b/frontend/src/views/urgent_text_banner/canvas.js
index 9059a4e1..300d2173 100644
--- a/frontend/src/views/urgent_text_banner/canvas.js
+++ b/frontend/src/views/urgent_text_banner/canvas.js
@@ -87,13 +87,12 @@ const redraw = async (canvas, options) => {
 
     /* END Logo render */
 
-
     /* BEGIN Text render */
 
-    if (options.text !== null) {
+    if (options.mainText !== null) {
         textBox = new fabric.Textbox(
             transformTextLineBreaks(
-                options.text,
+                options.mainText,
                 textSize,
                 'Bebas Neue',
                 textBoxWidth
-- 
GitLab