Add initial compliance intro page
This commit is contained in:
parent
c393f6fd81
commit
20614acb86
12 changed files with 117 additions and 81 deletions
|
|
@ -2,80 +2,6 @@
|
|||
|
||||
{{ define "title" }}Compliance Request{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > .container-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: #0d6efd;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container-fluid px-3 py-3">
|
||||
<!-- Header -->
|
||||
<header class="text-center mb-4 pb-3 border-bottom">
|
||||
<div class="d-flex align-items-center justify-content-center mb-2">
|
||||
<img
|
||||
src="{{ .District.URLLogo }}"
|
||||
alt="{{ .District.Name }} logo"
|
||||
class="me-2"
|
||||
style="height: 40px; width: auto;"
|
||||
/>
|
||||
<h1 class="h5 mb-0">{{ .District.Name }}</h1>
|
||||
</div>
|
||||
<div class="text-muted small">
|
||||
<i class="bi bi-telephone"></i> {{ .District.OfficePhone }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="small text-muted">Step 1 of 8</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
style="width: 12%;"
|
||||
aria-valuenow="12"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<h2 class="h4 mb-3">Action requested for this property</h2>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<p class="mb-2">
|
||||
The {{ .District.Name }} has identified a possible mosquito breeding
|
||||
source at this property during a recent inspection.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Please confirm the property address and provide any photos, access
|
||||
details, and contact information to help us review and resolve this
|
||||
issue quickly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-grid mt-4">
|
||||
<a class="btn btn-primary btn-lg" href="compliance/address"
|
||||
>Get Started</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</header>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
interface Props {
|
||||
district?: District;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { onMounted, ref } from "vue";
|
|||
import { useHead } from "@vueuse/head";
|
||||
import { router } from "@/rmo/router";
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
|
||||
const district = useDistrictStore();
|
||||
const count = ref<number>(0);
|
||||
|
|
|
|||
52
ts/rmo/content/compliance/Intro.vue
Normal file
52
ts/rmo/content/compliance/Intro.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="container-fluid px-3 py-3">
|
||||
<HeaderCompliance :district="district" />
|
||||
<!-- Progress Bar -->
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="small text-muted">Step 1 of 8</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
style="width: 12%"
|
||||
aria-valuenow="12"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<h2 class="h4 mb-3">Action requested for this property</h2>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<p class="mb-2">
|
||||
The {{ district.name }} has identified a possible mosquito breeding
|
||||
source at this property during a recent inspection.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Please confirm the property address and provide any photos, access
|
||||
details, and contact information to help us review and resolve this
|
||||
issue quickly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-grid mt-4">
|
||||
<RouterLink class="btn btn-primary btn-lg" to="./address">
|
||||
Get Started</RouterLink
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { District } from "@/type/api";
|
||||
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
|
||||
interface Props {
|
||||
district: District;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import Compliance from "@/rmo/view/Compliance.vue";
|
||||
import HomeBase from "@/rmo/view/Home.vue";
|
||||
import HomeDistrict from "@/rmo/view/district/Home.vue";
|
||||
import NuisanceBase from "@/rmo/view/Nuisance.vue";
|
||||
|
|
@ -25,6 +26,12 @@ const routes: RouteRecordRaw[] = [
|
|||
component: HomeDistrict,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/district/:slug/compliance",
|
||||
name: "Compliance",
|
||||
component: Compliance,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/district/:slug/nuisance",
|
||||
name: "NuisanceDistrict",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import { District } from "@/rmo/type";
|
||||
import { District } from "@/type/api";
|
||||
|
||||
export const useDistrictStore = defineStore("district", () => {
|
||||
const districts = ref<District[] | null>(null);
|
||||
|
|
|
|||
45
ts/rmo/view/Compliance.vue
Normal file
45
ts/rmo/view/Compliance.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<style scoped>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > .container-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: #0d6efd;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<template v-if="district">
|
||||
<Intro :district="district" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>loading {{ slug }}...</p>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import Intro from "@/rmo/content/compliance/Intro.vue";
|
||||
import type { District } from "@/type/api";
|
||||
interface Props {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
const districtStore = useDistrictStore();
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const district = computedAsync(async (): Promise<District | undefined> => {
|
||||
const districts = await districtStore.get();
|
||||
return districts.find((district: District) => district.slug == props.slug);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
import { ref } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
import Home from "@/rmo/content/Home.vue";
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import HeaderDistrict from "@/components/HeaderDistrict.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
import { ref } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
import Nuisance from "@/rmo/content/Nuisance.vue";
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import HeaderDistrict from "@/components/HeaderDistrict.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
import { ref } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
import Status from "@/rmo/content/Status.vue";
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import HeaderDistrict from "@/components/HeaderDistrict.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
import { ref } from "vue";
|
||||
import { computedAsync } from "@vueuse/core";
|
||||
import Water from "@/rmo/content/Water.vue";
|
||||
import type { District } from "@/rmo/type";
|
||||
import type { District } from "@/type/api";
|
||||
import { useDistrictStore } from "@/rmo/store/district";
|
||||
import HeaderDistrict from "@/components/HeaderDistrict.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ export interface Address {
|
|||
street: string;
|
||||
unit: string;
|
||||
}
|
||||
export interface District {
|
||||
name: string;
|
||||
phone_office: string;
|
||||
slug: string;
|
||||
url_logo: string;
|
||||
}
|
||||
export interface Location {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue