{% extends "base.html" %} {% block content %} {% load static %} {% load material_form %}

<div class="srf-container">
	<div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
		<span class="srf-display-1 text-uppercase">Agromet Summaries</span><br /><br />
	</div>
	<div class="srf-flex justify-content-between srf-padding" id="app">
		<v-app>
			<v-overlay :value="loading_data">
				<v-card flat light style="background-color: transparent;">
					<v-card-title class="text-center"> Loading Data... </v-card-title>
					<v-card-actions class="text-center justify-center">
					  <v-progress-circular indeterminate color="primary"/>
					</v-card-actions>
				</v-card>
			</v-overlay>

			<v-form ref="form" v-model="isFormValid" enctype="multipart/form-data" method="POST" class="mb-10">
				{% csrf_token %}
				<v-row>
					<v-col cols="2" class="d-flex justify-left">
						<v-switch 
							v-model="filters.is_automatic"
							:label='filters.is_automatic?"Automatic Stations":"Manual Stations"'
							@change="requestData.isDailyData = true;"
							inset
						/>
					</v-col>
					<v-col cols="4">
						<v-autocomplete
							label="Select Station"
							:items="filteredStationList"
							item-value="id"
							item-text="name"
							v-model="requestData.stationId"
							hint="*Required"
							persistent-hint
							:rules="[rules.required]"
						/>
					</v-col>
					<v-col cols="4">
						<v-autocomplete
							label="Select Variables"
							:items="filteredVariableList"
							item-value="id"
							item-text="name"
							v-model="requestData.variableIds"
							hint="*Required"
							multiple
							chips
							clearable
							persistent-hint
							deletable-chips
							:disabled="!requestData.stationId"
							:rules="[rules.required, rules.nonEmpty]"
						/>
					</v-col>
					<v-col cols="2" class="d-flex justify-left">
						<v-switch 
							:disabled="!filters.is_automatic"
							v-model="requestData.isDailyData"
							:label='requestData.isDailyData?"Daily Summary":"Hourly Summary"'
							inset
						/>
					</v-col>					
				</v-row>
				<v-row>
					<v-col cols="2">
						<v-autocomplete
							label="Select Start Year"
							:items="availableStartYears"
							v-model="requestData.startYear"
							hint="*Required"
							persistent-hint
							:rules="[rules.required]"
						/>
					</v-col>	
					<v-col cols="2">
						<v-autocomplete
							label="Select End Year"
							:items="availableEndYears"
							v-model="requestData.endYear"
							hint="*Required"
							persistent-hint
							:disabled="!requestData.startYear"
							:rules="[rules.required]"

						/>
					</v-col>
					<v-col cols="3" class="d-flex justify-center">
						<v-switch
							v-model="filters.is_seasonal"
							:label='filters.is_seasonal?"Seasonal Summary":"Monthly Summary"'
							inset
					  	/> 						  
					</v-col>
					<v-col cols="2" v-if="!filters.is_seasonal">
						<v-autocomplete
							label="Select Interval"
							:items="intervals"
							v-model="requestData.interval"
							:rules="[rules.required]"
							hint="*Required"
							persistent-hint
						/>
					</v-col>
					<v-col cols="3" v-if="!filters.is_seasonal && !['3 months', '6 months'].includes(requestData.interval)">
						<v-autocomplete
							label="Select Months"
							:items="months"
							item-value='id'
							item-text="name"
							v-model="requestData.months"
							hint="*Required"
							persistent-hint
							multiple
							clearable
							chips
							deletable-chips
							:disabled="!requestData.interval"
							:rules="[rules.required, rules.nonEmpty]"
						/>
					</v-col>
					<v-col cols="3" v-if="!filters.is_seasonal && ['3 months', '6 months'].includes(requestData.interval)">
						<v-autocomplete
							label="Select Starting Month"
							:items="months"
							item-value='id'
							item-text="name"
							v-model="requestData.month"
							hint="*Required"
							persistent-hint
							:disabled="!requestData.interval"
							:rules="[rules.required]"
						/>
					</v-col>					
				</v-row>
				<v-row>
					<v-col cols="3" class="d-flex justify-left">
						<v-row>
							<v-col cols="auto" class="d-flex align-center">
							  <v-switch
								v-model="requestData.validateData"
								:label="requestData.validateData ? 'Validate Data' : 'All Data'"
								inset
							  />
							</v-col>
							<v-col cols="auto" class="d-flex align-center">
							  <v-btn icon @click="showing_info=!showing_info"> <v-icon>mdi-information</v-icon> </v-btn>
							</v-col>
						 </v-row>
					</v-col>
					<v-col cols="3" v-if="requestData.validateData && !requestData.isDailyData">
						<v-text-field
							v-model="requestData.maxHourPct"
							:rules="[rules.required, rules.numeric, rules.percentage]"
							label="Maximum Hour Percentage"
							hint="*Required"
							persistent-hint
						/>
					</v-col>
					<v-col cols="3" v-if="requestData.validateData">
						<v-text-field
							v-model="requestData.maxDayPct"
							:rules="[rules.required, rules.numeric, rules.percentage]"
							label="Maximum Day Percentage"
							hint="*Required"
							persistent-hint
						/>
					</v-col>					
					<v-col cols="3" v-if="requestData.validateData">
						<v-text-field
							v-model="requestData.maxDayGap"
							:rules="[rules.required, rules.numeric, rules.positive]"
							label="Maximum Day Gap"
							hint="*Required"
							persistent-hint
						/>
					</v-col>
																	
				</v-row>
				<v-row>
					<v-col cols="12">
						<v-alert
							v-if="showing_info"
							type="info"
							text
							:dismissible="true"
							outlined
							@input="showing_info = false"
						>
							Data validation works as follows:
							The first parameter defines the maximum allowable percentage
							of missing data in the hourly summary to compute a valid day.
							The second parameter sets the maximum percentage of missing 
							valid days for a valid aggregation;
							if exceeded, the aggregation returns null for that partition.
							The third parameter specifies the maximum gap between consecutive days;
							if the gap exceeds this limit,
							the aggregation returns null for that partition.
					  	</v-alert>					
					</v-col>
				</v-row>				
				<v-row>				
					<v-col cols="2" class="d-flex justify-left">
						<v-btn @click="getData" :disabled="!isFormValid"> 
							Request Data
							<v-icon right>send</v-icon>
						</v-btn>
					</v-col>											
				</v-row>					
			</v-form>

			<div>				
				<template>
					<v-card v-if="requestedData.responseData && !loading_data">
						<v-tabs v-model="tab" bg-color="primary" class="justify-center">
							<v-tab v-for="variableId in requestedData.variableIds" :key="variableId" :value="variableId">
								[[ variableList.find(variable => variable.id==variableId)?.name ]]
							</v-tab>
						</v-tabs>
				
						<v-card-title> [[ ]] </v-card-title>
						<v-card-text>
							<template>
								<v-data-table
									:headers="dataTable.headers"
									:items="dataTable.data"
									:items-per-page="-1"
								>
									<template v-for="header in dataTable.colorHeaders" v-slot:[`item.${header.value}`]="{ item }">
											<span :style="{ color: getColor(header, item) }">
												[[ item[header.value] ]]
											</span>
								 	 </template>						  
								</v-data-table>
							</template>
						</v-card-text>
						<v-card-actions>
							<v-btn
								@click="downloadCSV"
								> Download CSV <v-icon right>download</v-icon> </v-btn>
						</v-card-actions
					</v-card>					
				</template>	
			</div>
		</v-app>
	</div>
