Eli Ribble
9dccd21cee
* Create a nwe AddressAndMapLocator which abstracts out the behavior of selecting a location * Fix the overlay causing render errors on the MapLocator by getting rid of the overlay and just using a lock indicator * Fix MapLocator zooming in to the wrong place by not framing the markers * Remove Latlng from platform and just use Location with optional accuracy * Use nested types with form-encoded POST * Fix styles on water report page
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<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">
|
|
<router-view v-slot="{ Component }">
|
|
<component :is="Component" :district="district" @doLocator="doLocator" />
|
|
</router-view>
|
|
</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 { useStoreDistrict } from "@/rmo/store/district";
|
|
import Intro from "@/rmo/content/compliance/Intro.vue";
|
|
import type { District } from "@/type/api";
|
|
import { Locator } from "@/type/map";
|
|
|
|
interface Props {
|
|
slug: string;
|
|
}
|
|
|
|
const districtStore = useStoreDistrict();
|
|
|
|
const props = defineProps<Props>();
|
|
const district = computedAsync(async (): Promise<District | undefined> => {
|
|
const districts = await districtStore.list();
|
|
return districts.find((district: District) => district.slug == props.slug);
|
|
});
|
|
function doLocator(locator: Locator | null) {
|
|
console.log("locator", locator);
|
|
}
|
|
</script>
|