From 49a66ad832727000ac1ed342b59924b43352fba6 Mon Sep 17 00:00:00 2001
From: Moises Sacal <moisbo@gmail.com>
Date: Mon, 27 Nov 2023 13:00:02 +1100
Subject: [PATCH] changed so if stubble is burnt removed or retained you cannot
 have graze

---
 package-lock.json                 |  4 +-
 package.json                      |  2 +-
 public/sample-data-20-year.json   |  2 +-
 src/components.d.ts               |  1 +
 src/components/Input.vue          | 81 ++++++++++++++-----------------
 src/components/RotationSelect.vue | 38 +++++++++++++++
 6 files changed, 79 insertions(+), 49 deletions(-)
 create mode 100644 src/components/RotationSelect.vue

diff --git a/package-lock.json b/package-lock.json
index 8c6510a..5d362b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "socrates-web",
-  "version": "0.0.23",
+  "version": "1.0.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "socrates-web",
-      "version": "0.0.23",
+      "version": "1.0.5",
       "dependencies": {
         "chart.js": "^4.3.0",
         "element-plus": "^2.3.5",
diff --git a/package.json b/package.json
index 1ff98ba..9c779ff 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "socrates-web",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "homepage": "https://soil-and-land.github.io/socrates-web/",
   "scripts": {
diff --git a/public/sample-data-20-year.json b/public/sample-data-20-year.json
index bd6c2e1..27caea3 100644
--- a/public/sample-data-20-year.json
+++ b/public/sample-data-20-year.json
@@ -45,7 +45,7 @@
       "year": 2,
       "plant": 0,
       "stubble": 0,
-      "graze": 0,
+      "graze": null,
       "fertiliser": 200
     },
     {
diff --git a/src/components.d.ts b/src/components.d.ts
index 9024004..576a5df 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -38,6 +38,7 @@ declare module '@vue/runtime-core' {
     ParameterTable: typeof import('./components/ParameterTable.vue')['default']
     PieChart: typeof import('./components/PieChart.vue')['default']
     ResultsTable: typeof import('./components/ResultsTable.vue')['default']
+    RotationSelect: typeof import('./components/RotationSelect.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     YearlyTable: typeof import('./components/YearlyTable.vue')['default']
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 6f41302..3b706a5 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -41,6 +41,7 @@ const grazes = [
   {'id': 1, 'name': 'Heavy'},
 ];
 const stubbles = [
+  {'id': 'null', 'name': 'None'},
   {'id': 0, 'name': 'Burnt or Removed'},
   {'id': 1, 'name': 'Retained'}
 ];
@@ -458,37 +459,39 @@ function isIterable(obj) {
           <h3>Climate</h3>
           <el-row>
             <el-col class="py-1">
-              <el-row >
+              <el-row>
                 <el-col :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
                   <div>Method of entering data</div>
                 </el-col>
                 <el-col :xl="20" :lg="20" :md="20" :sm="24" :xs="24">
                   <div>
-                <el-select v-model="store.climateMethodDataEntry" class="w-full" placeholder="Select">
-                  <el-option
-                      label="Enter yearly rainfall & mean temperature"
-                      :value="0"/>
-                  <el-option
-                      label="Enter average rainfall & mean temperature"
-                      :value="1"/>
-                  <!--              <el-option-->
-                  <!--                  label="Closest town, stored weather averages"-->
-                  <!--                  :value="2"/>-->
-                  <!--              <el-option-->
-                  <!--                  label="Closest town, actual weather data"-->
-                  <!--                  :value="3"/>-->
-                  <el-option
-                      label="Enter monthly rainfall & mean temperature"
-                      :value="4"/>
-                </el-select>
-                <el-button v-if="store.climateMethodDataEntry===4"
-                           @click="store.toggleMonthlyClimate = !store.toggleMonthlyClimate">
-                  {{ store.toggleMonthlyClimate ? 'Hide Monthly Rain/Temperature' : 'Show Monthly Rain/Temperature' }}
-                </el-button>
-                <el-button class="my-2" v-if="store.climateMethodDataEntry===0"
-                           @click="store.toggleYearlyClimate = !store.toggleYearlyClimate">
-                  {{ store.toggleYearlyClimate ? 'Hide Yearly Rain' : 'Show Yearly Rain' }}
-                </el-button>
+                    <el-select v-model="store.climateMethodDataEntry" class="w-full" placeholder="Select">
+                      <el-option
+                          label="Enter yearly rainfall & mean temperature"
+                          :value="0"/>
+                      <el-option
+                          label="Enter average rainfall & mean temperature"
+                          :value="1"/>
+                      <!--              <el-option-->
+                      <!--                  label="Closest town, stored weather averages"-->
+                      <!--                  :value="2"/>-->
+                      <!--              <el-option-->
+                      <!--                  label="Closest town, actual weather data"-->
+                      <!--                  :value="3"/>-->
+                      <el-option
+                          label="Enter monthly rainfall & mean temperature"
+                          :value="4"/>
+                    </el-select>
+                    <el-button v-if="store.climateMethodDataEntry===4"
+                               @click="store.toggleMonthlyClimate = !store.toggleMonthlyClimate">
+                      {{
+                        store.toggleMonthlyClimate ? 'Hide Monthly Rain/Temperature' : 'Show Monthly Rain/Temperature'
+                      }}
+                    </el-button>
+                    <el-button class="my-2" v-if="store.climateMethodDataEntry===0"
+                               @click="store.toggleYearlyClimate = !store.toggleYearlyClimate">
+                      {{ store.toggleYearlyClimate ? 'Hide Yearly Rain' : 'Show Yearly Rain' }}
+                    </el-button>
                   </div>
                 </el-col>
               </el-row>
@@ -589,26 +592,14 @@ function isIterable(obj) {
               </el-select>
             </el-col>
             <el-col :span="5" class="p-2">
-              <div v-if="rotation['plant'] < 5 ">
-                <el-select v-model="rotation['stubble']"
-                           :disabled="rotation['plant'] === 5 || rotation['plant'] === 6 || rotation['plant'] === 7">
-                  <el-option v-for="stubble in stubbles"
-                             :key="stubble.id"
-                             :label="stubble.name"
-                             :value="stubble.id"/>
-                </el-select>
-              </div>
+              <rotation-select :modelValue="rotation['stubble']" :year="rotation['year']" :name="'stubble'"
+                               :posibleValues="stubbles" @update:modelValue="(v)=>{rotation['stubble'] = v}"
+                               :nullify="rotation['plant'] === 5 || rotation['plant'] === 6 || rotation['plant'] === 7"/>
             </el-col>
             <el-col :span="5" class="p-2">
-              <div v-if="rotation['plant'] !== 6">
-                <el-select v-model="rotation['graze']"
-                           :disabled="rotation['plant'] === 6">
-                  <el-option v-for="graze in grazes"
-                             :key="rotation['year'] + '_graze'"
-                             :label="graze.name"
-                             :value="graze.id"/>
-                </el-select>
-              </div>
+                <rotation-select :modelValue="rotation['graze']" :year="rotation['year']" :name="'graze'"
+                                 :posibleValues="grazes" @update:modelValue="(v)=>{rotation['graze'] = v}"
+                                 :nullify="rotation['plant'] === 6 || rotation['stubble'] === 0 || rotation['stubble'] === 1"/>
             </el-col>
             <el-col :span="5" class="p-2">
               <el-input v-model="rotation['fertiliser']"/>
@@ -634,7 +625,7 @@ function isIterable(obj) {
           <h3>Yields</h3>
           <el-row>
             <el-col class="py-1">
-              <el-row >
+              <el-row>
                 <el-col :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
                   <div>
                     Method of entering yield
diff --git a/src/components/RotationSelect.vue b/src/components/RotationSelect.vue
new file mode 100644
index 0000000..972d9e2
--- /dev/null
+++ b/src/components/RotationSelect.vue
@@ -0,0 +1,38 @@
+<script setup lang="js">
+import {onMounted, watch} from "vue";
+
+const props = defineProps(['posibleValues', 'year', 'modelValue', 'name', 'nullify']);
+const emit = defineEmits(['update:modelValue']);
+
+let value = props.modelValue;
+
+onMounted(() => {
+  if (props.nullify) {
+    value = 'null'
+    updateProperty('null');
+  }
+});
+
+watch(() => props.nullify, (newValue, oldValue) => {
+  if (props.nullify) {
+    value = 'null'
+    updateProperty('null');
+  }
+}, {immediate: true});
+
+function updateProperty(value) {
+  emit('update:modelValue', value);
+}
+
+</script>
+<template>
+  <!--    value: {{ value }} props.nullify {{!props.nullify }}-->
+  <div v-if="!nullify">
+    <el-select v-model="value" @change="updateProperty($event)">
+      <el-option v-for="obj in posibleValues"
+                 :key="props.year + props.name"
+                 :label="obj.name"
+                 :value="obj.id"/>
+    </el-select>
+  </div>
+</template>