|
| 1 | +<template> |
| 2 | + <Card v-if="activeIndex === 3" class="mt-6 p-5"> |
| 3 | + <template #content> |
| 4 | + <div class="w-full flex flex-col justify-between items-start gap-4"> |
| 5 | + <h1 class="text-2xl font-semibold">Add Field Help</h1> |
| 6 | + <p> |
| 7 | + Welcome to the Add Field page! This page guides you through the process of adding a new field to your account. |
| 8 | + The process consists of three main steps: |
| 9 | + </p> |
| 10 | + |
| 11 | + <h2 class="text-xl font-semibold">1. Field Info</h2> |
| 12 | + <p>In this step, you provide basic information about your new field:</p> |
| 13 | + <ul class="list-disc ml-6"> |
| 14 | + <li><strong>Field Name:</strong> Enter a unique name for your field.</li> |
| 15 | + <li><strong>Crop Type:</strong> Select the type of crop you are planting from the dropdown menu.</li> |
| 16 | + </ul> |
| 17 | + <p>Example:</p> |
| 18 | + <div class="flex flex-col gap-2"> |
| 19 | + <label for="field_name">Field Name</label> |
| 20 | + <InputText id="field_name" placeholder="Name" class="w-full sm:w-[250px]" /> |
| 21 | + <small id="field_name">Enter your new field name above.</small> |
| 22 | + <Dropdown |
| 23 | + v-model="selectedItem" |
| 24 | + :options="cropOptions" |
| 25 | + optionLabel="name" |
| 26 | + placeholder="Select a Crop Type" |
| 27 | + class="w-full sm:w-[250px] mt-4" |
| 28 | + /> |
| 29 | + </div> |
| 30 | + |
| 31 | + <h2 class="text-xl font-semibold">2. Field Map</h2> |
| 32 | + <p>In this step, you draw the boundaries of your field on the map:</p> |
| 33 | + <ul class="list-disc ml-6"> |
| 34 | + <li>Use the map to locate your field's area.</li> |
| 35 | + <li>Use the drawing tools to outline the field's boundaries.</li> |
| 36 | + <li>You can edit the shape by dragging the corners or edges of the polygon.</li> |
| 37 | + </ul> |
| 38 | + |
| 39 | + <h2 class="text-xl font-semibold">3. Confirm</h2> |
| 40 | + <p>In the final step, review the information you have entered:</p> |
| 41 | + <ul class="list-disc ml-6"> |
| 42 | + <li><strong>Field Name:</strong> Verify the field name is correct.</li> |
| 43 | + <li><strong>Crop Type:</strong> Ensure you have selected the correct crop type.</li> |
| 44 | + <li><strong>Field Map:</strong> Check that the field area has been properly drawn.</li> |
| 45 | + </ul> |
| 46 | + <p> |
| 47 | + If everything is correct, click the <Button label="Save Field" size="small" icon="pi pi-check" /> button to |
| 48 | + save your new field. |
| 49 | + </p> |
| 50 | + |
| 51 | + <h2 class="text-xl font-semibold">Navigation Buttons</h2> |
| 52 | + <p>Use the navigation buttons at the bottom of each step to move between steps:</p> |
| 53 | + <ul class="list-disc ml-6"> |
| 54 | + <li class="mb-2"><Button label="Back" size="small" icon="pi pi-arrow-left" />: Go to the previous step.</li> |
| 55 | + <li> |
| 56 | + <Button label="Next" size="small" icon="pi pi-arrow-right" iconPos="right" />: Proceed to the next step. |
| 57 | + </li> |
| 58 | + </ul> |
| 59 | + |
| 60 | + <h2 class="text-xl font-semibold">Loading Indicators</h2> |
| 61 | + <p> |
| 62 | + When saving the field, a loading indicator will appear on the |
| 63 | + <Button label="Save Field" size="small" icon="pi pi-check" /> button. Please wait until the process is |
| 64 | + complete. |
| 65 | + </p> |
| 66 | + |
| 67 | + <h2 class="text-xl font-semibold">Success Message</h2> |
| 68 | + <p> |
| 69 | + After successfully saving the field, a success message will appear confirming that your field has been saved. |
| 70 | + </p> |
| 71 | + <p>Example:</p> |
| 72 | + <div class="flex items-center gap-2"> |
| 73 | + <i class="pi pi-check-circle text-green-500"></i> |
| 74 | + <span class="text-green-500">Field saved successfully!</span> |
| 75 | + </div> |
| 76 | + </div> |
| 77 | + </template> |
| 78 | + </Card> |
| 79 | +</template> |
| 80 | + |
| 81 | +<script setup> |
| 82 | +const props = defineProps({ |
| 83 | + activeIndex: { |
| 84 | + type: Number, |
| 85 | + default: 0, |
| 86 | + }, |
| 87 | +}) |
| 88 | +
|
| 89 | +const selectedItem = ref() |
| 90 | +const cropOptions = ref([ |
| 91 | + { name: 'Wheat', id: 1 }, |
| 92 | + { name: 'Maize', id: 2 }, |
| 93 | + { name: 'Soybeans', id: 3 }, |
| 94 | + { name: 'Canola', id: 4 }, |
| 95 | + { name: 'Barley', id: 5 }, |
| 96 | + { name: 'Sunflower', id: 6 }, |
| 97 | + { name: 'Groundnuts', id: 7 }, |
| 98 | + { name: 'Sorghum', id: 8 }, |
| 99 | + { name: 'Oats', id: 9 }, |
| 100 | +]) |
| 101 | +</script> |
0 commit comments