</div>

{% endblock %} {% block localjavascript %}
 
<script>
	Vue.use(window.vuelidate.default);
	const { required, numeric } = window.validators;

	new Vue({
		el: "#app",
		vuetify: new Vuetify(),
		delimiters: ["[[", "]]"],
		{% comment %} validations: {
			requestData: {
				stationId: { 
					required: value => !!value,
				},
				variableIds: { 
					required: value => !!value,
				},
				startYear: { 
					required: value => !!value,
				},
				endYear: { 
					required: value => !!value,
				},
				maxHourPct: { 
					numeric,
					between: value =>  0 <= value && value <= 100,
					requiredIf: value => this.requiredIfValidateData(value),
				},
				maxDayGap: { 
					numeric,
					positive: value => value >= 0,
					requiredIf: value => this.requiredIfValidateData(value),
				},
				maxHourPct: { 
					numeric,
					between: value =>  0 <= value && value <= 100,
					requiredIf: value => this.requiredIfValidateData(value),
				},				
				months: {
					requiredIf: value => this.requiredIfMonthlySummary(value),
				},
				interval: {
					requiredIf: value => this.requiredIfMonthlySummary(value),
				},
			},
		}, {% endcomment %}
		data: {
			now: moment().format('YYYY-MM-DD'),
			username: '{{username | safe}}',
			rules: {
				required: value => !!value || 'Required.',
				nonEmpty: value => !!value && value.length>0 || 'Select at least one item.',
				numeric: value => (!isNaN(value) ) || 'Parameter must be a Numeric.',
				integer: value => (Number.isInteger(value) ) || 'Number must be an integer.',
				percentage: value => (0 <= value && value <= 100) || 'Value must be between 0 and 100.',
				positive: value => (0 <= value) || 'Value must greater than 0.',
			},	
			tab: null,
			loading_data: false,
			showing_info: false,
			isFormValid: false,
			requestData: {
				stationId: {{station_id}},
				variableIds: {{variable_ids | safe}},
				isDailyData: true,
				summaryType: 'Seasonal',
				months: [],
				month: null,
				interval: null,
				startYear: null,
				endYear: null,
				validateData: true,
				maxHourPct: 20,
				maxDayPct: 20,
				maxDayGap: 5,
			},
			requestedData: {
				stationId: null,
				variableIds: [],
				isDailyData: true,
				summaryType: 'Seasonal',
				months: [],
				month: null,
				interval: null,
				startYear: null,
				endYear: null,
				responseData: null,
				responseMinMaxData: null,
				requestedAt: null,
				maxHourPct: null,
				maxDayPct: null,
				maxDayGap: null,
			},
			filters: {
				is_seasonal: true,
				is_automatic: true,
			},
			start_year_menu: false,
			end_year_menu: false,
			summaryTypes: ['Monthly', 'Seasonal'],
			months: [
				{id: 1, name: 'Jan'},
				{id: 2, name: 'Feb'},
				{id: 3, name: 'Mar'},
				{id: 4, name: 'Apr'},
				{id: 5, name: 'May'},
				{id: 6, name: 'Jun'},
				{id: 7, name: 'Jul'},
				{id: 8, name: 'Aug'},
				{id: 9, name: 'Sep'},
				{id: 10, name: 'Oct'},
				{id: 11, name: 'Nov'},
				{id: 12, name: 'Dec'},
			],
			intervals: ['7 days', '10 days', '1 month', '3 months', '6 months'],
			variableList: {{ variable_list | safe }},
			stationList: [
				{% for station in station_list %}
					{
						id: {{station.id}},
						base_name: "{{station.name | safe }}",
						name: "{{station.name | safe }} - {{station.code}}",
						is_automatic:  {{station.is_automatic|yesno:"true,false"}},
						latitude: {{station.latitude}},
						longitude: {{station.longitude}}
					},
				{% endfor %}
			]
		},
		watch: {
			'requestData.summaryType' (newSummaryType, oldSummaryType){
				this.requestData.months = []
			},
			'filters.is_automatic' (newValue, oldValue) {
				this.requestData.stationId = null
			},
			'filters.is_seasonal' (newValue, oldValue) {
				this.requestData.summaryType = newValue?'Seasonal':'Monthly'
			},
			'requestData.stationId' (newStationId, oldStationId) {
				this.requestData.variableIds = []
			},
			'requestData.startYear' (newStartYear, oldStartYear) {
				this.requestData.endYear = null
			},
			'requestData.interval' (newInterval, oldInterval){
				if (['3 months', '6 months'].includes(newInterval) != ['3 months', '6 months'].includes(oldInterval)){
					this.requestData.months = []
					this.requestData.month = null
				}
			},
		},	
		computed: {
			availableStartYears () {
				const min_year = 1900
				const max_year = moment().year()
				return Array.from({ length: max_year - min_year + 1 }, (_, i) => max_year - i);
			},
			availableEndYears () {
				if (!this.requestData.startYear) return [];
				const min_year = this.requestData.startYear
				const max_year = moment().year()
				return Array.from({ length: max_year - min_year + 1 }, (_, i) => max_year - i);
			},
			filteredStationList() {
				return this.stationList.filter(station=>station.is_automatic===this.filters.is_automatic)
			},
			filteredVariableList() {
				if (!this.requestData.stationId) return [];
		
				const stationvariableList = {{ stationvariable_list | safe }};
				const variableList = {{ variable_list | safe }};
		
				const stationVariableIds = stationvariableList
					.filter(stationvariable => stationvariable.station_id == this.requestData.stationId)
					.map(stationvariable => stationvariable.variable_id);
				
				return variableList.filter(variable => stationVariableIds.includes(variable.id));
			},
			dataTable () {
				
				let selectedVariableId = null
				let filteredData = []
				if (!(this.tab===null)){
					selectedVariableId = this.requestedData.variableIds[this.tab];
					filteredData = this.requestedData.responseData.filter(entry => entry.variable_id===selectedVariableId);
				}

				let baseKeys = []
				let baseHeaders = []

				if (this.requestedData.summaryType==='Seasonal'){
					baseKeys = ['station', 'variable_id', 'year']
					baseHeaders = [{ text: 'Year', align: 'end', value: 'year', sortable: false}];
					
				}
				else if (this.requestedData.summaryType==='Monthly'){
					if (['3 months', '6 months'].includes(this.requestedData.interval)) {
						baseHeaders = [
							{ text: 'Year', align: 'end', value: 'year', sortable: false},
							{ text: 'Starting Month', align: 'end', value: 'month', sortable: false}
						];
						baseKeys = ['station', 'variable_id', 'year', 'month']
					}
					else{
						baseHeaders = [
							{ text: 'Year', align: 'end', value: 'year', sortable: false},
							{ text: 'Month', align: 'end', value: 'month', sortable: false}
						];
						baseKeys = ['station', 'variable_id', 'year', 'month']
					}
				}

				const keys = filteredData.length? Object.keys(filteredData[0]).filter(item => !baseKeys.includes(item)): [];
				const calcHeaders = keys.map(item => ({text: item, align: 'end', value: item, sortable: false}));

				const colorHeaders = calcHeaders.filter(item => !item.value.endsWith('(% of days)'));
				
				return { headers: [...baseHeaders, ...calcHeaders], data: filteredData, colorHeaders: colorHeaders};		
			},
			filteredMinMaxData () {
				const selectedVariableId = this.requestedData.variableIds[this.tab];
				const station = this.stationList.find(station => station.id === this.requestedData.stationId)

				return this.requestedData.responseMinMaxData[station.base_name][selectedVariableId]
			}
		},
		methods: {
			requiredIfMonthlySummary(value) {
				return this.filters.is_seasonal? true : !!value;
			},
			requiredIfValidateData(value) {
				return this.requestData.validateData? !!value : true;
			},
			clearSelectedVariables (){
				this.requestData.variableIds = []
			},
			getData(){
				this.loading_data = true

				this.requestedData.stationId = this.requestData.stationId
				this.requestedData.variableIds = this.requestData.variableIds
				this.requestedData.isDailyData = this.requestData.isDailyData
				this.requestedData.months = this.requestData.months
				this.requestedData.month = this.requestData.month
				this.requestedData.interval = this.requestData.interval
				this.requestedData.startYear = this.requestData.startYear
				this.requestedData.endYear = this.requestData.endYear
				this.requestedData.summaryType = this.requestData.summaryType
				this.requestedData.validateData = this.requestData.validateData
				this.requestedData.maxHourPct = this.requestData.maxHourPct
				this.requestedData.maxDayPct = this.requestData.maxDayPct
				this.requestedData.maxDayGap = this.requestData.maxDayGap
				this.requestedData.responseData = null
				this.requestedData.responseMinMaxData = null
				this.requestedData.requestedAt = moment().format('YYYY-MM-DD HH:mm')

				const url = `/wx/agromet/summaries/get/`

				const params = {
					station_id: this.requestedData.stationId,
					variable_ids: this.requestedData.variableIds.join(','),
					is_daily_data: this.requestedData.isDailyData,
					months: this.requestedData.months.join(','),
					month: this.requestedData.month,
					interval: this.requestedData.interval,
					start_year: this.requestedData.startYear,
					end_year: this.requestedData.endYear,
					summary_type: this.requestedData.summaryType,
					validate_data: this.requestedData.validateData,
					max_hour_pct: this.requestedData.maxHourPct,
					max_day_pct: this.requestedData.maxDayPct,
					max_day_gap: this.requestedData.maxDayGap,
				};

        		axios.get(url, { params })
				.then(response => {
					this.requestedData.responseData = response.data.tableData;
					this.requestedData.responseMinMaxData = response.data.minMaxData;
				})
				.catch(error => {
					console.error('Error fetching data:', error);
				})
				.finally(() => {
					this.loading_data = false
				});
			},
			convertToCSV(data) {
				const { stationId, variableIds, summaryType, startYear, endYear, interval, requestedAt, months, ...rest } = this.requestedData;
				
				const selectedVariableId = variableIds[this.tab];
				const station = this.stationList.find(station => station.id === stationId)
				const variable = this.variableList.find(variable => variable.id === selectedVariableId)

				const metadataList = [
					`Description: Agromet ${summaryType} Summary\n`,
					`Station Name: ${station?.name}\n`,
					`Variable Name: ${variable?.name}\n`,
					`${summaryType === 'Monthly' ? `Interval: ${interval}\nMonths: ${months}\n` : ''}`,
					`Start/End Year: ${startYear}/${endYear}\n`,
					`Station Lat/Lon: ${station?.latitude}/${station?.longitude}\n`,
					`Request Datetime: ${requestedAt}\n`,
					`UserName: ${this.username}`
				]

				const metadata = `"`+metadataList.join('')+`"\n\n`
			  
				const headers = data.headers.map(item => item.text).join(',') + '\n';

				const indicesToRemove = [0,1] // Exclude the StationID and VariableID columns
				const rows = data.data.map(row => 
				  Object.values(row)
					.filter((value, index) => !indicesToRemove.includes(index)) 
					.map(value => `"${value}"`)
					.join(',')
				).join('\n');

				return metadata + headers + rows;
			},
			downloadCSV() {
				const csvContent = this.convertToCSV(this.dataTable);
				const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
				const link = document.createElement('a');

				const { stationId, variableIds, summaryType, startYear, endYear, interval, ...rest } = this.requestedData;

				const selectedVariableId = variableIds[this.tab];
				const station = this.stationList.find(station => station.id === stationId)
				const variable = this.variableList.find(variable => variable.id === selectedVariableId)
						
				const filename = summaryType === 'Monthly' 
  					? `agromet-summary-(${summaryType})-${station?.name}-${variable?.symbol}-${startYear}-${endYear}-[${interval}].csv`
  					: `agromet-summary-(${summaryType})-${station?.name}-${variable?.symbol}-${startYear}-${endYear}.csv`;
			
				link.href = URL.createObjectURL(blob);
				link.download = filename;
				link.style.visibility = 'hidden';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			getColor (header, item) {	
				let item_entry = (this.requestedData.summaryType === 'Monthly')? {month: item.month, year: item.year} : {year: item.year}

				const is_min = this.filteredMinMaxData[header.value].min.some(item => JSON.stringify(item) === JSON.stringify(item_entry));
				const is_max = this.filteredMinMaxData[header.value].max.some(item => JSON.stringify(item) === JSON.stringify(item_entry));

				if (is_min && is_max) return 'black'
				else if (is_min) return 'blue'
				else if (is_max) return 'red'
				return 'black'
			},			
		},
		mounted() {
		}
	})
	
	$(document).ready(function(){
		function getCookie(c_name) {
			if(document.cookie.length > 0) {
				c_start = document.cookie.indexOf(c_name + "=");
				if(c_start != -1) {
					c_start = c_start + c_name.length + 1;
					c_end = document.cookie.indexOf(";", c_start);
					if(c_end == -1) c_end = document.cookie.length;
					return unescape(document.cookie.substring(c_start,c_end));
				}
			}
			return "";
		}
	
		$(function () {
		  axios.defaults.headers.common["X-CSRFToken"] = getCookie("csrftoken");
		  axios.defaults.headers.common["Content-Type"] = 'application/json';
		});
	});
</script>
{% endblock %}