@7365admin1/layer-common 3.2.2-staging.113 → 3.2.2-staging.116
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/screens.css +19 -0
- package/components/AcceptDialog.vue +17 -18
- package/components/BuildingUnitFormEdit.vue +3 -3
- package/components/BulletinExpirationChip.vue +13 -4
- package/components/Card/DeleteConfirmation.vue +19 -20
- package/components/Dialog/DeleteConfirmation.vue +20 -21
- package/components/DocumentManagement.vue +9 -9
- package/components/Nfc/NFCPatrolReportMain.vue +47 -33
- package/components/Nfc/NFCPatrolRouteForm.vue +18 -20
- package/components/Nfc/NFCPatrolSettings.vue +14 -4
- package/components/Nfc/NFCTagForm.vue +4 -4
- package/components/Nfc/NFCTagMain.vue +41 -43
- package/components/Nfc/PatrolReport/ReportFilters.vue +0 -3
- package/package.json +1 -1
package/assets/css/screens.css
CHANGED
|
@@ -312,6 +312,25 @@
|
|
|
312
312
|
font-size: 19px;
|
|
313
313
|
}
|
|
314
314
|
|
|
315
|
+
/**
|
|
316
|
+
* A DIALOG'S OWN HEADER/FOOTER BAR - OPT-IN, DELIBERATELY.
|
|
317
|
+
*
|
|
318
|
+
* Some dialogs draw their title row and their Cancel/Submit row as a
|
|
319
|
+
* `v-toolbar`. Vuetify paints that from its own `surface`, which in dark mode
|
|
320
|
+
* is a visible grey slab sitting on the card. The obvious fix - one blanket
|
|
321
|
+
* `.v-overlay__content .v-toolbar` rule - was measured and REJECTED: sixty-odd
|
|
322
|
+
* dialog components draw such a bar, and several set `color="black"` or
|
|
323
|
+
* `color="grey-darken-3"` ON PURPOSE. A blanket rule would flatten those too,
|
|
324
|
+
* unrendered and unverified.
|
|
325
|
+
*
|
|
326
|
+
* So this is a class a converted dialog opts into. Background and text only -
|
|
327
|
+
* it moves no control and changes no button.
|
|
328
|
+
*/
|
|
329
|
+
.screen-dialog-bar.v-toolbar {
|
|
330
|
+
background: var(--card) !important;
|
|
331
|
+
color: var(--text) !important;
|
|
332
|
+
}
|
|
333
|
+
|
|
315
334
|
/**
|
|
316
335
|
* The design's two buttons, for the dialogs and toolbars that draw their own.
|
|
317
336
|
*
|
|
@@ -2,34 +2,33 @@
|
|
|
2
2
|
<v-dialog
|
|
3
3
|
:model-value="modelValue"
|
|
4
4
|
@update:model-value="val => $emit('update:modelValue', val)"
|
|
5
|
-
max-width="
|
|
5
|
+
:max-width="520"
|
|
6
6
|
persistent
|
|
7
7
|
>
|
|
8
|
-
<v-card class="
|
|
9
|
-
<v-card-title
|
|
10
|
-
|
|
11
|
-
</v-card-title>
|
|
12
|
-
<v-card-text style="font-size:1.05rem; margin-bottom:24px;">
|
|
8
|
+
<v-card class="screen-modal">
|
|
9
|
+
<v-card-title>{{ title }}</v-card-title>
|
|
10
|
+
<v-card-text class="screen-modal__body">
|
|
13
11
|
{{ message }}
|
|
14
12
|
</v-card-text>
|
|
15
|
-
|
|
13
|
+
<!-- The design's footer is ghost-then-primary, equal width. "No" is the
|
|
14
|
+
dismissing action and "Yes" the confirming one, so they take the
|
|
15
|
+
Cancel / Submit shapes in that order. -->
|
|
16
|
+
<div class="screen-modal__footer">
|
|
16
17
|
<v-btn
|
|
17
|
-
|
|
18
|
+
class="screen-btn-ghost"
|
|
18
19
|
variant="outlined"
|
|
19
|
-
|
|
20
|
-
@click="$emit('confirm')"
|
|
20
|
+
@click="$emit('cancel')"
|
|
21
21
|
>
|
|
22
|
-
|
|
22
|
+
No
|
|
23
23
|
</v-btn>
|
|
24
24
|
<v-btn
|
|
25
|
-
|
|
26
|
-
variant="
|
|
27
|
-
|
|
28
|
-
@click="$emit('cancel')"
|
|
25
|
+
class="screen-btn-primary"
|
|
26
|
+
variant="flat"
|
|
27
|
+
@click="$emit('confirm')"
|
|
29
28
|
>
|
|
30
|
-
|
|
29
|
+
Yes
|
|
31
30
|
</v-btn>
|
|
32
|
-
</
|
|
31
|
+
</div>
|
|
33
32
|
</v-card>
|
|
34
33
|
</v-dialog>
|
|
35
34
|
</template>
|
|
@@ -41,4 +40,4 @@ defineProps<{
|
|
|
41
40
|
message?: string
|
|
42
41
|
}>();
|
|
43
42
|
defineEmits(['confirm', 'cancel', 'update:modelValue']);
|
|
44
|
-
</script>
|
|
43
|
+
</script>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-card width="100%" :loading="getUnitPeoplePending || loading.ownerProcessing" :disabled="loading.ownerProcessing">
|
|
3
|
-
<v-toolbar>
|
|
3
|
+
<v-toolbar class="screen-dialog-bar">
|
|
4
4
|
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
5
|
<span class="font-weight-bold text-h5"> Unit Info ( {{ buildingUnit.name }} ) </span>
|
|
6
6
|
</v-row>
|
|
7
7
|
</v-toolbar>
|
|
8
|
-
<v-toolbar density="compact">
|
|
8
|
+
<v-toolbar class="screen-dialog-bar" density="compact">
|
|
9
9
|
<v-tabs v-model="tab" class="mt-0" active-class="bg-success">
|
|
10
10
|
<v-tab value="general">General</v-tab>
|
|
11
11
|
<v-tab value="residents">Residents/Tenants</v-tab>
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
</v-row>
|
|
254
254
|
</v-col>
|
|
255
255
|
|
|
256
|
-
<v-toolbar class="pa-0" density="compact">
|
|
256
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
257
257
|
<v-row no-gutters>
|
|
258
258
|
<v-col :cols="canUpdateUnit || canDeleteUnit ? 6 : 12" class="pa-0">
|
|
259
259
|
<v-btn block variant="text" class="text-none" size="large" @click="emit('cancel')" height="48">
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<!--
|
|
3
|
+
The design's status pill rather than a raw v-chip. Vuetify's `green` and
|
|
4
|
+
`red` are fixed hues that are in no token file: the red one printed
|
|
5
|
+
`rgb(244,67,54)` and measured 3.4:1 against the surface behind it, below AA
|
|
6
|
+
on the word people actually read, and the green one measured 2.78:1.
|
|
7
|
+
`approved` and `rejected` are the shared tone words, so this chip now takes
|
|
8
|
+
`--ok` / `--err` and their paired `--ok-bg` / `--err-bg` - the handoff's own
|
|
9
|
+
values - and carries its own background instead of borrowing whatever it
|
|
10
|
+
happens to sit on.
|
|
11
|
+
-->
|
|
12
|
+
<StatusChip
|
|
13
|
+
:status="value ? 'approved' : 'rejected'"
|
|
14
|
+
:label="value ? 'Yes' : 'No'"
|
|
6
15
|
/>
|
|
7
16
|
</template>
|
|
8
17
|
|
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%" :disabled="loading" :loading="loading">
|
|
3
|
-
<v-card-text
|
|
4
|
-
<span> {{ promptTitle }}</span>
|
|
2
|
+
<v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
|
|
3
|
+
<v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
|
|
4
|
+
<span class="screen-card-title"> {{ promptTitle }}</span>
|
|
5
5
|
|
|
6
|
+
<!-- `text-error` is Vuetify's own class over `--v-theme-error`,
|
|
7
|
+
which is the design's `--err` in both themes - already a token,
|
|
8
|
+
so it stays. -->
|
|
6
9
|
<span v-if="message" class="text-error mt-2">
|
|
7
10
|
{{ message }} Do you want to delete anyway?
|
|
8
11
|
</span>
|
|
9
12
|
</v-card-text>
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
<!-- The design's footer: two equal-width buttons, ghost then primary,
|
|
15
|
+
on a bordered strip. The handoff draws no destructive variant, so
|
|
16
|
+
the confirming action takes the primary shape like every other
|
|
17
|
+
modal's Submit. -->
|
|
18
|
+
<div class="screen-modal__footer">
|
|
19
|
+
<v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
|
|
20
|
+
Cancel
|
|
21
|
+
</v-btn>
|
|
19
22
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</v-btn>
|
|
25
|
-
</v-col>
|
|
26
|
-
</v-row>
|
|
27
|
-
</v-toolbar>
|
|
23
|
+
<v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
|
|
24
|
+
Delete
|
|
25
|
+
</v-btn>
|
|
26
|
+
</div>
|
|
28
27
|
</v-card>
|
|
29
28
|
</template>
|
|
30
29
|
|
|
@@ -48,4 +47,4 @@ const emit = defineEmits(["close", "delete"])
|
|
|
48
47
|
|
|
49
48
|
</script>
|
|
50
49
|
|
|
51
|
-
<style scoped></style>
|
|
50
|
+
<style scoped></style>
|
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%" :disabled="loading" :loading="loading">
|
|
3
|
-
<v-card-text
|
|
4
|
-
<span> {{ promptTitle }}</span>
|
|
2
|
+
<v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
|
|
3
|
+
<v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
|
|
4
|
+
<span class="screen-card-title"> {{ promptTitle }}</span>
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
<!-- `text-error` is Vuetify's own class over `--v-theme-error`,
|
|
7
|
+
which is the design's `--err` in both themes - already a token,
|
|
8
|
+
so it stays. -->
|
|
9
|
+
<div v-if="message" class="text-error mt-2">
|
|
7
10
|
{{ message }} Do you want to delete anyway?
|
|
8
11
|
</div>
|
|
9
12
|
</v-card-text>
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
<!-- The design's footer: two equal-width buttons, ghost then primary,
|
|
15
|
+
on a bordered strip. The handoff draws no destructive variant, so
|
|
16
|
+
the confirming action takes the primary shape like every other
|
|
17
|
+
modal's Submit. -->
|
|
18
|
+
<div class="screen-modal__footer">
|
|
19
|
+
<v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
|
|
20
|
+
Cancel
|
|
21
|
+
</v-btn>
|
|
19
22
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</v-btn>
|
|
25
|
-
</v-col>
|
|
26
|
-
</v-row>
|
|
27
|
-
</v-toolbar>
|
|
23
|
+
<v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
|
|
24
|
+
Delete
|
|
25
|
+
</v-btn>
|
|
26
|
+
</div>
|
|
28
27
|
</v-card>
|
|
29
28
|
</template>
|
|
30
29
|
|
|
@@ -48,4 +47,4 @@ const emit = defineEmits(["close", "delete"])
|
|
|
48
47
|
|
|
49
48
|
</script>
|
|
50
49
|
|
|
51
|
-
<style scoped></style>
|
|
50
|
+
<style scoped></style>
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
<!-- Create Folder Dialog -->
|
|
205
205
|
<v-dialog v-model="createFolderDialog" width="450" persistent>
|
|
206
206
|
<v-card width="100%">
|
|
207
|
-
<v-toolbar class="pa-0" density="compact">
|
|
207
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
208
208
|
<v-row no-gutters class="w-100">
|
|
209
209
|
<v-col cols="12" class="pa-4">
|
|
210
210
|
<span class="font-weight-medium text-h6">Create Folder</span>
|
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
</v-form>
|
|
235
235
|
</v-card-text>
|
|
236
236
|
|
|
237
|
-
<v-toolbar class="pa-0" density="compact">
|
|
237
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
238
238
|
<v-row no-gutters class="w-100">
|
|
239
239
|
<v-col cols="6" class="pa-0">
|
|
240
240
|
<v-btn
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
<!-- Edit Folder Dialog -->
|
|
272
272
|
<v-dialog v-model="editFolderDialog" width="450" persistent>
|
|
273
273
|
<v-card width="100%" class="folder-dialog-card">
|
|
274
|
-
<v-toolbar class="pa-0 folder-dialog-toolbar" density="compact">
|
|
274
|
+
<v-toolbar class="pa-0 folder-dialog-toolbar screen-dialog-bar" density="compact">
|
|
275
275
|
<v-row no-gutters class="w-100">
|
|
276
276
|
<v-col cols="12" class="pa-4">
|
|
277
277
|
<span class="font-weight-medium text-h6">Edit Folder</span>
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
</v-form>
|
|
307
307
|
</v-card-text>
|
|
308
308
|
|
|
309
|
-
<v-toolbar class="pa-0" density="compact">
|
|
309
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
310
310
|
<v-row no-gutters class="w-100">
|
|
311
311
|
<v-col cols="6" class="pa-0">
|
|
312
312
|
<v-btn
|
|
@@ -343,7 +343,7 @@
|
|
|
343
343
|
<!-- Delete Folder Dialog -->
|
|
344
344
|
<v-dialog v-model="deleteFolderDialog" width="450" persistent>
|
|
345
345
|
<v-card width="100%" class="folder-dialog-card">
|
|
346
|
-
<v-toolbar density="compact" class="pl-4 folder-dialog-toolbar">
|
|
346
|
+
<v-toolbar density="compact" class="pl-4 folder-dialog-toolbar screen-dialog-bar">
|
|
347
347
|
<span class="font-weight-medium text-h6">Delete Folder</span>
|
|
348
348
|
</v-toolbar>
|
|
349
349
|
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
</p>
|
|
358
358
|
</v-card-text>
|
|
359
359
|
|
|
360
|
-
<v-toolbar density="compact" class="pa-0">
|
|
360
|
+
<v-toolbar density="compact" class="pa-0 screen-dialog-bar">
|
|
361
361
|
<v-row no-gutters class="w-100">
|
|
362
362
|
<v-col cols="6" class="pa-0">
|
|
363
363
|
<v-btn
|
|
@@ -485,7 +485,7 @@
|
|
|
485
485
|
</v-col>
|
|
486
486
|
</v-row>
|
|
487
487
|
</v-card-text>
|
|
488
|
-
<v-toolbar class="pa-0" density="compact">
|
|
488
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
489
489
|
<v-row no-gutters>
|
|
490
490
|
<v-col cols="6" class="pa-0">
|
|
491
491
|
<v-btn
|
|
@@ -549,7 +549,7 @@
|
|
|
549
549
|
persistent
|
|
550
550
|
>
|
|
551
551
|
<v-card width="100%">
|
|
552
|
-
<v-toolbar density="compact" class="pl-4">
|
|
552
|
+
<v-toolbar density="compact" class="pl-4 screen-dialog-bar">
|
|
553
553
|
<span class="font-weight-medium text-h5">Delete Document</span>
|
|
554
554
|
</v-toolbar>
|
|
555
555
|
<v-card-text>
|
|
@@ -559,7 +559,7 @@
|
|
|
559
559
|
</p>
|
|
560
560
|
</v-card-text>
|
|
561
561
|
|
|
562
|
-
<v-toolbar density="compact">
|
|
562
|
+
<v-toolbar class="screen-dialog-bar" density="compact">
|
|
563
563
|
<v-row no-gutters>
|
|
564
564
|
<v-col cols="6">
|
|
565
565
|
<v-btn
|
|
@@ -1,39 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-row no-gutters
|
|
2
|
+
<v-row no-gutters>
|
|
3
3
|
<v-col cols="12">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
>
|
|
4
|
+
<!--
|
|
5
|
+
The screen had no page name at all - it opened on a bare back button.
|
|
6
|
+
The design opens every screen with its name; the back link keeps its
|
|
7
|
+
own `router.back()` and moves onto that row as the ghost action.
|
|
8
|
+
-->
|
|
9
|
+
<PageHeader title="Patrol Report">
|
|
10
|
+
<template #actions>
|
|
11
|
+
<AppButton variant="ghost" icon="mdi-chevron-left" @click="goBack">
|
|
12
12
|
Patrol Report Log
|
|
13
|
-
</
|
|
14
|
-
</
|
|
15
|
-
</
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
13
|
+
</AppButton>
|
|
14
|
+
</template>
|
|
15
|
+
</PageHeader>
|
|
16
|
+
</v-col>
|
|
17
|
+
|
|
18
|
+
<v-col cols="12">
|
|
19
|
+
<!--
|
|
20
|
+
The three report tabs were a `grow` `v-tabs` strip floating above the
|
|
21
|
+
content with its own `border-thin` boxes. The design makes the tabs the
|
|
22
|
+
card's own first row, so they become the ONE `CardToolbar`'s tabs. Same
|
|
23
|
+
`activeTab` model, same three values, same `v-window`.
|
|
24
|
+
-->
|
|
25
|
+
<AppCard>
|
|
26
|
+
<CardToolbar>
|
|
27
|
+
<template #tabs>
|
|
28
|
+
<button
|
|
29
|
+
v-for="tab in reportTabs"
|
|
30
|
+
:key="tab.value"
|
|
31
|
+
type="button"
|
|
32
|
+
role="tab"
|
|
33
|
+
class="app-tab"
|
|
34
|
+
:class="{ 'app-tab--active': activeTab === tab.value }"
|
|
35
|
+
:aria-selected="activeTab === tab.value"
|
|
36
|
+
@click="activeTab = tab.value"
|
|
37
|
+
>
|
|
38
|
+
{{ tab.label }}
|
|
39
|
+
</button>
|
|
40
|
+
</template>
|
|
41
|
+
</CardToolbar>
|
|
42
|
+
|
|
43
|
+
<v-window v-model="activeTab" class="pt-4 px-6 pb-6">
|
|
37
44
|
<v-window-item value="patrol">
|
|
38
45
|
<div v-if="activeTab === 'patrol'">
|
|
39
46
|
<PatrolReportTab
|
|
@@ -73,6 +80,7 @@
|
|
|
73
80
|
</div>
|
|
74
81
|
</v-window-item>
|
|
75
82
|
</v-window>
|
|
83
|
+
</AppCard>
|
|
76
84
|
</v-col>
|
|
77
85
|
</v-row>
|
|
78
86
|
</template>
|
|
@@ -103,6 +111,12 @@ const router = useRouter();
|
|
|
103
111
|
|
|
104
112
|
const activeTab = ref<NFCPatrolReportTab>("patrol");
|
|
105
113
|
|
|
114
|
+
const reportTabs: Array<{ value: NFCPatrolReportTab; label: string }> = [
|
|
115
|
+
{ value: "patrol", label: "Patrol Report" },
|
|
116
|
+
{ value: "daily", label: "Daily Report" },
|
|
117
|
+
{ value: "monthly", label: "Monthly Report" },
|
|
118
|
+
];
|
|
119
|
+
|
|
106
120
|
const { filters, options, fetchOptions } =
|
|
107
121
|
useNFCPatrolReportFilters(props.site);
|
|
108
122
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-card width="100%" max-width="800">
|
|
3
|
-
<v-toolbar
|
|
3
|
+
<v-toolbar class="screen-dialog-bar" elevation="0">
|
|
4
4
|
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
5
|
<span class="font-weight-bold text-h5">
|
|
6
6
|
{{ title }}
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<v-row no-gutters>
|
|
16
16
|
<!-- Route Name -->
|
|
17
17
|
<v-col cols="12" class="mb-4">
|
|
18
|
-
<label class="text-caption
|
|
19
|
-
Route Name <span class="text-
|
|
18
|
+
<label class="text-caption screen-hint mb-1 d-block">
|
|
19
|
+
Route Name <span class="text-error">*</span>
|
|
20
20
|
</label>
|
|
21
21
|
<v-text-field
|
|
22
22
|
v-model="form.name"
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
|
|
31
31
|
<!-- Checkpoints, Tolerance, Repeat Every -->
|
|
32
32
|
<v-col cols="12" md="4" class="mb-4 pr-md-2">
|
|
33
|
-
<label class="text-caption
|
|
34
|
-
Checkpoints <span class="text-
|
|
33
|
+
<label class="text-caption screen-hint mb-1 d-block">
|
|
34
|
+
Checkpoints <span class="text-error">*</span>
|
|
35
35
|
</label>
|
|
36
36
|
<v-select
|
|
37
37
|
v-model="form.checkPointNumber"
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
</v-col>
|
|
45
45
|
|
|
46
46
|
<v-col cols="12" md="4" class="mb-4 px-md-1">
|
|
47
|
-
<label class="text-caption
|
|
48
|
-
Tolerance (mins) <span class="text-
|
|
47
|
+
<label class="text-caption screen-hint mb-1 d-block">
|
|
48
|
+
Tolerance (mins) <span class="text-error">*</span>
|
|
49
49
|
</label>
|
|
50
50
|
<v-text-field
|
|
51
51
|
v-model="form.tolerance"
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
</v-col>
|
|
58
58
|
|
|
59
59
|
<v-col cols="12" md="4" class="mb-4 pl-md-2">
|
|
60
|
-
<label class="text-caption
|
|
61
|
-
Days <span class="text-
|
|
60
|
+
<label class="text-caption screen-hint mb-1 d-block">
|
|
61
|
+
Days <span class="text-error">*</span>
|
|
62
62
|
</label>
|
|
63
63
|
<v-select
|
|
64
64
|
v-model="form.days"
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
<v-card variant="outlined" class="pa-4" rounded="lg">
|
|
77
77
|
<div class="d-flex align-center justify-space-between mb-3">
|
|
78
78
|
<span class="text-h6 font-weight-medium">Start Times</span>
|
|
79
|
-
<span class="text-body-2
|
|
79
|
+
<span class="text-body-2 screen-hint">Schedule</span>
|
|
80
80
|
</div>
|
|
81
81
|
|
|
82
82
|
<!-- Start Time Slots -->
|
|
@@ -96,7 +96,6 @@
|
|
|
96
96
|
prepend-inner-icon="mdi-clock-outline"
|
|
97
97
|
hide-details
|
|
98
98
|
type="time"
|
|
99
|
-
bg-color="grey-lighten-4"
|
|
100
99
|
rounded="lg"
|
|
101
100
|
@update:model-value="syncEndTimeAt(index)"
|
|
102
101
|
/>
|
|
@@ -116,7 +115,6 @@
|
|
|
116
115
|
prepend-inner-icon="mdi-clock-outline"
|
|
117
116
|
hide-details
|
|
118
117
|
type="time"
|
|
119
|
-
bg-color="grey-lighten-2"
|
|
120
118
|
rounded="lg"
|
|
121
119
|
readonly
|
|
122
120
|
/>
|
|
@@ -160,19 +158,19 @@
|
|
|
160
158
|
<v-row no-gutters class="mb-2">
|
|
161
159
|
<v-col
|
|
162
160
|
cols="2"
|
|
163
|
-
class="text-caption
|
|
161
|
+
class="text-caption screen-hint font-weight-medium"
|
|
164
162
|
>
|
|
165
163
|
Checkpoints
|
|
166
164
|
</v-col>
|
|
167
165
|
<v-col
|
|
168
166
|
cols="6"
|
|
169
|
-
class="text-caption
|
|
167
|
+
class="text-caption screen-hint font-weight-medium pl-4"
|
|
170
168
|
>
|
|
171
169
|
NFC Tag
|
|
172
170
|
</v-col>
|
|
173
171
|
<v-col
|
|
174
172
|
cols="4"
|
|
175
|
-
class="text-caption
|
|
173
|
+
class="text-caption screen-hint font-weight-medium text-right"
|
|
176
174
|
>
|
|
177
175
|
Travel time
|
|
178
176
|
</v-col>
|
|
@@ -218,15 +216,15 @@
|
|
|
218
216
|
<!-- Summary -->
|
|
219
217
|
<v-col cols="12">
|
|
220
218
|
<v-row no-gutters class="mb-2">
|
|
221
|
-
<v-col cols="6" class="text-body-2
|
|
219
|
+
<v-col cols="6" class="text-body-2 screen-hint">
|
|
222
220
|
Tolerance Balance:
|
|
223
|
-
<span class="font-weight-bold
|
|
221
|
+
<span class="font-weight-bold"
|
|
224
222
|
>{{ toleranceBalance }} min</span
|
|
225
223
|
>
|
|
226
224
|
</v-col>
|
|
227
|
-
<v-col cols="6" class="text-body-2
|
|
225
|
+
<v-col cols="6" class="text-body-2 screen-hint text-right">
|
|
228
226
|
Total Travel Time:
|
|
229
|
-
<span class="font-weight-bold
|
|
227
|
+
<span class="font-weight-bold"
|
|
230
228
|
>{{ totalTravelTime }} min</span
|
|
231
229
|
>
|
|
232
230
|
</v-col>
|
|
@@ -238,7 +236,7 @@
|
|
|
238
236
|
|
|
239
237
|
<v-divider />
|
|
240
238
|
|
|
241
|
-
<v-toolbar class="pa-0" density="compact"
|
|
239
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact" elevation="0">
|
|
242
240
|
<v-row no-gutters>
|
|
243
241
|
<v-col cols="6" class="pa-0">
|
|
244
242
|
<v-btn
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
3
|
<v-col cols="12">
|
|
4
|
-
|
|
4
|
+
<!--
|
|
5
|
+
`AppCard` for the outlined card. This mounts inside PM `settings.vue`'s
|
|
6
|
+
"NFC Patrol Settings" expansion panel, which already draws that
|
|
7
|
+
heading - so NO `PageHeader`, or the panel would name itself twice.
|
|
8
|
+
-->
|
|
9
|
+
<AppCard>
|
|
5
10
|
<v-row no-gutters class="pa-6" align="center">
|
|
6
11
|
<v-col cols="12" md="7" class="pr-md-8">
|
|
7
12
|
<div class="text-subtitle-1 font-weight-medium">
|
|
@@ -36,10 +41,15 @@
|
|
|
36
41
|
|
|
37
42
|
<v-row no-gutters class="pa-6 pt-0">
|
|
38
43
|
<v-col cols="12" class="d-flex justify-end">
|
|
44
|
+
<!--
|
|
45
|
+
Stays a `v-btn`: `AppButton` has no `loading`, and dropping the
|
|
46
|
+
spinner would lose the only signal this save is in flight. The
|
|
47
|
+
design's fill comes from `.screen-btn-primary` instead of
|
|
48
|
+
Vuetify's `color="primary"` - same click, same `loading` gate.
|
|
49
|
+
-->
|
|
39
50
|
<v-btn
|
|
40
51
|
text="Save"
|
|
41
|
-
|
|
42
|
-
class="text-none"
|
|
52
|
+
class="screen-btn-primary"
|
|
43
53
|
size="large"
|
|
44
54
|
variant="flat"
|
|
45
55
|
@click="submit"
|
|
@@ -47,7 +57,7 @@
|
|
|
47
57
|
/>
|
|
48
58
|
</v-col>
|
|
49
59
|
</v-row>
|
|
50
|
-
</
|
|
60
|
+
</AppCard>
|
|
51
61
|
</v-col>
|
|
52
62
|
<Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
|
|
53
63
|
</v-row>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-card width="100%">
|
|
3
|
-
<v-toolbar>
|
|
3
|
+
<v-toolbar class="screen-dialog-bar">
|
|
4
4
|
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
5
|
<span class="font-weight-bold text-h5 text-capitalize">
|
|
6
6
|
{{ title }}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<v-row no-gutters>
|
|
17
17
|
<v-col cols="12" class="mb-4">
|
|
18
18
|
<label class="text-subtitle-2 font-weight-medium mb-2">
|
|
19
|
-
Name <span class="text-
|
|
19
|
+
Name <span class="text-error">*</span>
|
|
20
20
|
</label>
|
|
21
21
|
<v-text-field
|
|
22
22
|
v-model="form.name"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
<v-col cols="12" class="mb-4">
|
|
32
32
|
<label class="text-subtitle-2 font-weight-medium mb-2">
|
|
33
|
-
Tag ID <span class="text-
|
|
33
|
+
Tag ID <span class="text-error">*</span>
|
|
34
34
|
</label>
|
|
35
35
|
<v-text-field
|
|
36
36
|
v-model="form.tagID"
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
</v-form>
|
|
48
48
|
</v-card-text>
|
|
49
49
|
|
|
50
|
-
<v-toolbar class="pa-0" density="compact">
|
|
50
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
51
51
|
<v-row no-gutters>
|
|
52
52
|
<v-col cols="6" class="pa-0">
|
|
53
53
|
<v-btn
|
|
@@ -1,53 +1,51 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
3
|
<v-col cols="12">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
<!--
|
|
5
|
+
Two `grey-lighten-4` `v-toolbar`s - one above the table for refresh and
|
|
6
|
+
Add, one below it for the page range and the pager - become the ONE
|
|
7
|
+
`CardToolbar` the design draws. The range is the toolbar's own count
|
|
8
|
+
rather than a `text-font gray` caption; the pager keeps its model and
|
|
9
|
+
its `@update:value` emit, and Add keeps opening the same dialog.
|
|
10
|
+
|
|
11
|
+
This component mounts inside PM `settings.vue`'s "NFC Management"
|
|
12
|
+
expansion panel, which already draws that heading - so NO `PageHeader`
|
|
13
|
+
here, or the panel would read its name twice.
|
|
14
|
+
-->
|
|
15
|
+
<AppCard class="table-card">
|
|
16
|
+
<CardToolbar :count="pageRange">
|
|
17
|
+
<template #left>
|
|
7
18
|
<v-btn fab icon density="comfortable" @click="getNFCTagRefresh()">
|
|
8
19
|
<v-icon>mdi-refresh</v-icon>
|
|
9
20
|
</v-btn>
|
|
10
21
|
</template>
|
|
11
22
|
|
|
12
|
-
<template #
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
>
|
|
19
|
-
Add
|
|
20
|
-
</v-btn>
|
|
23
|
+
<template #right>
|
|
24
|
+
<local-pagination
|
|
25
|
+
v-model="page"
|
|
26
|
+
:length="pages"
|
|
27
|
+
@update:value="$emit('update:value', $event)"
|
|
28
|
+
/>
|
|
29
|
+
<AppButton @click="dialogAdd = true">Add</AppButton>
|
|
21
30
|
</template>
|
|
22
|
-
</
|
|
23
|
-
|
|
24
|
-
<v-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<template #append>
|
|
38
|
-
<v-row no-gutters justify="end" align="center">
|
|
39
|
-
<span class="mr-2 text-caption text-font gray">
|
|
40
|
-
{{ pageRange }}
|
|
41
|
-
</span>
|
|
42
|
-
<local-pagination
|
|
43
|
-
v-model="page"
|
|
44
|
-
:length="pages"
|
|
45
|
-
@update:value="$emit('update:value', $event)"
|
|
46
|
-
/>
|
|
47
|
-
</v-row>
|
|
31
|
+
</CardToolbar>
|
|
32
|
+
|
|
33
|
+
<v-data-table
|
|
34
|
+
:headers="headers"
|
|
35
|
+
:items="items"
|
|
36
|
+
fixed-header
|
|
37
|
+
hide-default-footer
|
|
38
|
+
@click:row="handleRowClick"
|
|
39
|
+
style="max-height: 300px"
|
|
40
|
+
>
|
|
41
|
+
<!-- The status column printed the raw word as plain text. `StatusChip`
|
|
42
|
+
prints the SAME word - it is given the item's own value - and
|
|
43
|
+
only adds the design's tone from the shared map. -->
|
|
44
|
+
<template #item.status="{ item }">
|
|
45
|
+
<StatusChip :status="(item as any).status" />
|
|
48
46
|
</template>
|
|
49
|
-
</v-
|
|
50
|
-
</
|
|
47
|
+
</v-data-table>
|
|
48
|
+
</AppCard>
|
|
51
49
|
</v-col>
|
|
52
50
|
|
|
53
51
|
<!-- Add Dialog -->
|
|
@@ -79,7 +77,7 @@
|
|
|
79
77
|
<!-- Preview Dialog -->
|
|
80
78
|
<v-dialog v-model="dialogPreview" persistent width="540">
|
|
81
79
|
<v-card width="100%">
|
|
82
|
-
<v-toolbar>
|
|
80
|
+
<v-toolbar class="screen-dialog-bar">
|
|
83
81
|
<v-row no-gutters class="fill-height px-6" align="center">
|
|
84
82
|
<span class="font-weight-bold text-h5 text-capitalize">
|
|
85
83
|
NFC Tag Details
|
|
@@ -110,7 +108,7 @@
|
|
|
110
108
|
</v-row>
|
|
111
109
|
</v-card-text>
|
|
112
110
|
|
|
113
|
-
<v-toolbar class="pa-0" density="compact">
|
|
111
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
114
112
|
<v-row no-gutters>
|
|
115
113
|
<v-col cols="6" class="pa-0">
|
|
116
114
|
<v-btn
|
|
@@ -171,7 +169,7 @@
|
|
|
171
169
|
Are you sure you want to delete this NFC Tag?
|
|
172
170
|
</v-card-text>
|
|
173
171
|
|
|
174
|
-
<v-toolbar class="pa-0" density="compact">
|
|
172
|
+
<v-toolbar class="pa-0 screen-dialog-bar" density="compact">
|
|
175
173
|
<v-row no-gutters>
|
|
176
174
|
<v-col cols="6" class="pa-0">
|
|
177
175
|
<v-btn
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
density="comfortable"
|
|
12
12
|
rounded="lg"
|
|
13
13
|
hide-details
|
|
14
|
-
bg-color="white"
|
|
15
14
|
@update:model-value="updateFilter('route', $event)"
|
|
16
15
|
/>
|
|
17
16
|
</v-col>
|
|
@@ -30,7 +29,6 @@
|
|
|
30
29
|
density="comfortable"
|
|
31
30
|
rounded="lg"
|
|
32
31
|
hide-details
|
|
33
|
-
bg-color="white"
|
|
34
32
|
@update:model-value="updateFilter('timeRange', $event)"
|
|
35
33
|
/>
|
|
36
34
|
</v-col>
|
|
@@ -47,7 +45,6 @@
|
|
|
47
45
|
density="comfortable"
|
|
48
46
|
rounded="lg"
|
|
49
47
|
hide-details
|
|
50
|
-
bg-color="white"
|
|
51
48
|
@update:model-value="updateFilter('date', $event)"
|
|
52
49
|
/>
|
|
53
50
|
</v-col>
|