376 lines
9.2 KiB
Vue
376 lines
9.2 KiB
Vue
# 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>
|