Add status page to RMO
This commit is contained in:
parent
5842b6251d
commit
c0e414bdc3
2 changed files with 116 additions and 7 deletions
|
|
@ -11,13 +11,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.district-logo {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-height: 88px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.service-card {
|
.service-card {
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
116
ts/rmo/view/Status.vue
Normal file
116
ts/rmo/view/Status.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<div class="container my-4">
|
||||||
|
<!-- Search Box -->
|
||||||
|
<div class="card search-box mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<form class="row g-3 align-items-center" action="#" id="lookup-form">
|
||||||
|
<div class="col-md-9">
|
||||||
|
<address-or-report-input
|
||||||
|
name="address-or-report"
|
||||||
|
placeholder="Enter a report ID, address, neighborhood, or zip code"
|
||||||
|
></address-or-report-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<span
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
id="lookup-tooltip"
|
||||||
|
title="You can look up a report once you type in the full report ID. Start typing and I'll suggest complete IDs"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary btn-lg w-100 disabled"
|
||||||
|
disabled
|
||||||
|
id="lookup"
|
||||||
|
>
|
||||||
|
Lookup Report by ID
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="form-check custom-circle-checkbox">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="checkboxNuisance"
|
||||||
|
data-color="danger"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="checkboxNuisance"
|
||||||
|
>Mosquito Nuisance</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-check custom-circle-checkbox">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="checkboxWater"
|
||||||
|
data-color="success"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="checkboxWater"
|
||||||
|
>Standing Water</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Map Section -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header bg-info text-white">
|
||||||
|
<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-0">
|
||||||
|
<div class="map-container">
|
||||||
|
<map-multipoint
|
||||||
|
id="map"
|
||||||
|
xmax="-118.0"
|
||||||
|
ymax="37.0"
|
||||||
|
xmin="-119.0"
|
||||||
|
ymin="36.0"
|
||||||
|
tegola="{{ .URL.Tegola }}"
|
||||||
|
zoom="9"
|
||||||
|
></map-multipoint>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Results Section -->
|
||||||
|
<div class="card">
|
||||||
|
<div
|
||||||
|
class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
|
||||||
|
>
|
||||||
|
<h5 class="mb-0">
|
||||||
|
<i class="bi bi-geo-fill me-2"></i>Reports Near You
|
||||||
|
</h5>
|
||||||
|
<span class="badge bg-light text-dark" id="report-count"
|
||||||
|
>- Reports Found</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-0">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table-report />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="card-footer">
|
||||||
|
<nav aria-label="Page navigation">
|
||||||
|
<ul class="pagination justify-content-center mb-0">
|
||||||
|
<li class="page-item disabled">
|
||||||
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||||
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||||
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="#">Next</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue