{% extends "base.html" %} {% block content %}
<div class="srf-container">
  <div id="app" v-cloak>
    <v-app>
      <v-content fluid fill-height style="background: white">
        <v-layout column>
          <v-flex>
            <h1 class="display-1 text-uppercase">Yearly Average</h1>
          </v-flex>
          <v-layout column fluid>
            <v-layout mt-3>
              <v-flex sm1 md3 mb-3 lg3>
                <v-autocomplete
                  :items="stations"
                  :item-text="(item) => `${item.name} ${item.code}`"
                  item-value="id"
                  v-model="requestData.selectedStationId"
                  label="Station"
                  @change="onChangeStation(requestData.selectedStationId)"
                  required
                  hint="*Required"
                  persistent-hint
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>
              <v-flex sm1 md3 lg3 ml-5>
                <v-autocomplete
                  :items="variableItems"
                  item-text="variable_name"
                  item-value="variable"
                  v-model="requestData.selectedElementId"
                  label="Variable"
                  required
                  hint="*Required"
                  persistent-hint
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>
            </v-layout>
            <v-layout mt-3>
              <v-flex sm1 md3 lg3 class="d-flex justify-between">
                <v-menu
                  :close-on-content-click="false"
                  v-model="menu1"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="requestData.begin_date"
                      label="Start date"
                      prepend-icon="event"
                      v-on="on"
                      required
                      hint="*Required"
                      persistent-hint
                      :rules="simpleTextFieldsRules"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    name="begin_date"
                    v-model="requestData.begin_date"
                    @input="menu1 = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex sm1 md3 lg3 ml-5 class="d-flex justify-between">
                <v-menu
                  :close-on-content-click="false"
                  v-model="menu2"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="requestData.end_date"
                      label="End date"
                      prepend-icon="event"
                      v-on="on"
                      required
                      hint="*Required"
                      persistent-hint
                      :rules="simpleTextFieldsRules"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    name="end_date"
                    v-model="requestData.end_date"
                    @input="menu2 = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>
            <v-layout mt-3 mb-5>
              <v-flex class="d-flex justify-between">
                <v-btn
                  justify-end
                  outlined
                  color="primary"
                  small
                  @click="handleRequestParameters"
                  :disabled="$v.requestData.$invalid"
                  >ADD VARIABLE</v-btn
                >
              </v-flex>
            </v-layout>
            <v-layout ml-5 mt-5 mr-5>
              <v-flex v-if="Object.keys(reportValues).length">
                <table>
                  <tr>
                    <th></th>
                    <th>JAN</th>
                    <th>FEB</th>
                    <th>MAR</th>
                    <th>APR</th>
                    <th>MAY</th>
                    <th>JUN</th>
                    <th>JUL</th>
                    <th>AUG</th>
                    <th>SEP</th>
                    <th>OCT</th>
                    <th>NOV</th>
                    <th>DEZ</th>
                    <th>AVG</th>
                  </tr>
                  <tr v-for="ano in Object.keys(reportValues)" :key="ano">
                    <td
                      style="padding: 5px; font-weight: bold; max-width: 20px"
                    >
                      [[ ano ]]
                    </td>

                    <td
                      v-for="mes in Object.keys(reportValues[ano])"
                      :key="mes+ano"
                      style="max-width: 1px"
                    >
                      [[ reportValues[ano][mes] || '-']]
                    </td>
                  </tr>

                  <tr>
                    <td
                      style="padding: 5px; font-weight: bold; max-width: 45px"
                    >
                      Monthly Average
                    </td>
                    <td
                      v-for="mes in Object.keys(reportMonthMean)"
                      :key="mes+'_report'"
                      style="max-width: 1px"
                    >
                      [[ reportMonthMean[mes] || '-']]
                    </td>
                  </tr>
                </table>
              </v-flex>
            </v-layout>
          </v-layout>
        </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: {
        requestData: {
          selectedStationId: { required },
          selectedElementId: { required },
          begin_date: { required },
          end_date: { required },
        },
      },
      data: {
        ano: null,
        reportMonthMean: {
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 0,
          6: 0,
          7: 0,
          8: 0,
          9: 0,
          10: 0,
          11: 0,
          12: 0,
        },
        reportValues: [],
        stations: [],
        variableItems: [],
        menu1: false,
        menu2: false,
        menu3: false,
        menu4: false,
        requestData: {
          selectedStationId: null,
          selectedElementId: null,
          begin_date: new Date().toISOString().substr(0, 10),
          end_date: new Date().toISOString().substr(0, 10),
        },
        simpleTextFieldsRules: [
          (v) => (v !== undefined && v !== "") || "This field is required",
        ],
      },
      methods: {
        getStations() {
          this.getAll("api/stations").then((data) => (this.stations = data));
        },
        getStationVariables(station_id) {
          this.getAll(`api/stations_variables/?station_id=${station_id}`).then(
            (data) => (this.variableItems = data)
          );
        },
        getYearlyReportData(begin_date, end_date, station_id, variable_id) {
          this.getAllReport(
            `get_yearly_average?station_id=${station_id}&variable_id=${variable_id}&begin_date=${begin_date}&end_date=${end_date}`
          ).then((data) => {
            if (data) {
              this.reportValues = data.results;

              let reportMonthQtd = {
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
                7: 0,
                8: 0,
                9: 0,
                10: 0,
                11: 0,
                12: 0,
              };
              this.reportMonthMean = {
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
                7: 0,
                8: 0,
                9: 0,
                10: 0,
                11: 0,
                12: 0,
              };

              Object.keys(this.reportValues).forEach((year) => {
                let sum_by_ano = 0;
                let count_by_ano = 0;
                Object.keys(this.reportValues[year]).forEach((mes) => {
                  if (this.reportValues[year][mes]) {
                    this.reportMonthMean[mes] += Number(
                      this.reportValues[year][mes]
                    );
                    reportMonthQtd[mes]++;
                    sum_by_ano += Number(this.reportValues[year][mes]);
                    count_by_ano++;
                  }
                });
                if (sum_by_ano)
                  this.reportValues[year]["AVG"] = (
                    sum_by_ano / count_by_ano
                  ).toFixed(2);
              });

              Object.keys(this.reportMonthMean).forEach((month) => {
                const qtdAnos = reportMonthQtd[month];
                if (qtdAnos)
                  this.reportMonthMean[month] = (
                    this.reportMonthMean[month] / qtdAnos
                  ).toFixed(2);
              });
            } else {
              this.reportValues = [];
            }
          });
        },
        handleRequestParameters() {
          this.getYearlyReportData(
            this.requestData.begin_date,
            this.requestData.end_date,
            this.requestData.selectedStationId,
            this.requestData.selectedElementId
          );
        },
        onChangeStation(station_id) {
          this.getStationVariables(station_id);
        },
        getAll(path, url, oldData = []) {
          return fetch(`/${path}`)
            .then((res) => {
              if (!res.body) {
                return { next: null, results: [] };
              }

              return res.json();
            })
            .then(async (data) => {
              const values = [...oldData, ...data.results];
              if (!!data.next) {
                return await getAll(
                  context,
                  path,
                  `/${path}/${data.next.substr(data.next.indexOf(`/${path}`))}`,
                  values
                );
              }
              return values;
            });
        },
        getAllReport(path, url, oldData = []) {
          return fetch(`/${path}`).then((res) => {
            if (!res.body) {
              return { next: null, results: [] };
            }

            return res.json();
          });
        },
      },
      mounted() {
        this.getStations();
      },
    });
  </script>
</div>
{% endblock %}