{% extends "base.html" %} {% block content %} {% load wx_filters %}
<div class="srf-container">
  <div id="app" v-cloak>
    <v-app id="dataTableStyle">
      <v-content fluid fill-height style="background: white">
        <v-layout column>
          <div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
            <span class="srf-display-1 text-uppercase">Persist Check</span
            ><br /><br />
          </div>
          <v-layout column fluid>
            <h6>Station Filters</h6>
            <v-layout dense justify="start" class="mb-3">
              <v-flex lg3 class="text-center">
                <v-autocomplete
                  item-text="name"
                  item-value="name"
                  v-model="filter.stationDistrict"
                  :items="stationDistrictList"
                  label="District"
                  autocomplete="off"
                  clearable
                ></v-autocomplete>
              </v-flex>
              <v-flex lg3 ml-3>
                <v-autocomplete
                  item-text="name"
                  item-value="name"
                  v-model="filter.stationWatershed"
                  :items="stationWatershedList"
                  label="Watershed"
                  autocomplete="off"
                  clearable
                ></v-autocomplete>
              </v-flex>
              <v-flex lg3 ml-3>
                <v-autocomplete
                  item-text="name"
                  item-value="id"
                  v-model="filter.stationProfile"
                  :items="stationProfileList"
                  label="Profile"
                  autocomplete="off"
                  clearable
                ></v-autocomplete>
              </v-flex>

              <v-flex lg1 ml-3>
                <v-switch
                  v-model="filter.isActive"
                  inset
                  @change="invertValue(filter.isActive)"
                  label="Active"
                ></v-switch>
              </v-flex>

              <v-flex lg1>
                <v-switch
                  v-model="filter.isAutomatic"
                  inset
                  @change="invertValue(filter.isAutomatic)"
                  label="Automatic"
                ></v-switch>
              </v-flex>
            </v-layout>

            <v-layout mt-3>
              <v-flex lg3>
                <v-autocomplete
                  :items="stationList"
                  item-text="label"
                  item-value="id"
                  v-model="requestObject.station_id"
                  label="Station"
                  @change="getStationVariables(requestObject.station_id)"
                  required
                  hint="*Required"
                  persistent-hint
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>

              <v-flex lg6 ml-3>
                <v-autocomplete
                  :items="variables"
                  item-text="variable_name"
                  item-value="variable"
                  v-model="requestObject.variable_ids"
                  label="Variables"
                  multiple
                  clearable
                  deletable-chips
                  small-chips
                  :disabled="!requestObject.station_id"
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>

              <v-flex ml-3 mt-5 ml-5 class="d-flex justify-between">
                <v-btn
                  justify-end
                  outlined
                  color="primary"
                  @click="getData(false)"
                  :disabled="$v.requestObject.$invalid"
                  >SUBMIT</v-btn
                >
              </v-flex>                 
            </v-layout>
            
            <v-alert v-model="request_error" dismissible type="error" mt-5>
              [[ request_error_message ]]
            </v-alert>

            <v-overlay :value="loading">
              <v-progress-circular
                indeterminate
                size="64"
              ></v-progress-circular>
            </v-overlay>

            <v-layout v-if="requested" column>
              <v-sheet class="mx-auto" max-width="1000">
                <v-slide-group show-arrows="desktop">
                  <v-slide-group-item v-for="chosen_variable in chosen_variables" :key="chosen_variable">
                    <v-btn
                      class="ma-2"
                      outlined
                      :color="selectedVariable == chosen_variable ? 'primary' : ''"
                      @click="selectData(chosen_variable)"
                    >
                      [[ chosen_variable ]]
                    </v-btn>
                  </v-slide-group-item>
                </v-slide-group>
              </v-sheet>            


              <v-data-table
                :headers="headers"
                :items="selectedData"
                hide-default-footer
                class="transparent elevation-0 my-4"
                hide-default-header
                disable-pagination
                disable-sort
                :items-per-page="12"
              >
                <template #header="{ }">
                  <thead class="v-data-table-header">
                    <tr>
                      <th
                        v-for="(h,i) in headers"
                        :key="i"
                        class="text-center parent-header td-border-style"
                        :rowspan="h.children?1:2"
                        :colspan="h.children?h.children.length:1"
                      >

                        <!-- edit global threshold -->
                        {% if request|has_any_feature_permission:"quality-control:write" %}
                        <v-tooltip v-if="h.text=='Global Threshold'" bottom>
                          <template v-slot:activator="{ on }">
                            <v-btn icon @click="dialog_glo = true;">
                              <v-icon v-on="on" big>
                                mdi-square-edit-outline
                              </v-icon>                     
                            </v-btn>
                          </template>
                          <span>Edit Global Threshold</span>                          
                        </v-tooltip>
                        {% endif %}

                        <!-- edit reference station -->
                        {% if request|has_any_feature_permission:"quality-control:write" %}
                        <v-tooltip v-if="h.text==reference_station_name" bottom>
                          <template v-slot:activator="{ on }">
                            <v-btn icon @click="dialog_ref = true;">
                              <v-icon v-on="on" big>
                                mdi-square-edit-outline
                              </v-icon>                     
                            </v-btn>
                          </template>
                          <span>Change Reference Station</span>
                        </v-tooltip>
                        {% endif %}

                        [[ h.text ]]
                      </th>
                    </tr>
                    <tr>
                      <th
                        v-for="(h1,i1) in getSubHeader(headers)"
                        :key="i1"
                        class="text-center child-header td-border-style"
                      >
                        [[ h1.text ]]
                      </th>
                    </tr>
                  </thead>
                </template>
                <template #item="props">
                  <tr>
                    <td v-for="(c,ci) in getRows(props.item)" :key="ci">
                      <v-layout justify-center>
                        [[ c ]]
                      </v-layout>
                    </td>
                    <td>
                      <v-layout justify-center>

                        <!-- Edit Custom Threshold Tooltip -->
                        {% if request|has_any_feature_permission:"persist-threshold:write" %}
                        <v-tooltip bottom>
                          <template v-slot:activator="{ on }">
                            <v-btn icon>
                              <v-icon v-on="on" small @click="dialog_thr = true; current_row = props.item">
                                edit
                              </v-icon>                     
                            </v-btn>
                          </template>
                          <span>Edit Custom Threshold</span>
                        </v-tooltip>
                        {% endif %}

                        <!-- Delete Custom Threshold -->
                        {% if request|has_any_feature_permission:"persist-threshold:delete" %}
                        <v-tooltip bottom>
                          <template v-slot:activator="{ on }">
                            <v-btn icon>                        
                              <v-icon color="error" v-on="on" small @click="dialog_del = true; current_row = props.item">
                                delete
                              </v-icon>               
                            </v-btn>                    
                          </template>
                          <span>Delete Custom Threshold</span>
                        </v-tooltip> 
                        {% endif %}

                      </v-layout>                                      
                    </td>                  
                  </tr>
                </template>
              </v-data-table>
            </v-layout>
          </v-layout>

          <v-dialog v-model="dialog_del" width="35%">
            <v-card>
              <v-card-title class="text-h5">
                DELETE CUSTOM THRESHOLDS
              </v-card-title>
              <v-layout ml-6 mr-6 mb-2 column>
                <v-layout class="srf-display-2">
                  <v-layout>
                    [[requestedObject.station_name]]
                  </v-layout>
                  <v-layout>
                    [[selectedVariable]]
                  </v-layout>
                  <v-layout>
                    [[current_row.month_name]]
                  </v-layout>
                </v-layout>
              </v-layout>                 
              <v-card-actions>
                <v-btn width="50%" color="grey" @click="dialog_del = false">
                  Cancel
                </v-btn>
                <v-btn width="50%" color="error" @click="dialog_del = false; deleteCustomThresholds()">
                  Delete
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-dialog v-model="dialog_glo" width="35%">
            <v-card>
              <v-card-title class="text-h5">
                UPDATE GLOBAL THRESHOLDS
              </v-card-title>
              <v-layout ml-6 mr-6 column>
                <v-layout class="srf-display-2">
                    Variable: [[selectedVariable]]
                </v-layout>
                <v-layout class="srf-display-2">
                    Automatic: [[requestedObject.is_automatic]]
                </v-layout>                
                <v-layout mb-5 column >
                  <v-text-field
                    label="Minimum Variance:"
                    v-model="new_g_var"
                    hide-details
                    single-line
                    type="number"
                  ></v-text-field>
                  <v-text-field
                    label="Window:"
                    v-model="new_g_win"
                    hide-details
                    single-line
                    type="number"
                  ></v-text-field>                  
                </v-layout>
              </v-layout>                 
              <v-card-actions>
                <v-btn width="50%" color="grey" @click="dialog_glo = false; new_g_min = null; new_g_max = null;">
                  Cancel
                </v-btn>
                <v-btn width="50%" color="primary" @click="dialog_glo = false; updateGlobalThresholds()">
                  Save Changes
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>          
          <v-dialog v-model="dialog_thr" width="35%">
            <v-card>
              <v-card-title class="text-h5">
                UPDATE CUSTOM THRESHOLDS
              </v-card-title>
              <v-layout ml-6 mr-6 column>
                <v-layout class="srf-display-2">
                  <v-layout>
                    [[requestedObject.station_name]]
                  </v-layout>
                  <v-layout>
                    [[selectedVariable]]
                  </v-layout>
                  <v-layout>
                    [[current_row.month_name]]
                  </v-layout>
                </v-layout>
                <v-layout mb-5 column >
                  <v-text-field
                    label="Minimum Variance:"
                    v-model="new_c_var"
                    hide-details
                    single-line
                    type="number"
                  ></v-text-field>                

                  <v-text-field
                    label="Window:"
                    v-model="new_c_win"
                    hide-details
                    single-line
                    type="number"
                  ></v-text-field>
                </v-layout>
              </v-layout>                 
              <v-card-actions>
                <v-btn width="50%" color="grey" @click="dialog_thr = false; new_c_var = null; new_c_win = null;">
                  Cancel
                </v-btn>
                <v-btn width="50%" color="primary" @click="dialog_thr = false; updateCustomThresholds()">
                  Save Changes
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-dialog v-model="dialog_ref" width="35%">
            <v-card>
              <v-card-title class="text-h5">
                CHANGE THE REFERENCE STATION
              </v-card-title>
              <v-layout class="srf-display-2" ml-6 mr-6 column>
               <v-layout>
                  Station: [[ requestedObject.station_name ]]
                </v-layout>                
                <v-layout>
                  Current Reference Station: [[ reference_station_name ]]
                </v-layout>                 
                <v-layout mt-2>
                  <v-autocomplete
                    :items="referenceStations"
                    item-text="label"
                    item-value="id"
                    v-model="new_reference_station_id"
                    label="Reference Station"
                    required
                    clearable
                    autocomplete="off"
                  ></v-autocomplete>
                </v-layout>              
              </v-layout>                              
              <v-card-actions>
                <v-btn width="50%" color='grey'  @click="dialog_ref = false; new_reference_station_id = reference_station_id">
                  Cancel
                </v-btn>
                <v-btn width="50%" color="primary" @click="dialog_ref = false; updateReferenceStation()">
                  Save Changes
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-layout>
      </v-content>
    </v-app>
  </div>

  {% endblock %} {% block localjavascript %}

  <script>
    Vue.use(window.vuelidate.default);
    const { required, minLength } = window.validators;

    new Vue({
      el: "#app",
      vuetify: new Vuetify(),
      delimiters: ["[[", "]]"],
      validations: {
        requestObject: {
          station_id: { required },
          variable_ids: { required },
        },
      },
      data() {
        return {
          new_reference_station_id: null,
          current_row: {
              variable_name: null,
              month_name: null,
              global: {
                children: {
                 g_min: null,
                 g_max: null 
                }
              },
              reference: {
                children: {
                  r_min: null,
                  r_max: null
                }
              },
              custom: {
                children: {
                  c_min: null,
                  c_max: null
                }
              }
          },
          new_g_var: null,
          new_g_win: null,
          new_c_var: null,
          new_c_win: null,

          dialog_glo: false,
          dialog_ref: false,
          dialog_thr: false,
          dialog_del: false,
          chosen_variables: [],
          selectedData: [],
          selectedVariable: null,
          headers: [
              { text: "Variable", value: "variable_name"},
              {
                text: "Global Threshold",
                value: "global",
                children: [{ text: "Min. Variance"}, { text: "Window"}],
              },
              {
                text: "Reference Threshold",
                value: "reference",
                children: [{ text: "Min. Variance"}, { text: "Window"}],
              },
              {
                text: "Custom Threshold",
                value: "custom",
                children: [{ text: "Min. Variance"}, { text: "Window"}],
              },                            
              { text: "Actions", value: "action"},
          ],
          loading: false,
          show_dialog: false,
          simpleTextFieldsRules: [
            (v) => (v != null && v !== "") || "This field is required",
          ],        
          request_error: false,
          request_error_message: "",
          reference_station_id: null,
          reference_station_name: null,
          requestObject: {
            station_id: null,
            variable_ids: null,
          },
          requestedObject: {
            is_automatic: false,
            station_name: null,
            station_id: null,
            variable_ids: null,
          },          
          requestedData: [],
          requested: false,
          filter: {
            isActive: true,
            isAutomatic: true,
          },        
          variables: [],        
          stations: [
            {% for station in station_list %}
            { id: {{ station.id }},
              label: "{{ station.name | safe }} - {{ station.code }}",
              region: "{{ station.region | safe }}",
              watershed: "{{ station.watershed | safe }}",
              profile: "{{ station.profile.id | safe }}",
              is_automatic: {{ station.is_automatic | lower }},
              is_active: {{ station.is_active | lower }},
            },
            {% endfor %}
          ],
          referenceStations: [
            {% for station in reference_station_list %}
            {
              id: {{ station.id }},
              label: "{{ station.name | safe }} - {{ station.code }}",
            },
            {% endfor %}
          ],
          stationProfileList: [
            {% for station_profile in station_profile_list %}
            {id: {{ station_profile.id }}, name: "{{ station_profile.name }}" },
            {% endfor %}
          ],
          stationWatershedList: [
            {% for station_watershed in station_watershed_list %}
            {id: {{ station_watershed.id }}, name: "{{ station_watershed.watershed }}" },
            {% endfor %}
          ],
          stationDistrictList: [
            {% for station_district in station_district_list %}
            {id: {{ station_district.id }}, name: "{{ station_district.name }}" },
            {% endfor %}
          ],
        };
      },
      computed: {
        stationList () {
          let filteredStations = this.stations;

          if(this.filter.stationDistrict)
            filteredStations = filteredStations.filter(station => station.region == this.filter.stationDistrict);

          if(this.filter.stationWatershed)
            filteredStations = filteredStations.filter(station => station.watershed == this.filter.stationWatershed);

          if(this.filter.stationProfile)
            filteredStations = filteredStations.filter(station => station.profile == this.filter.stationProfile);

          filteredStations = filteredStations.filter(station => this.filter.isAutomatic == station.is_automatic);

          filteredStations = filteredStations.filter(station => this.filter.isActive == station.is_active);

          this.requestObject.station_id = null;
          
          return filteredStations;
        }
      },
      methods: {
        invertValue(bool){
          bool = !bool;
        },
        getSubHeader(headers) {
          let result = [];
          headers
            .filter((i) => i.children)
            .forEach((v) => {
              result = result.concat(v.children);
            });
          return result;
        },
        getRows(rows) {
          const result = {};
          _.forEach(rows, (i, key) => {
            if (i.children) {
              _.forEach(i.children, (i1, key1) => {
                result["c" + key1] = i1;
              });
            } else result[key] = i;
          });
          return result;
        },        
        getAll(path, url, oldData = []) {
          return fetch(`/${path}`)
            .then((res) => {
              if (!res.ok) return res.json().then((err) => Promise.reject(err));

              if (!res.body) {
                return { next: null, results: [] };
              }

              return res.json();
            })
            .then(async (data) => {
              if (data.results != null) {
                const values = [...oldData, ...data.results];
                if (!!data.next) {
                  return await getAll(
                    context,
                    path,
                    `/${path}/${data.next.substr(
                      data.next.indexOf(`/${path}`)
                    )}`,
                    values
                  );
                }
                return values;
              }
            });
        },
        getStationVariables(station_id) {
          this.getAll(`api/stations_variables/?station_id=${station_id}`).then(
            (data) => (this.variables = data)
          );
        },        
        setRequestedObject(){
            let station = this.stations.find(station => station['id'] == this.requestObject.station_id);
            this.requestedObject.is_automatic = this.filter.isAutomatic;
            this.requestedObject.station_name = station['label'];
            this.requestedObject.station_id = this.requestObject.station_id;
            this.requestedObject.variable_ids = this.requestObject.variable_ids;
        },
        setRequestedData(data){
            this.requestedData = data['variable_data'];
            this.reference_station_id = data['reference_station_id'];
            this.reference_station_name = data['reference_station_name'];
            this.new_reference_station_id = this.reference_station_id
        },
        updateGlobalThresholds(){
          axios({
            method: 'post',
            url: `/wx/quality_control/global_threshold/update/`,
            params: {
              'minimum_variance': this.new_g_var,
              'window': this.new_g_win,
              'qc_method': 'persist',
              'is_automatic': this.requestedObject.is_automatic,
              'variable_name': this.selectedVariable,
            },
          })
          .then(res => {
            this.getData(true);            

            this.new_g_min = null;
            this.new_g_max = null;

            this.request_error_message = "";
            this.request_error = false;      
          })
          .catch((error) => {
            console.log("error", error.response);
            this.request_error_message = error.response.data.detail;
            this.request_error = true;
          })
          .finally(() => {
            this.loading = false;
          });
        },
        updateReferenceStation(){
          axios({
            method: 'post',
            url: `/wx/quality_control/update_reference_station/`,
            params: {
              'station_id': this.requestedObject.station_id,
              'new_reference_station_id': this.new_reference_station_id,
            },
          })
          .then(res => {
            this.getData(true);

            this.request_error_message = "";
            this.request_error = false;      
          })
          .catch((error) => {
            console.log("error", error.response);
            this.request_error_message = error.response.data.detail;
            this.request_error = true;
          })
          .finally(() => {
            this.loading = false;
          });
        },
        updateCustomThresholds(){
          axios({
            method: 'post',
            url: `/wx/quality_control/persist_threshold/update/`,
            params: {
              'new_var': this.new_c_var,
              'new_win': this.new_c_win,
              'station_id': this.requestedObject.station_id,
              'variable_name': this.selectedVariable,
            },
          })
          .then(res => {
            this.getData(true);

            this.new_c_var = null;
            this.new_c_min = null;


            this.request_error_message = "";
            this.request_error = false;      
          })
          .catch((error) => {
            console.log("error", error.response);
            this.request_error_message = error.response.data.detail;
            this.request_error = true;
          })
          .finally(() => {
            this.loading = false;
          });
        },
        deleteCustomThresholds(){
          axios({
            method: 'post',
            url: `/wx/quality_control/persist_threshold/delete/`,
            params: {
              'station_id': this.requestedObject.station_id,
              'month_name': this.current_row.month_name,
              'variable_name': this.selectedVariable,
            },
          })
          .then(res => {
            this.getData(true);
          })
          .catch((error) => {
            console.log("error", error.response);
            this.request_error_message = error.response.data.detail;
            this.request_error = true;
          })
          .finally(() => {
            this.loading = false;
          });
        },
        setRerenceStationInHeaders(reference_station){
          if (reference_station){
            this.reference_station_name = reference_station
            this.headers[2]['text'] = reference_station
          }
          else{
            this.reference_station_name = 'No. Ref Station'
            this.headers[2]['text'] = 'No. Ref Station'
          }
        },        
        selectData(variable){
          if (this.selectedVariable == variable){
            this.selectedVariable = null;
            this.selectedData = [];
          }
          else{
            this.selectedVariable = variable;
            this.selectedData = this.requestedData[variable];
          }
        },       
        getData(is_update){
          if (!is_update){
            this.requested = false;
          };
          this.loading = true; 
          let requested_variables_ids = null;
          if(this.requestObject.variable_ids && this.requestObject.variable_ids.length){
            requested_variables_ids = `${this.requestObject.variable_ids}`
          }          
          axios({
            method: 'get',
            url: `/wx/quality_control/persist_threshold/get/`,
            params: {
              'station_id': this.requestObject.station_id,
              'variable_ids': requested_variables_ids,
            },
          })
          .then(res => {
            this.setRequestedObject();
            this.setRequestedData(res.data['data']);
            if (is_update) {
              if (this.selectedVariable != null) {
                this.selectedData = this.requestedData[this.selectedVariable];
              }
              this.setRerenceStationInHeaders(this.reference_station_name);
            }
            else{
              this.chosen_variables=Object.keys(this.requestedData);
              this.setRerenceStationInHeaders(this.reference_station_name);

              this.selectedVariable=null;
              this.selectData(this.chosen_variables[0]);
            }

            this.request_error_message = "";
            this.request_error = false;
            this.requested = true;     
          })
          .catch((error) => {
            console.log("error", error.response);
            this.request_error_message = error.response.data.detail;
            this.request_error = true;
          })
          .finally(() => {
            this.loading = false;
          });
        }

      },
      mounted() {
        axios.defaults.xsrfHeaderName = "X-CSRFToken";
        axios.defaults.xsrfCookieName = "csrftoken";
      },
    });
  </script>

  <style>
    .firstColumn {
      border-left: 1px solid gray;
    }

    th,
    td {
      padding: 3px;
      padding-left: 10px;
    }

    .v-input--selection-controls__ripple {
      border-radius: 50%;
      cursor: pointer;
      height: 34px;
      position: absolute;
      transition: inherit;
      width: 34px;
      left: -12px;
      top: calc(50% - 24px);
      margin: 7px;
      z-index: 10 !important;
    }

    .v-dialog {
      box-shadow: none;
    }
    .v-dialog__content,
    .v-dialog__content--active {
      z-index: 9999 !important;
    }
    .btn-close-dialog {
      position: absolute;
      top: 116px;
      left: 336px;
      border-radius: 0px 20px 20px 0px;
      z-index: 9999;
      width: 36px;
    }

  #dataTableStyle .record-item-value {
    font-size: 14px;
    border-bottom: 1px solid #a1a1a1; }

  #dataTableStyle .record-item-unit {
    font-size: 14px; }

  #dataTableStyle .record-item-value-border {
    border: 1px solid #a1a1a1;
    margin-right: 4px; }

  #dataTableStyle .record-item-key {
    font-weight: bold;
    font-size: 14px; }

  #dataTableStyle .record-content {
    border: 1px solid #a1a1a1; }

  #dataTableStyle .v-data-table td {
    padding: 12px 8px;
    font-size: 14px;
    border-color: rgba(0, 0, 0, 0.12);
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px; }

  #dataTableStyle .v-data-table th {
    border-color: rgba(0, 0, 0, 0.12);
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px; }

  #dataTableStyle .v-data-table table {
    border: solid 1px #a1a1a1;
    border-radius: 5px; }

  #dataTableStyle .v-data-table table thead tr th {
    font-weight: bold;
    font-size: 14px;
    padding: 0px 8px; }

  #dataTableStyle .v-data-table table tbody tr td .v-btn {
    margin-right: 0px !important; }

  #dataTableStyle .v-data-table .v-data-table-header__sort-badge {
    font-size: 10px; }

  #dataTableStyle .v-data-table.theme--dark tr th {
    color: #fff !important; }

  #dataTableStyle .theme--light .v-data-table table thead tr th {
    color: black; }

  #dataTableStyle .theme--light .v-data-table table thead tr td {
    color: black; }

  </style>
</div>
{% endblock %}