{% extends 'base.html' %}
{% load static %}

{% block Application_CSS_File %}
<link rel="stylesheet" type="text/css" href="{% static 'css/ReportGenerator.css' %}">
{% endblock %}

{% block Application_JS_File %}
<script src="{% static 'js/ReportGenerator.Change.js' %}"></script>
<script src="{% static 'js/ReportGenerator.Click.js' %}"></script>
<script src="{% static 'js/ReportGenerator.Blur.js' %}"></script>
<script src="{% static 'js/ReportGenerator.h.js' %}"></script>
<script src="{% static 'js/ReportGenerator.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        ReportGenerator.prototype._Startup_("{{ form.context|safe }}");
    });
</script>
{% endblock %}

<!-- 上方內容 -->
{% block Main_Top-General %}
{% endblock %}

<!-- 當前網頁路徑 -->
{% block Main_Top-Path %}
{% endblock %}

<!-- 左方列表-->
{% block Main_Left-List %}
	{% include 'LeftList_Database.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">Report Generator</div>

    <br>

    <div class="row">
        <label class="LeftColumn" for="formatSelect">資料庫類型:</label>
        <select id="databaseTypeSelect" class="InputField" disabled>
            <option value="influxdb">InfluxDB (Time-Series)</option>
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn" for="formatSelect">Host:</label>
        <input id="databaseHost" class="InputField" type="text" value="127.0.0.1" disabled>
    </div>

    <div class="row">
        <label class="LeftColumn">資料庫:</label>
        <select id="databaseSelect" class="InputField" onchange="DatabaseSelect_change(this)">
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn">表格:</label>
        <select id="tableSelect" class="InputField" onchange="TableSelect_change(this)">
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn">標籤名稱:</label>
        <select id="tagKeySelect" class="InputField">
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn">標籤內容:</label>
        <select id="tagValueSelect" class="InputField">
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn">資料欄位名稱:</label>
        <select id="fieldKeySelect" class="InputField">
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn" for="formatSelect">圖表類型:</label>
        <select id="chartTypeSelect" class="InputField">
            <option value="lineChart">折線圖</option>
            <option value="pieChart">圓餅圖</option>
            <option value="barChart">柱狀圖</option>
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn" for="formatSelect">報表類型:</label>
        <select id="reportFormatSelect" class="InputField" onchange="FormatSelect_change(this)">
            <option value="YYYY">年報</option>
            <option value="YYYY-MM">月報</option>
            <option value="YYYY-MM-DD">日報</option>
        </select>
    </div>

    <div class="row">
        <label class="LeftColumn">選擇日期:</label>
        <select id="yearSelect" class="DataSelectField" onchange="YearMonthSelect_change(this)"></select>
        <span class="separator">/</span>
        <select id="monthSelect" class="DataSelectField" onchange="YearMonthSelect_change(this)"></select>
        <span class="separator">/</span>
        <select id="daySelect" class="DataSelectField"></select>
    </div>

    <div class="row">
        <button class="GeneratorButton" id="generateReport" onclick="GenerateReportButton_click(this)">產生報表</button>
    </div>
{% endblock %}

<!-- 下方資訊-->
{% block Main_Bottom-Information %}
{% endblock %}