Reintegrate profiles management

src/assets/defaults.ts

@@ -17,9 +17,10 @@ const defaultMiniWidgetManagerVars = {
 }
 
 export const defaultGlobalAddress = process.env.NODE_ENV === 'development' ? 'blueos.local' : window.location.hostname
-export const widgetProfiles: { [key: string]: Profile } = {
-  'c2bcf04d-048f-496f-9d78-fc4002608028': {
-    name: 'Default Cockpit profile',
+export const widgetProfiles: Profile[] = [
+  {
+    name: 'Default submarine profile',
+    hash: 'c2bcf04d-048f-496f-9d78-fc4002608028',
     views: [
       {
         hash: 'eddd8e53-88c3-46a9-9e50-909227661f38',
@@ -127,6 +128,12 @@ export const widgetProfiles: { [key: string]: Profile } = {
           },
         ],
       },
+    ],
+  },
+  {
+    name: 'Default boat profile',
+    hash: 'adb7d856-f2e5-4980-aaeb-c39c1fa3562b',
+    views: [
       {
         hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4',
         name: 'Map view',
@@ -159,8 +166,8 @@ export const widgetProfiles: { [key: string]: Profile } = {
       },
     ],
   },
-}
-export const widgetProfile = Object.values(widgetProfiles)[0]
+]
+export const widgetProfile = widgetProfiles[0]
 
 export const miniWidgetsProfiles: MiniWidgetProfile[] = [
   {

src/components/EditMenu.vue

@@ -10,6 +10,42 @@
     />
     <p class="flex items-center justify-center mt-10 text-xl font-semibold select-none">Edit interface</p>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
+    <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
+      <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
+      <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
+        <TransitionGroup name="fade-and-suffle">
+          <div
+            v-for="profile in store.allProfiles"
+            :key="profile.hash"
+            class="flex items-center justify-between w-full my-1"
+          >
+            <Button
+              class="flex items-center justify-center w-full h-8 overflow-auto"
+              :class="{ 'selected-view': profile.hash === store.currentProfile.hash }"
+              @click="store.loadProfile(profile)"
+            >
+              <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ profile.name }}</p>
+              <div class="grow" />
+              <div class="icon-btn mdi mdi-download" @click.stop="store.exportProfile(profile)" />
+              <template v-if="!store.isDefaultProfile(profile)">
+                <div class="icon-btn mdi mdi-cog" @click.stop="renameProfile(profile)" />
+                <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteProfile(profile)" />
+              </template>
+            </Button>
+          </div>
+        </TransitionGroup>
+      </div>
+      <div class="flex mt-2">
+        <div class="icon-btn mdi mdi-plus" @click="addNewProfile" />
+        <div class="icon-btn">
+          <label class="flex items-center justify-center w-full h-full cursor-pointer">
+            <input type="file" accept="application/json" hidden @change="(e: Event) => store.importProfile(e)" />
+            <span class="mdi mdi-upload" />
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div ref="viewsContainer" class="flex flex-col items-center justify-between w-full shrink overflow-y-clip h-[30%]">
       <p class="mb-3 text-lg font-semibold select-none">Views</p>
       <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
@@ -26,23 +62,23 @@
             >
               <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ view.name }}</p>
               <div class="grow" />
-              <div class="icon-btn mdi mdi-cog" @click="renameView(view)" />
+              <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
+              <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
               <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
             </Button>
           </div>
         </TransitionGroup>
       </div>
       <div class="grow" />
     </div>
-    <div ref="managementContainer" class="flex items-center justify-center w-full px-2">
+    <div ref="managementContainer" class="flex items-center justify-center w-full px-2 mt-2">
       <div class="icon-btn mdi mdi-plus" @click="addNewView" />
       <div class="icon-btn">
         <label class="flex items-center justify-center w-full h-full cursor-pointer">
           <input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
           <span class="mdi mdi-upload" />
         </label>
       </div>
-      <div class="icon-btn mdi mdi-download" @click="store.exportCurrentView" />
       <div />
     </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
@@ -186,6 +222,19 @@
       </v-card>
     </v-dialog>
   </teleport>
+  <teleport to="body">
+    <v-dialog v-model="profileRenameDialogRevealed" width="20rem">
+      <v-card class="pa-2">
+        <v-card-text>
+          <v-text-field v-model="newProfileName" counter="25" label="New profile name" />
+        </v-card-text>
+        <v-card-actions class="flex justify-end">
+          <v-btn @click="profileRenameDialog.confirm">Save</v-btn>
+          <v-btn @click="profileRenameDialog.cancel">Cancel</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -197,7 +246,7 @@ import { type UseDraggableOptions, useDraggable, VueDraggable } from 'vue-dragga
 
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { MiniWidgetType } from '@/types/miniWidgets'
-import { type View, type Widget, WidgetType } from '@/types/widgets'
+import { type Profile, type View, type Widget, WidgetType } from '@/types/widgets'
 
 import Button from './Button.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
@@ -250,17 +299,37 @@ viewRenameDialog.onConfirm(() => {
   newViewName.value = ''
 })
 
+const profileBeingRenamed = ref(store.currentProfile)
+const newProfileName = ref('')
+const profileRenameDialogRevealed = ref(false)
+const profileRenameDialog = useConfirmDialog(profileRenameDialogRevealed)
+profileRenameDialog.onConfirm(() => {
+  profileBeingRenamed.value.name = newProfileName.value
+  newProfileName.value = ''
+})
+
 const addNewView = (): void => {
   store.addView()
   renameView(store.currentView)
 }
 
+const addNewProfile = (): void => {
+  store.addProfile()
+  renameProfile(store.currentProfile)
+}
+
 const renameView = (view: View): void => {
   viewBeingRenamed.value = view
   newViewName.value = view.name
   viewRenameDialogRevealed.value = true
 }
 
+const renameProfile = (profile: Profile): void => {
+  profileBeingRenamed.value = profile
+  newProfileName.value = profile.name
+  profileRenameDialogRevealed.value = true
+}
+
 const availableWidgetsContainer = ref()
 const availableMiniWidgetsContainer = ref()