Merge pull request #526 from fdm-monster/feat/new-grid-layout

feat: redesign printer grid layout for more flexibility (odd columns, etc)

RELEASE_NOTES.MD

@@ -1,8 +1,14 @@
 # Develop 
 
-Features
+## Features
 
 - Remove whitelist settings from UI
+- Introduce new grid layout
+- Introduce grid settings dialog on home page
+
+## Fixes
+
+- Snackbar buttons look a bit better
 
 # Client 0.0.8
 

src/App.vue

@@ -27,6 +27,7 @@
     <AddOrUpdateCameraStreamDialog />
     <AddOrUpdateFloorDialog />
     <CreateUserDialog />
+    <GridSettingsDialog />
     <PrinterMaintenanceDialog />
     <BatchJsonCreateDialog />
     <YamlImportExportDialog />

src/backend/app.service.ts

@@ -10,30 +10,30 @@ export class AppService extends BaseService {
     version?: string,
     allowDowngrade?: boolean
   ) {
-    return await this.post('api/server/update-client-bundle-github', {
+    return await this.post('/api/server/update-client-bundle-github', {
       downloadRelease: version,
       allowDowngrade
     })
   }
 
   static async getGithubRateLimit() {
-    return (await this.get('api/server/github-rate-limit')) as GithubRateLimit
+    return (await this.get('/api/server/github-rate-limit')) as GithubRateLimit
   }
 
   static async getClientReleases() {
-    return (await this.get('api/server/client-releases')) as IClientReleases
+    return (await this.get('/api/server/client-releases')) as IClientReleases
   }
 
   static async getVersion() {
-    return (await this.get('api/version')) as VersionModel
+    return (await this.get('/api/version')) as VersionModel
   }
 
   static async getFeatures() {
-    return (await this.get('api/features')) as FeaturesModel
+    return (await this.get('/api/features')) as FeaturesModel
   }
 
   static async test() {
     const httpClient = await getHttpClient(false, false)
-    return (await httpClient.get('api/test')) as { message: string }
+    return (await httpClient.get('/api/test')) as { message: string }
   }
 }

src/backend/auth.service.ts

@@ -17,38 +17,38 @@ export class AuthService {
   static async getLoginRequired() {
     const httpClient = await getHttpClient(false, false)
     return await httpClient.get<LoginRequiredResponse>(
-      'api/auth/login-required'
+      '/api/auth/login-required'
     )
   }
 
   static async postLogin(username: string, password: string) {
     const httpClient = await getHttpClient(false, false)
-    return await httpClient.post<Tokens>('api/auth/login', {
+    return await httpClient.post<Tokens>('/api/auth/login', {
       username,
       password
     })
   }
 
   static async logout() {
     const httpClient = await getHttpClient(true, false)
-    return await httpClient.post('api/auth/logout')
+    return await httpClient.post('/api/auth/logout')
   }
 
   static async refreshLogin(refreshToken: string) {
     const httpClient = await getHttpClient(false, false)
     return await httpClient.post<{
       token: string
-    }>('api/auth/refresh', { refreshToken })
+    }>('/api/auth/refresh', { refreshToken })
   }
 
   static async verifyLogin() {
     const httpClient = await getHttpClient(true, false)
-    return await httpClient.post('api/auth/verify')
+    return await httpClient.post('/api/auth/verify')
   }
 
   static async registerAccount(username: string, password: string) {
     const httpClient = await getHttpClient(true, false)
-    return await httpClient.post('api/auth/register', {
+    return await httpClient.post('/api/auth/register', {
       username,
       password
     })

src/backend/batch.service.ts

@@ -5,19 +5,19 @@ import { ReprintFileDto } from '@/models/batch/reprint.dto'
 
 export class BatchService extends BaseService {
   static async batchSettingsGet<T = any>(printerIds: IdType[]) {
-    return await this.post<T>('api/batch/settings/get', { printerIds })
+    return await this.post<T>('/api/batch/settings/get', { printerIds })
   }
 
   static async batchConnectUsb(printerIds: IdType[]) {
-    return await this.post('api/batch/connect/usb', { printerIds })
+    return await this.post('/api/batch/connect/usb', { printerIds })
   }
 
   static async batchConnectSocket(printerIds: IdType[]) {
-    return await this.post('api/batch/connect/socket', { printerIds })
+    return await this.post('/api/batch/connect/socket', { printerIds })
   }
 
   static async batchToggleEnabled(printerIds: IdType[], enabled: boolean) {
-    return await this.post('api/batch/toggle-enabled', {
+    return await this.post('/api/batch/toggle-enabled', {
       printerIds,
       enabled
     })

src/backend/camera-stream.service.ts

@@ -6,28 +6,28 @@ import {
 
 export class CameraStreamService extends BaseService {
   static async listCameraStreams() {
-    return await this.get<CameraStream[]>('api/camera-stream/')
+    return await this.get<CameraStream[]>('/api/camera-stream/')
   }
 
   static async createCameraStream(cameraStreamDto: CreateCameraStreamDto) {
-    return await this.post<CameraStream>('api/camera-stream/', cameraStreamDto)
+    return await this.post<CameraStream>('/api/camera-stream/', cameraStreamDto)
   }
 
   static async getCameraStream(cameraStreamId: string | number) {
-    return await this.get<CameraStream>(`api/camera-stream/${cameraStreamId}`)
+    return await this.get<CameraStream>(`/api/camera-stream/${cameraStreamId}`)
   }
 
   static async updateCameraStream(
     cameraStreamId: string | number,
     cameraStreamDto: CreateCameraStreamDto
   ) {
     return await this.put<CameraStream>(
-      `api/camera-stream/${cameraStreamId}`,
+      `/api/camera-stream/${cameraStreamId}`,
       cameraStreamDto
     )
   }
 
   static async deleteCameraStream(cameraStreamId: string | number) {
-    return await this.delete(`api/camera-stream/${cameraStreamId}`)
+    return await this.delete(`/api/camera-stream/${cameraStreamId}`)
   }
 }

src/components.d.ts

@@ -29,6 +29,8 @@ declare module 'vue' {
     FloorSettings: typeof import('./components/Settings/FloorSettings.vue')['default']
     GridLoader: typeof import('./components/Generic/Loaders/GridLoader.vue')['default']
     GridSettings: typeof import('./components/Settings/GridSettings.vue')['default']
+    GridSettingsDialog: typeof import('./components/Generic/Dialogs/GridSettingsDialog.vue')['default']
+    GridSettingsList: typeof import('./components/Settings/Shared/GridSettingsList.vue')['default']
     HelpOverlay: typeof import('./components/HelpOverlay/HelpOverlay.vue')['default']
     HomeToolbar: typeof import('./components/PrinterGrid/HomeToolbar.vue')['default']
     LoginForm: typeof import('./components/Login/LoginForm.vue')['default']
@@ -61,6 +63,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ServerProtectionSettings: typeof import('./components/Settings/ServerProtectionSettings.vue')['default']
+    SettingsToolbar: typeof import('./components/Settings/Shared/SettingsToolbar.vue')['default']
     SettingsView: typeof import('./components/Settings/SettingsView.vue')['default']
     SoftwareUpgradeSettings: typeof import('./components/Settings/SoftwareUpgradeSettings.vue')['default']
     SyncPrinterNameAction: typeof import('./components/Generic/Actions/SyncPrinterNameAction.vue')['default']

src/components/Generic/Dialogs/BatchReprintDialog.vue

@@ -114,7 +114,7 @@
 <script lang="ts" setup>
 import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
 import { useDialog } from '@/shared/dialog.composable'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { BatchService } from '@/backend/batch.service'
 import { IdType } from '@/utils/id.type'
 import { ReprintFileDto, ReprintState } from '@/models/batch/reprint.dto'
@@ -132,14 +132,6 @@ const selectedItems = ref<ReprintFileDto[]>([])
 const errorLoading = ref('')
 const snackbar = useSnackbar()
 
-onMounted(() => {
-  console.debug('Mounted')
-})
-
-onBeforeUnmount(() => {
-  console.debug('Unmount')
-})
-
 function onBeforeDialogOpened(_: IdType[]) {
   loading.value = true
 }

src/components/Generic/Dialogs/GridSettingsDialog.vue

@@ -0,0 +1,48 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    max-width="1000px"
+    @escape="closeDialog()"
+  >
+    <v-card class="pa-4">
+      <v-card-title>
+        <span class="text-h5">
+          Grid Settings
+          <v-tooltip top>
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                class="ma-2"
+                fab
+                x-small
+              >
+                <v-icon>question_mark</v-icon>
+              </v-btn>
+            </template>
+            <template v-slot:default>
+              Change your grid rows, columns and tile settings.
+            </template>
+          </v-tooltip>
+        </span>
+      </v-card-title>
+
+      <GridSettingsList />
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn @click="dialog.closeDialog()">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+<script lang="ts" setup>
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
+import GridSettingsList from '@/components/Settings/Shared/GridSettingsList.vue'
+
+const dialog = useDialog(DialogName.GridSettingsDialog)
+
+function closeDialog() {
+  dialog.closeDialog(dialog.context())
+}
+</script>

src/components/Generic/Dialogs/dialog.constants.ts

@@ -17,5 +17,7 @@ export enum DialogName {
   // Dialog for moving print head, homing, or retracting/extruding filament
   PrinterControlDialog = 'PrinterControlDialog',
   // Dialog for creating a user which is pre-registered (no verification needed)
-  CreateUserDialog = 'CreateUserDialog'
+  CreateUserDialog = 'CreateUserDialog',
+  // Dialog for managing grid columns, rows, tile size and more (reference to Grid Settings page)
+  GridSettingsDialog = 'GridSettingsDialog'
 }

src/components/Generic/Snackbars/AppErrorSnackbar.vue

@@ -13,10 +13,7 @@
   >
     <v-row>
       <v-col cols="2">
-        <v-btn size="large">
-          <v-icon>error</v-icon>
-          <v-icon />
-        </v-btn>
+        <v-btn icon="error" />
       </v-col>
       <v-col
         class="d-flex align-center flex-row"
@@ -34,11 +31,9 @@
 
       <v-col cols="1">
         <v-btn
-          size="large"
+          icon="close"
           @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-snackbar>

src/components/Generic/Snackbars/AppInfoSnackbar.vue

@@ -12,9 +12,7 @@
   >
     <v-row>
       <v-col cols="2">
-        <v-btn size="large">
-          <v-icon>info</v-icon>
-        </v-btn>
+        <v-btn icon="info" />
       </v-col>
       <v-col
         cols="8"
@@ -29,13 +27,11 @@
           </div>
         </div>
       </v-col>
-      <v-col cols="1">
+      <v-col cols="2">
         <v-btn
-          size="large"
+          icon="close"
           @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-snackbar>

src/components/Generic/Snackbars/AppProgressSnackbar.vue

@@ -13,11 +13,9 @@
     <v-row>
       <v-col cols="2">
         <v-btn
-          icon
+          icon="file_upload"
           size="large"
-        >
-          <v-icon>file_upload</v-icon>
-        </v-btn>
+        />
       </v-col>
       <v-col
         class="d-flex align-center flex-row"
@@ -48,12 +46,10 @@
       </v-col>
       <v-col cols="1">
         <v-btn
-          icon
+          icon="close"
           size="large"
           @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-snackbar>

src/components/PrinterGrid/HomeToolbar.vue

@@ -33,13 +33,6 @@
       <v-icon>warning</v-icon>
       {{ floorStore.floorlessPrinters.length }} unplaced printer(s)!
     </v-alert>
-    <div class="ma-4 pt-6">
-      <v-switch
-        v-model="gridStore.gridEditMode"
-        label="Printer Relocate Mode"
-      />
-    </div>
-
     <v-spacer />
     <span class="d-flex flex-wrap gap-2">
       <span class="pr-2">
@@ -63,6 +56,24 @@
         {{ printerStore.disabledCount }}
       </span>
     </span>
+
+    <v-btn
+      elevation="2"
+      color="primary"
+      small
+      class="ml-6"
+      icon
+      @click="useDialog(DialogName.GridSettingsDialog).openDialog()"
+    >
+      <v-icon>settings</v-icon>
+    </v-btn>
+
+    <div class="ma-4 pt-6">
+      <v-switch
+        v-model="gridStore.gridEditMode"
+        label="Printer Relocate Mode"
+      />
+    </div>
   </v-toolbar>
 </template>
 
@@ -72,11 +83,14 @@ import { usePrinterStore } from '@/store/printer.store'
 import { useGridStore } from '@/store/grid.store'
 import { useFloorStore } from '@/store/floor.store'
 import { usePrinterStateStore } from '@/store/printer-state.store'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
 
 const printerStore = usePrinterStore()
 const printerStateStore = usePrinterStateStore()
 const floorStore = useFloorStore()
 const gridStore = useGridStore()
+
 const selectedFloorToggleIndex = ref<number>(0)
 
 const floors = computed(() => {