Migrate to Planner State & Syncing

backend/backend.ts

@@ -12,9 +12,10 @@
 import { generateSlug } from "random-word-slugs";
 
 import {FactoryData} from "./models/FactoyDataSchema";
+import {PlannerState as PlannerStateSchema} from "./models/PlannerState";
 import {User} from "./models/UsersSchema";
 import {Share, ShareDataSchema} from "./models/ShareSchema";
-import {Factory} from "./interfaces/FactoryInterface";
+import {Factory, FactoryTab, PlannerState} from "./interfaces/FactoryInterface";
 
 dotenv.config();
 
@@ -195,49 +196,68 @@
 });
 
 // Save Data Endpoint
 app.post('/save', authenticate, async (req: AuthenticatedRequest & TypedRequestBody<{ data: any }>, res: Express.Response) => {
   try {
     const { username } = req.user as jwt.JwtPayload & { username: string };
-    const factoryData: Factory[] = req.body;
+    const plannerState: PlannerState = req.body;
+
+    const tabs = plannerState.tabs;
+
+    // Limit the number of tabs to prevent abuse
+    if (tabs.length > 25) {
+      console.warn(`User ${username} tried to save a planner state with too many tabs!`);
+      plannerState.tabs = tabs.slice(0, 25);
+    }
 
     // Check users are not doing naughty things with the notes and task fields
-    factoryData.forEach((factory) => {
-      if (factory.name.length > 200) {
-        console.warn(`User ${username} tried to save a factory name that was too long!`);
-        factory.name = factory.name.substring(0, 200);
+    tabs.forEach((tab: FactoryTab) => {
+      // Limit the number of factories in a tab to prevent abuse
+      if (tab.factories.length > 50) {
+        console.warn(`User ${username} tried to save a tab with too many factories!`);
+        tab.factories = tab.factories.slice(0, 50);
       }
 
-      if (factory.notes && factory.notes.length > 1000) {
-        console.warn(`User ${username} tried to save a notes field that was too long!`);
-        factory.notes = factory.notes.substring(0, 1000);
-      }
+      tab.factories.forEach((factory: Factory) => {
+        if (factory.name.length > 200) {
+          console.warn(`User ${username} tried to save a factory name that was too long!`);
+          factory.name = factory.name.substring(0, 200);
+        }
 
-      if (factory.tasks) {
-        // Make sure it doesn't exceed a certain character limit
-        factory.tasks.forEach((task) => {
-          if (task.title.length > 200) {
-            console.warn(`User ${username} tried to save a factory task that was way too long!`);
-            task.title = task.title.substring(0, 200);
-          }
-        });
+        if (factory.notes && factory.notes.length > 1000) {
+          console.warn(`User ${username} tried to save a notes field that was too long!`);
+          factory.notes = factory.notes.substring(0, 1000);
+        }
 
-        // Make sure they can't take the piss with a stupid number of tasks
-        if (factory.tasks.length > 50) {
-          console.warn(`User ${username} tried to save a factory with too many tasks!`);
-          factory.tasks = factory.tasks.slice(0, 50);
+        if (factory.tasks) {
+          // Make sure it doesn't exceed a certain character limit
+          factory.tasks.forEach((task) => {
+            if (task.title.length > 200) {
+              console.warn(`User ${username} tried to save a factory task that was way too long!`);
+              task.title = task.title.substring(0, 200);
+            }
+          });
+
+          // Make sure they can't take the piss with a stupid number of tasks
+          if (factory.tasks.length > 50) {
+            console.warn(`User ${username} tried to save a factory with too many tasks!`);
+            factory.tasks = factory.tasks.slice(0, 50);
+          }
         }
-      }
+      })
     })
 
-    await FactoryData.findOneAndUpdate(
+    await PlannerStateSchema.findOneAndUpdate(
       { user: username },
-      { data: factoryData, lastSaved: new Date() },
+      { data: plannerState, lastSaved: new Date() },
       { new: true, upsert: true }
     );
 
-    console.log(`Data saved for ${username}`);
+    // Delete any data that is in the old FactoryData collection. This will prevent /needsStateMigration being true
+    await FactoryData.deleteOne({ user: username });
+
+    console.log(`Planner State saved for ${username}`);
 
-    res.json({ message: 'Data saved successfully', userData: factoryData });
+    res.json({ message: 'Planner State saved successfully', userData: plannerState });
   } catch (error) {
     console.error(`Data save failed: ${error}`);
     res.status(500).json({ message: 'Data save failed', error });
@@ -245,11 +265,11 @@
 });
 
 // Load Data Endpoint
 app.get('/load', authenticate, async (req: AuthenticatedRequest & TypedRequestBody<{ data: any }>, res: Express.Response) => {
   try {
     const { username } = req.user as jwt.JwtPayload & { username: string };
 
-    const data = await FactoryData.findOne(
+    const data = await PlannerStateSchema.findOne(
       { user: username },
     );
 
@@ -260,7 +280,7 @@
 });
 
 // Share link create endpoint
 app.post('/share', optionalAuthenticate, shareRateLimit, async (req: AuthenticatedRequest & TypedRequestBody<{ data: any }>, res: Express.Response) => {
   try {
     const { username } = req.user as jwt.JwtPayload & { username: string };
     const factoryData = req.body;

backend/interfaces/FactoryInterface.ts

@@ -147,3 +147,11 @@ export interface FactoryTab {
   name: string;
   factories: Factory[];
 }
+
+export interface PlannerState {
+  user: string;
+  currentTabId: string;
+  lastSaved: Date;
+  userOptions: string[];
+  tabs: FactoryTab[];
+}

backend/models/PlannerState.ts

@@ -0,0 +1,13 @@
+import mongoose from "mongoose";
+
+const PlannerStateSchema = new mongoose.Schema(
+  {
+    user: { type: String, required: true },
+    currentTabId: { type: String, required: true },
+    tabs: { type: mongoose.Schema.Types.Mixed, required: true },
+    userOptions: [{ type: String, required: true }],
+    lastSaved: { type: Date, default: Date.now },
+  },
+  { minimize: false}
+);
+export const PlannerState = mongoose.model('PlannerState', PlannerStateSchema);

web/package.json

@@ -56,9 +56,9 @@
     "unplugin-vue-components": "^0.27.2",
     "unplugin-vue-router": "^0.10.0",
     "vite": "^5.3.3",
+    "vite-plugin-vue-devtools": "^7.6.8",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "^2.0.3",
-    "vite-plugin-vue-devtools": "^7.6.8",
     "vitest": "^2.1.5",
     "vue-router": "^4.4.0",
     "vue-tsc": "^2.0.26"

web/src/components/Loading.vue

@@ -128,7 +128,7 @@
     // Handle issues with Edge browser breaking reactivity.
     setTimeout(() => {
       showEdgeWarning.value = true
-    }, 5000)
+    }, 30000)
   }
 
   onMounted(() => {

web/src/components/ShareButton.vue

@@ -30,7 +30,7 @@
   import eventBus from '@/utils/eventBus'
 
   // Get user auth stuff from the app store
-  const { currentFactoryTab } = useAppStore()
+  const { currentTab, getFactories } = useAppStore()
   const authStore = useAuthStore()
 
   const apiUrl = config.apiUrl
@@ -39,13 +39,14 @@
   const showCopyDialog = ref(false)
 
   const createShareLink = async () => {
-    if (!currentFactoryTab.factories || currentFactoryTab.factories.length === 0) {
+    const factories = getFactories()
+    if (!factories || factories.length === 0) {
       alert('No factory data to share!')
       return
     }
 
     creating.value = true
-    link.value = await handleCreation(currentFactoryTab) ?? ''
+    link.value = await handleCreation(currentTab) ?? ''
     creating.value = false
 
     // If no link was returned assume server errors

web/src/components/TabNavigation.vue

@@ -3,28 +3,28 @@
     <div class="border-t-md d-flex bg-grey-darken-3 align-center justify-space-between w-100">
       <div class="d-flex align-center" style="min-width: 0">
         <v-tabs
-          v-model="appStore.currentFactoryTabIndex"
+          v-model="selectedTab"
           color="deep-orange"
         >
           <v-tab
-            v-for="(item, index) in appStore.factoryTabs"
-            :key="item.id"
+            v-for="(tab) in appStore.getTabs()"
+            :key="tab.id"
             class="text-none"
-            :ripple="!isCurrentTab(index)"
-            :slim="isCurrentTab(index)"
-            :value="index"
+            :ripple="!isCurrentTab(tab)"
+            :slim="isCurrentTab(tab)"
+            :value="tab.id"
           >
             <input
-              v-if="isCurrentTab(index) && isEditingName"
+              v-if="isCurrentTab(tab) && isEditingName"
               v-model="currentTabName"
               class="pa-1 rounded border bg-grey-darken-2"
               @keyup.enter="onClickEditTabName"
             >
             <span v-else>
-              {{ item.name }}
+              {{ tab.name }}
             </span>
             <v-btn
-              v-if="isCurrentTab(index)"
+              v-if="isCurrentTab(tab)"
               :key="`${isEditingName}`"
               color="grey-darken-3"
               :icon="`fas ${isEditingName ? 'fa-check': 'fa-pen'}`"
@@ -39,14 +39,14 @@
           icon="fas fa-plus"
           size="x-small"
           variant="flat"
-          @click="appStore.addTab()"
+          @click="appStore.createNewTab()"
         />
       </div>
 
       <div class="d-flex align-center h-100 ga-2 mr-1">
         <ShareButton />
         <v-btn
-          v-if="appStore.factoryTabs.length > 1"
+          v-if="getTabsCount(appStore.getState())"
           color="red rounded"
           icon="fas fa-trash"
           size="small"
@@ -61,24 +61,39 @@
 <script setup lang="ts">
   import { useAppStore } from '@/stores/app-store'
   import { confirmDialog } from '@/utils/helpers'
+  import { FactoryTab } from '@/interfaces/planner/FactoryInterface'
+  import eventBus from '@/utils/eventBus'
+  import { getTabsCount } from '@/utils/plannerStateManagement'
 
   const appStore = useAppStore()
 
+  // Take a shallow copy of the current tab ID
+  const selectedTab = ref(JSON.parse(JSON.stringify(appStore.currentTabId)))
+
   const isEditingName = ref(false)
-  const currentTabName = ref(appStore.currentFactoryTab.name)
+  const currentTabName = ref(appStore.currentTab.name)
 
-  const isCurrentTab = (index:number) => index === appStore.currentFactoryTabIndex
+  const isCurrentTab = (tab: FactoryTab) => tab.id === appStore.currentTabId
 
   const onClickEditTabName = () => {
     isEditingName.value = !isEditingName.value
     if (!isEditingName.value) {
-      appStore.currentFactoryTab.name = currentTabName.value
+      appStore.currentTab.name = currentTabName.value
     }
   }
 
-  watch(() => appStore.currentFactoryTabIndex, () => {
+  watch(() => appStore.currentTabId, () => {
     isEditingName.value = false
-    currentTabName.value = appStore.currentFactoryTab.name
+    currentTabName.value = appStore.currentTab.name
+  })
+
+  watch(() => selectedTab.value, () => {
+    console.log('TabNavigation: selectedTab: Changing selected tab:', selectedTab.value)
+    appStore.changeCurrentTab(selectedTab.value)
+  })
+
+  eventBus.on('switchTab', (tabId: string) => {
+    selectedTab.value = tabId
   })
 
   const confirmDelete = () => {

web/src/components/Templates.vue

@@ -179,7 +179,7 @@
 
     // This is a workaround for the templating bug where the data was passed as a reference, and would refuse to load the same template until the page is refreshed.
     const data = JSON.parse(template.data) as Factory[]
-    prepareLoader(data)
+    prepareLoader(data, true)
     dialog.value = false
   }
 </script>

web/src/components/planner/Introduction.vue

@@ -60,36 +60,18 @@
   </v-dialog>
 </template>
 <script setup lang="ts">
-  import { defineEmits } from 'vue'
-
-  const props = defineProps<{
-    introShow: boolean
-  }>()
+  import { defineEmits, ref } from 'vue'
+  import eventBus from '@/utils/eventBus'
 
   const showDialog = ref<boolean>(false)
 
-  onMounted(() => {
-    console.log('Intro show:', props.introShow)
-    showDialog.value = props.introShow
-  })
-
-  // Set up a watcher to close the dialog when the prop changes
-  watch(() => props.introShow, value => {
-    showDialog.value = value
-  })
-
-  // Set up a watcher if the dialogue is changed to closed, we emit the event by calling close()
-  watch(() => showDialog.value, value => {
-    if (!value) {
-      console.log('Closing intro via watch')
-      close()
-    }
-  })
+  // Grab from local storage if the user has already dismissed this popup
+  // If they have, don't show it again.
+  const introShow = ref<boolean>(!localStorage.getItem('dismissed-introduction'))
 
   // eslint-disable-next-line func-call-spacing
   const emit = defineEmits<{
     (event: 'showDemo'): void;
-    (event: 'closeIntro'): void;
   }>()
 
   const showDemo = () => {
@@ -98,10 +80,25 @@
     close()
   }
 
+  const open = () => {
+    console.log('Introduction: Opening introduction')
+    showDialog.value = true
+    localStorage.setItem('dismissed-introduction', 'false')
+  }
+
   const close = () => {
-    console.log('Closing introduction')
-    emit('closeIntro')
+    console.log('Introduction: Closing introduction')
     showDialog.value = false
+    localStorage.setItem('dismissed-introduction', 'true')
+  }
+
+  eventBus.on('introShow', (show: boolean) => {
+    console.log('Introduction: Got introShow event', show)
+    show ? open() : close()
+  })
+
+  if (introShow.value) {
+    open()
   }
 </script>
 <style lang="scss" scoped>