diff --git a/web/src/components/PrinterCard.vue b/web/src/components/PrinterCard.vue
new file mode 100644
index 0000000..e21eb1f
--- /dev/null
+++ b/web/src/components/PrinterCard.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ {{ printer.serialNumber }}
+
+
+
+
diff --git a/web/src/layouts/default/View.vue b/web/src/layouts/default/View.vue
index 9c2c425..167a6be 100644
--- a/web/src/layouts/default/View.vue
+++ b/web/src/layouts/default/View.vue
@@ -1,5 +1,5 @@
-
+
+
diff --git a/web/src/store/app.ts b/web/src/store/app.ts
index 1f8a69d..ab938a3 100644
--- a/web/src/store/app.ts
+++ b/web/src/store/app.ts
@@ -11,17 +11,25 @@ export const useAppStore = defineStore('app', {
me: null as User | null,
printers: [] as Printer[],
printerFilter: '',
- onlyMyCampus: true
+ onlyMyCampus: true,
+ loadingPrinters: false
}),
actions: {
async fetchPrinters() {
- this.printers = await api(
- `printer?${new URLSearchParams({
- campus: this.onlyMyCampus ? this.me?.campus || '' : ''
- })}`,
- { method: 'GET' }
- )
+ this.loadingPrinters = true
+ try {
+ this.printers = await api(
+ `printer?${new URLSearchParams({
+ campus: this.onlyMyCampus ? this.me?.campus || '' : ''
+ })}`,
+ { method: 'GET' }
+ )
+ } catch (error) {
+ console.error(error)
+ } finally {
+ this.loadingPrinters = false
+ }
},
async fetchMe() {
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 07f79a1..e7e787a 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,28 +1,29 @@
-
-
- {{ printer.friendlyName || printer.serialNumber }}
-
-
-
-
-
+
+
+
+
+
+
+