Add organization and pesticide configuration pages
This commit is contained in:
parent
bcde604690
commit
71ffa13167
7 changed files with 783 additions and 49 deletions
|
|
@ -43,6 +43,16 @@ func Router() chi.Router {
|
|||
r.Method("GET", "/", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/communication", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/integration", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/integration/arcgis", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/organization", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/pesticide", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/pesticide/add", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/upload", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/upload/pool", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/upload/pool/custom", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/upload/pool/flyover", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/upload/{id}", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/user", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/configuration/user/add", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/intelligence", authenticatedHandler(getRoot))
|
||||
|
|
@ -54,19 +64,9 @@ func Router() chi.Router {
|
|||
|
||||
r.Method("GET", "/admin", authenticatedHandler(getAdminDash))
|
||||
r.Method("GET", "/cell/{cell}", authenticatedHandler(getCellDetails))
|
||||
r.Method("GET", "/configuration/integration", authenticatedHandler(getConfigurationIntegration))
|
||||
r.Method("GET", "/configuration/integration/arcgis", authenticatedHandler(getConfigurationIntegrationArcgis))
|
||||
r.Method("POST", "/configuration/integration/arcgis", authenticatedHandlerPost(postConfigurationIntegrationArcgis))
|
||||
r.Method("GET", "/configuration/organization", authenticatedHandler(getConfigurationOrganization))
|
||||
r.Method("GET", "/configuration/pesticide", authenticatedHandler(getConfigurationPesticide))
|
||||
r.Method("GET", "/configuration/pesticide/add", authenticatedHandler(getConfigurationPesticideAdd))
|
||||
r.Method("GET", "/configuration/upload", authenticatedHandler(getUploadList))
|
||||
r.Method("GET", "/configuration/upload/pool", authenticatedHandler(getUploadPool))
|
||||
r.Method("GET", "/configuration/upload/pool/flyover", authenticatedHandler(getUploadPoolFlyoverCreate))
|
||||
r.Method("POST", "/configuration/upload/pool/flyover", authenticatedHandlerPostMultipart(postUploadPoolFlyoverCreate))
|
||||
r.Method("GET", "/configuration/upload/pool/custom", authenticatedHandler(getUploadPoolCustomCreate))
|
||||
r.Method("POST", "/configuration/upload/pool/custom", authenticatedHandlerPostMultipart(postUploadPoolCustomCreate))
|
||||
r.Method("GET", "/configuration/upload/{id}", authenticatedHandler(getUploadByID))
|
||||
r.Method("POST", "/configuration/upload/{id}/commit", authenticatedHandlerPost(postUploadCommit))
|
||||
r.Method("POST", "/configuration/upload/{id}/discard", authenticatedHandlerPost(postUploadDiscard))
|
||||
r.Method("GET", "/download", authenticatedHandler(getDownloadList))
|
||||
|
|
|
|||
98
ts/components/MapServiceArea.vue
Normal file
98
ts/components/MapServiceArea.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div ref="mapContainer" class="map-container mb-4"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
|
||||
interface Props {
|
||||
organizationId: string;
|
||||
tegola: string;
|
||||
xmin: number;
|
||||
ymin: number;
|
||||
xmax: number;
|
||||
ymax: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const mapContainer = ref<HTMLDivElement | null>(null);
|
||||
let map: maplibregl.Map | null = null;
|
||||
|
||||
const initMap = () => {
|
||||
if (!mapContainer.value) return;
|
||||
|
||||
map = new maplibregl.Map({
|
||||
container: mapContainer.value,
|
||||
style: `${props.tegola}/maps/basic/style.json`,
|
||||
center: [(props.xmin + props.xmax) / 2, (props.ymin + props.ymax) / 2],
|
||||
zoom: 10,
|
||||
});
|
||||
|
||||
// Add service area bounds
|
||||
map.on("load", () => {
|
||||
if (!map) return;
|
||||
|
||||
map.addSource("service-area", {
|
||||
type: "geojson",
|
||||
data: {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[props.xmin, props.ymin],
|
||||
[props.xmax, props.ymin],
|
||||
[props.xmax, props.ymax],
|
||||
[props.xmin, props.ymax],
|
||||
[props.xmin, props.ymin],
|
||||
],
|
||||
],
|
||||
},
|
||||
properties: {},
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "service-area-fill",
|
||||
type: "fill",
|
||||
source: "service-area",
|
||||
paint: {
|
||||
"fill-color": "#088",
|
||||
"fill-opacity": 0.2,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "service-area-outline",
|
||||
type: "line",
|
||||
source: "service-area",
|
||||
paint: {
|
||||
"line-color": "#088",
|
||||
"line-width": 2,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
// Clean up on unmount
|
||||
onUnmounted(() => {
|
||||
if (map) {
|
||||
map.remove();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import maplibregl from "maplibre-gl";
|
||||
|
||||
const mapContainer = ref<HTMLDivElement | null>(null);
|
||||
let map: maplibregl.Map | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (!mapContainer.value) return;
|
||||
|
||||
map = new maplibregl.Map({
|
||||
container: mapContainer.value,
|
||||
style: "https://demotiles.maplibre.org/style.json",
|
||||
center: [-74.5, 40], // [lng, lat]
|
||||
zoom: 9,
|
||||
});
|
||||
|
||||
// Add a marker as an example
|
||||
new maplibregl.Marker().setLngLat([-74.5, 40]).addTo(map);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
map?.remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="mapContainer" class="map-container"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
12
ts/router.ts
12
ts/router.ts
|
|
@ -3,7 +3,9 @@ import type { RouteRecordRaw } from "vue-router";
|
|||
import Home from "./view/Home.vue";
|
||||
import About from "./view/About.vue";
|
||||
import Communication from "./view/Communication.vue";
|
||||
import ConfigurationOrganization from "./view/configuration/Organization.vue";
|
||||
import ConfigurationPesticide from "./view/configuration/Pesticide.vue";
|
||||
import ConfigurationPesticideAdd from "./view/configuration/PesticideAdd.vue";
|
||||
import ConfigurationRoot from "./view/configuration/Root.vue";
|
||||
import ConfigurationUser from "./view/configuration/User.vue";
|
||||
import ConfigurationUserAdd from "./view/configuration/UserAdd.vue";
|
||||
|
|
@ -29,11 +31,21 @@ const routes: RouteRecordRaw[] = [
|
|||
name: "Configuration",
|
||||
component: ConfigurationRoot,
|
||||
},
|
||||
{
|
||||
path: "/configuration/organization",
|
||||
name: "Organization Configuration",
|
||||
component: ConfigurationOrganization,
|
||||
},
|
||||
{
|
||||
path: "/configuration/pesticide",
|
||||
name: "Pesticide Configuration",
|
||||
component: ConfigurationPesticide,
|
||||
},
|
||||
{
|
||||
path: "/configuration/pesticide/add",
|
||||
name: "Pesticide Add",
|
||||
component: ConfigurationPesticideAdd,
|
||||
},
|
||||
{
|
||||
path: "/configuration/user",
|
||||
name: "User Configuration",
|
||||
|
|
|
|||
282
ts/view/configuration/Organization.vue
Normal file
282
ts/view/configuration/Organization.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>
|
||||
<i class="bi bi-geo-alt-fill text-primary me-2"></i> District
|
||||
Settings
|
||||
</h1>
|
||||
<button class="btn btn-primary" @click="saveChanges">
|
||||
<i class="bi bi-save me-2"></i>Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<MapServiceArea
|
||||
:organization-id="organization.id"
|
||||
:tegola="tegolaUrl"
|
||||
:xmin="organization.serviceArea.min.x"
|
||||
:ymin="organization.serviceArea.min.y"
|
||||
:xmax="organization.serviceArea.max.x"
|
||||
:ymax="organization.serviceArea.max.y"
|
||||
/>
|
||||
|
||||
<div class="row">
|
||||
<!-- Basic Information -->
|
||||
<div class="col-md-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5>
|
||||
<i class="bi bi-building me-2"></i> Organization Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="agencyName" class="form-label">
|
||||
<i class="bi bi-briefcase me-1"></i> Agency Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
v-model="organization.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="website" class="form-label">
|
||||
<i class="bi bi-globe me-1"></i> Website
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
class="form-control"
|
||||
id="website"
|
||||
v-model="organization.website"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="generalManager" class="form-label">
|
||||
<i class="bi bi-person-badge me-1"></i> General Manager Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="generalManager"
|
||||
v-model="organization.generalManagerName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="col-md-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5>
|
||||
<i class="bi bi-telephone me-2"></i> Contact Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="address" class="form-label">
|
||||
<i class="bi bi-geo me-1"></i> Street
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="address"
|
||||
v-model="organization.officeAddressStreet"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="city" class="form-label">
|
||||
<i class="bi bi-building me-1"></i> City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="city"
|
||||
v-model="organization.officeAddressCity"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="postalCode" class="form-label">
|
||||
<i class="bi bi-mailbox me-1"></i> Postal Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="postalCode"
|
||||
v-model="organization.officeAddressPostalCode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="phoneNumber" class="form-label">
|
||||
<i class="bi bi-telephone me-1"></i> Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
class="form-control"
|
||||
id="phoneNumber"
|
||||
v-model="organization.officePhone"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="faxNumber" class="form-label">
|
||||
<i class="bi bi-printer me-1"></i> Fax Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
class="form-control"
|
||||
id="faxNumber"
|
||||
v-model="organization.officeFax"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Organization Coverage Information -->
|
||||
<div class="col-12">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5><i class="bi bi-map me-2"></i> Service Area Coverage</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="totalArea" class="form-label">
|
||||
<i class="bi bi-rulers me-1"></i> Total Area (square
|
||||
meters)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="totalArea"
|
||||
v-model.number="organization.serviceAreaSquareMeters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import MapServiceArea from "../../components/MapServiceArea.vue";
|
||||
|
||||
interface ServiceAreaBounds {
|
||||
min: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
max: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface Organization {
|
||||
id: string;
|
||||
name: string;
|
||||
website: string;
|
||||
generalManagerName: string;
|
||||
officeAddressStreet: string;
|
||||
officeAddressCity: string;
|
||||
officeAddressPostalCode: string;
|
||||
officePhone: string;
|
||||
officeFax: string;
|
||||
serviceArea: ServiceAreaBounds;
|
||||
serviceAreaSquareMeters: number | null;
|
||||
}
|
||||
|
||||
const organization = ref<Organization>({
|
||||
id: "",
|
||||
name: "",
|
||||
website: "",
|
||||
generalManagerName: "",
|
||||
officeAddressStreet: "",
|
||||
officeAddressCity: "",
|
||||
officeAddressPostalCode: "",
|
||||
officePhone: "",
|
||||
officeFax: "",
|
||||
serviceArea: {
|
||||
min: { x: 0, y: 0 },
|
||||
max: { x: 0, y: 0 },
|
||||
},
|
||||
serviceAreaSquareMeters: null,
|
||||
});
|
||||
|
||||
const tegolaUrl = ref<string>("");
|
||||
|
||||
const fetchOrganizationData = async (): Promise<void> => {
|
||||
try {
|
||||
// Replace with your actual API endpoint
|
||||
const response = await fetch("/api/organization/settings");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch organization data");
|
||||
}
|
||||
const data = await response.json();
|
||||
organization.value = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
website: data.website || "",
|
||||
generalManagerName: data.generalManagerName || "",
|
||||
officeAddressStreet: data.officeAddressStreet || "",
|
||||
officeAddressCity: data.officeAddressCity || "",
|
||||
officeAddressPostalCode: data.officeAddressPostalCode || "",
|
||||
officePhone: data.officePhone || "",
|
||||
officeFax: data.officeFax || "",
|
||||
serviceArea: data.serviceArea || {
|
||||
min: { x: 0, y: 0 },
|
||||
max: { x: 0, y: 0 },
|
||||
},
|
||||
serviceAreaSquareMeters: data.serviceAreaSquareMeters || null,
|
||||
};
|
||||
tegolaUrl.value = data.tegolaUrl || "";
|
||||
} catch (error) {
|
||||
console.error("Error fetching organization data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveChanges = async (): Promise<void> => {
|
||||
try {
|
||||
// Replace with your actual API endpoint
|
||||
const response = await fetch("/api/organization/settings", {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(organization.value),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to save changes");
|
||||
}
|
||||
|
||||
// Show success notification
|
||||
alert("Changes saved successfully!");
|
||||
} catch (error) {
|
||||
console.error("Error saving changes:", error);
|
||||
alert("Failed to save changes. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchOrganizationData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-card {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,9 +2,11 @@
|
|||
<div class="container-fluid p-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="mb-0">Pesticide Products Configuration</h1>
|
||||
<a :href="configurationUrl" class="btn btn-primary" id="addProductBtn">
|
||||
<i class="bi bi-plus-circle me-2"></i>Add New Product
|
||||
</a>
|
||||
<RouterLink to="/configuration/pesticide/add"
|
||||
><button class="btn btn-primary" id="addProductBtn">
|
||||
<i class="bi bi-plus-circle me-2"></i>Add New Product
|
||||
</button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
|
|||
376
ts/view/configuration/PesticideAdd.vue
Normal file
376
ts/view/configuration/PesticideAdd.vue
Normal file
|
|
@ -0,0 +1,376 @@
|
|||
# VueJS Single-File Component (TypeScript) ```vue
|
||||
<template>
|
||||
<div class="container py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Settings</a></li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="pesticide-config.html">Pesticide</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
{{ pesticide.name }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<!-- Product Header -->
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h1 class="mb-2">{{ pesticide.name }}</h1>
|
||||
<p class="text-muted mb-0">
|
||||
{{ pesticide.description }}
|
||||
</p>
|
||||
</div>
|
||||
<span class="tag tag-enabled" v-if="pesticide.enabled">
|
||||
<i class="bi bi-check-circle-fill"></i> Enabled
|
||||
</span>
|
||||
<span class="tag tag-optional" v-else>
|
||||
<i class="bi bi-x-circle-fill"></i> Disabled
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- General Information -->
|
||||
<div class="mb-4">
|
||||
<h2 class="section-heading">General Information</h2>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">Formulation</div>
|
||||
<div>{{ pesticide.formulation }}</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">EPA Registration Number</div>
|
||||
<div>{{ pesticide.epaNumber }}</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">Active Ingredients</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="ingredient in pesticide.activeIngredients"
|
||||
:key="ingredient.name"
|
||||
>
|
||||
{{ ingredient.name }} ({{ ingredient.percentage }}%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">Biological Targeting</div>
|
||||
<div class="mt-1">
|
||||
<span
|
||||
v-for="stage in instarStages"
|
||||
:key="stage.code"
|
||||
class="target-icon"
|
||||
:class="stage.active ? 'target-active' : 'target-inactive'"
|
||||
:title="stage.label"
|
||||
>
|
||||
{{ stage.code }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">Application Rates</div>
|
||||
<div>
|
||||
Low: {{ pesticide.applicationRates.low }}<br />
|
||||
High: {{ pesticide.applicationRates.high }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="info-label">Residual</div>
|
||||
<div>{{ pesticide.residual }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Notes -->
|
||||
<div class="alert alert-info mb-4" v-if="pesticide.usageNotes">
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-info-circle-fill fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="alert-heading">Key Usage Notes</h5>
|
||||
<p class="mb-0">
|
||||
{{ pesticide.usageNotes }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PPE Requirements -->
|
||||
<div class="mb-4">
|
||||
<h2 class="section-heading">PPE Requirements</h2>
|
||||
<div>
|
||||
<span
|
||||
v-for="ppe in pesticide.ppeRequirements"
|
||||
:key="ppe.name"
|
||||
class="tag"
|
||||
:class="ppe.optional ? 'tag-optional' : 'tag-ppe'"
|
||||
>
|
||||
<i :class="`bi ${ppe.icon}`"></i>
|
||||
{{ ppe.name }}
|
||||
<span v-if="ppe.optional"> (Optional)</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equipment Supported -->
|
||||
<div class="mb-4">
|
||||
<h2 class="section-heading">Equipment Supported</h2>
|
||||
<div>
|
||||
<span
|
||||
v-for="equipment in pesticide.equipmentSupported"
|
||||
:key="equipment.name"
|
||||
class="tag tag-equipment"
|
||||
>
|
||||
<i :class="`bi ${equipment.icon}`"></i>
|
||||
{{ equipment.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suitability -->
|
||||
<div class="mb-4">
|
||||
<h2 class="section-heading">Suitability</h2>
|
||||
<div class="row g-3">
|
||||
<div
|
||||
v-for="suit in pesticide.suitability"
|
||||
:key="suit.type"
|
||||
class="col-md-6 col-lg-3"
|
||||
>
|
||||
<div class="info-label">{{ suit.type }}</div>
|
||||
<div>
|
||||
<span
|
||||
class="badge"
|
||||
:class="getSuitabilityBadgeClass(suit.level)"
|
||||
>
|
||||
{{ suit.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="d-flex justify-content-between mt-5 pt-3 border-top">
|
||||
<button
|
||||
class="btn btn-outline-danger"
|
||||
@click="handleRemoveFromInventory"
|
||||
>
|
||||
<i class="bi bi-trash me-2"></i> Remove from Inventory
|
||||
</button>
|
||||
<button class="btn btn-success" @click="handleAddToInventory">
|
||||
<i class="bi bi-plus-circle me-2"></i> Add to Allowed Inventory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
interface ActiveIngredient {
|
||||
name: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
interface ApplicationRates {
|
||||
low: string;
|
||||
high: string;
|
||||
}
|
||||
|
||||
interface BiologicalTarget {
|
||||
code: string;
|
||||
label: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface PPERequirement {
|
||||
name: string;
|
||||
icon: string;
|
||||
optional: boolean;
|
||||
}
|
||||
|
||||
interface Equipment {
|
||||
name: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface Suitability {
|
||||
type: string;
|
||||
level: "recommended" | "ok" | "none" | "warning";
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Pesticide {
|
||||
name: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
formulation: string;
|
||||
epaNumber: string;
|
||||
activeIngredients: ActiveIngredient[];
|
||||
biologicalTargets: BiologicalTarget[];
|
||||
applicationRates: ApplicationRates;
|
||||
residual: string;
|
||||
usageNotes: string;
|
||||
ppeRequirements: PPERequirement[];
|
||||
equipmentSupported: Equipment[];
|
||||
suitability: Suitability[];
|
||||
}
|
||||
|
||||
// Sample data - replace with API call or props
|
||||
const pesticide = ref<Pesticide>({
|
||||
name: "VectoMax FG",
|
||||
description:
|
||||
"Biological larvicide granules combining Bacillus thuringiensis subspecies israelensis and Bacillus sphaericus for extended residual control of mosquito larvae.",
|
||||
enabled: true,
|
||||
formulation: "Granule",
|
||||
epaNumber: "73049-429",
|
||||
activeIngredients: [
|
||||
{ name: "Bacillus thuringiensis subspecies israelensis", percentage: 2.7 },
|
||||
{ name: "Bacillus sphaericus", percentage: 4.5 },
|
||||
],
|
||||
biologicalTargets: [
|
||||
{ code: "I1", label: "Instar Stage 1", active: true },
|
||||
{ code: "I2", label: "Instar Stage 2", active: true },
|
||||
{ code: "I3", label: "Instar Stage 3", active: true },
|
||||
{ code: "I4", label: "Instar Stage 4", active: true },
|
||||
{ code: "P", label: "Pupae", active: false },
|
||||
],
|
||||
applicationRates: {
|
||||
low: "5 lbs/acre",
|
||||
high: "20 lbs/acre",
|
||||
},
|
||||
residual: "Up to 30 days (environmental conditions dependent)",
|
||||
usageNotes:
|
||||
"Apply evenly across water surface. Use higher rate when L4 present or when organic load is high. Avoid application in ponds with fish unless approved by a supervisor.",
|
||||
ppeRequirements: [
|
||||
{ name: "Gloves", icon: "bi-hand-thumbs-up", optional: false },
|
||||
{ name: "Eye Protection", icon: "bi-eyeglasses", optional: false },
|
||||
{ name: "Respirator", icon: "bi-mask", optional: true },
|
||||
],
|
||||
equipmentSupported: [
|
||||
{ name: "Backpack Spreader", icon: "bi-backpack" },
|
||||
{ name: "Hand Spreader", icon: "bi-hand-index-thumb" },
|
||||
{ name: "Truck Granule Unit", icon: "bi-truck" },
|
||||
],
|
||||
suitability: [
|
||||
{ type: "Pools", level: "recommended", label: "Recommended" },
|
||||
{ type: "Vegetation", level: "ok", label: "OK" },
|
||||
{ type: "High Organics", level: "ok", label: "OK" },
|
||||
{ type: "Organic Crop Restriction", level: "none", label: "None" },
|
||||
],
|
||||
});
|
||||
|
||||
const instarStages = computed(() => pesticide.value.biologicalTargets);
|
||||
|
||||
const getSuitabilityBadgeClass = (level: string): string => {
|
||||
const classes: Record<string, string> = {
|
||||
recommended: "bg-success",
|
||||
ok: "bg-info text-dark",
|
||||
none: "bg-secondary",
|
||||
warning: "bg-warning text-dark",
|
||||
};
|
||||
return classes[level] || "bg-secondary";
|
||||
};
|
||||
|
||||
const handleRemoveFromInventory = (): void => {
|
||||
// Implement remove logic
|
||||
console.log("Remove from inventory");
|
||||
// Example: emit event or call API
|
||||
// emit('remove', pesticide.value);
|
||||
};
|
||||
|
||||
const handleAddToInventory = (): void => {
|
||||
// Implement add logic
|
||||
console.log("Add to inventory");
|
||||
// Example: emit event or call API
|
||||
// emit('add', pesticide.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.section-heading {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.target-icon {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 4px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.target-active {
|
||||
background-color: #0d6efd;
|
||||
}
|
||||
|
||||
.target-inactive {
|
||||
background-color: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.8rem;
|
||||
margin: 0.2rem;
|
||||
border-radius: 30px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tag i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-enabled {
|
||||
background-color: #d1e7dd;
|
||||
color: #0f5132;
|
||||
border-color: #a3cfbb;
|
||||
}
|
||||
|
||||
.tag-ppe {
|
||||
background-color: #e2e3e5;
|
||||
color: #41464b;
|
||||
border-color: #d3d6d8;
|
||||
}
|
||||
|
||||
.tag-equipment {
|
||||
background-color: #cff4fc;
|
||||
color: #055160;
|
||||
border-color: #9eeaf9;
|
||||
}
|
||||
|
||||
.tag-suitability {
|
||||
background-color: #fff3cd;
|
||||
color: #664d03;
|
||||
border-color: #ffecb5;
|
||||
}
|
||||
|
||||
.tag-optional {
|
||||
background-color: #f8f9fa;
|
||||
color: #6c757d;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue