{% extends "app/admin/base.html" %}
{% load static %}
{% block content %}

    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <h1>Configuration</h1>
            <p class="lead">
                Settings and data used in the application can be uploaded and refreshed here.
            </p>

            <h3>1. Obtain data exports</h3>

            <p>Each of the following data exports from the GMBA Access database are needed to completely refresh the database.
                Details on how to export them is <a href="#data-sources">documented below</a>. The filenames need to exactly match the ones in this list:
            <ul>

                <li data-file="people_details" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>people_details</b>.csv
									</span>
									<span class="commands">
	                  <a href="#people_details" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/data/people_details.csv" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

                <li data-file="resources" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>resources</b>.csv
									</span>
									<span class="commands">
	                  <a href="#resources" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/data/resources.csv" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

                <li data-file="ranges" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>ranges</b>.csv
									</span>
									<span class="commands">
	                  <a href="#ranges" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/data/ranges.csv" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

                <li data-file="people_resources" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>people_resources</b>.csv
									</span>
									<span class="commands">
	                  <a href="#people_resources" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/data/people_resources.csv" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

                <li data-file="people_ranges" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>people_ranges</b>.csv
									</span>
									<span class="commands">
	                  <a href="#people_ranges" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/data/people_ranges.csv" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

                <li data-file="gmba" class="datafile">
									<span class="filename">
	                  <font color="green">&#9745;</font>
										<b>gmba</b>.geojson
									</span>
									<span class="commands">
	                  <a href="#gmba" title="Click to see information">
											info
											<i class="glyphicon glyphicon-info-sign"></i>
	                  </a>

										<a href="/geodata/gmba.geojson" download title="Download">
											download
											<i class="glyphicon glyphicon-download"></i>
										</a>
									</span>
                </li>

            </ul>

            <div class="progress" style="width: 50%; margin: 50px;">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                    <span class="progress-bar-label">Processing: 0%</span>
                </div>
            </div>

            <h3>2. Send data to the server</h3>
            <p>Use this form to select a file on your machine for uploading to the server.
                Repeat the process until each source above has a green checkmark.</p>

            <form method="POST" enctype="multipart/form-data" action="/upload">
                {% csrf_token %}
                <input type="file" name="datafile">
                <button type="submit" class="btn btn-success">
                    Upload data file
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </form>

            <h3>3. Refresh application data</h3>
            <p>Once the files have all been uploaded (green), you can press the orange button here to
            validate and refresh the information in the app. Any errors will stop the processing,
            and you will see a notification at the top of the screen. This step takes a few minutes.</p>

            <form action="/refresh" method="post">
                {% csrf_token %}
                <button type="submit" disabled class="btn btn-warning" id="refresh-all">
                    Refresh dataset
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </form>

            <h3>4. Prepare the search engine</h3>
            <p>The last step is to reindex the application's search engine by clicking the button below.
            At this point users will see information in the search results.</p>

            <form action="/reindex" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">
                    Reindex the search
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </form>
            <hr>

            <h1 id="data-sources">Data sources</h1>

            <p>In this section you can find out how to obtain data for each of the resources listed above.</p>
            <p>Each of the sources expected is a CSV file encoded with <b>UTF-8</b> format, except for geodata in GeoJSON format.</p>

            <h4 id="people-details">people_details</h4>
            <p>
                The fields being updated are all part of one query on three tables: “People”, “Organisations” and “LU_Countries”. Selected fields come from the different tables and the selection of people is based on the Yes/No value “ProfileOnWeb” (lower right field in the screenshot).
            </p><p>
                <a href="{% static 'app/images/screenshot-access1.jpg' %}"><img src="{% static 'app/images/screenshot-access1.jpg' %}" width="25%"></a>
            </p><p>
                The fields: “Taxa”, “Methods” and “Geographic area of expertise” and “Scale“ concatenate information from various YesNo columns, as you see at the bottom of the screenshot for “Scale”
            </p><p>
                So, at this stage, producing the table with the fields listed above requires to run the query called “<b>QryPeopleExport</b>”.
            </p><p>
                We expect the table to have this header:
                <table class="head">
					<tr>
						<td align="left"><b>MrMrs</b></td>
						<td align="left"><b>Title</b></td>
						<td align="left"><b>First name</b></td>
						<td align="left"><b>Last name</b></td>
						<td align="left"><b>Position</b></td>
						<td align="left"><b>e-mail 1</b></td>
						<td align="left"><b>URL</b></td>
						<td align="left"><b>Organisation English</b></td>
						<td align="left"><b>Country</b></td>
						<td align="left"><b>Biography</b></td>
						<td align="left"><b>Field of expertise</b></td>
						<td align="left"><b>Taxa</b></td>
						<td align="left"><b>Methods</b></td>
						<td align="left"><b>Geographic area of expertise</b></td>
						<td align="left"><b>Scale</b></td>
						<td align="left"><b>ProfileOnWeb</b></td>
						<td align="left"><b>ID</b></td>
					</tr>
				</table>
			</p>

            <h4 id="resources">resources</h4>
            <p>This is a full export of the <b>Resources</b> table.</p>

			<table class="head">
				<tr>
					<td align="left"><b>ID</b></td>
					<td align="left"><b>Title</b></td>
					<td align="left"><b>Citation</b></td>
					<td align="left"><b>Type</b></td>
					<td align="left"><b>Range</b></td>
					<td align="left"><b>URL</b></td>
					<td align="left"><b>Abstract</b></td>
					<td align="left"><b>AuthorKeywords</b></td>
					<td align="left"><b>Lat</b></td>
					<td align="left"><b>Lon</b></td>
					<td align="left"><b>Stars</b></td>
				</tr>
			</table>

            <h4 id="ranges">ranges</h4>
            <p>This is a full export of the (Mountain) <b>Ranges</b> table.</p>

			<table class="head">
				<tr>
					<td align="left"><b>Range_ID</b></td>
					<td align="left"><b>RangeName</b></td>
					<td align="left"><b>RangeNameLanguage</b></td>
					<td align="left"><b>MotherRange</b></td>
					<td align="left"><b>Level</b></td>
					<td align="left"><b>Centroid_Latitude</b></td>
					<td align="left"><b>Centroid_Longitude</b></td>
					<td align="left"><b>Orogeny</b></td>
					<td align="left"><b>Area</b></td>
					<td align="left"><b>GMBA_ID</b></td>
					<td align="left"><b>Countries</b></td>
					<td align="left"><b>Peak_Elevation</b></td>
					<td align="left"><b>Peak_Name</b></td>
					<td align="left"><b>Peak_Latitude</b></td>
					<td align="left"><b>Peak_Longitude</b></td>
					<td align="left"><b>Comments</b></td>
					<td align="left"><b>Checked</b></td>
					<td align="left"><b>Source</b></td>
					<td align="left"><b>Range_AlternateID</b></td>
				</tr>
			</table>

            <h4 id="people_resources">people_resources</h4>
            <p>This is a full export of the <b>People to Resources</b> table.</p>

			<table class="head">
				<tr>
					<td align="left"><b>ID</b></td>
					<td align="left"><b>Resource</b></td>
					<td align="left"><b>Person</b></td>
					<td align="left"><b>Role</b></td>
				</tr>
			</table>

            <h4 id="people_ranges">people_ranges</h4>
            <p>This is a full export of the <b>People to Ranges</b> table.</p>

			<table class="head">
				<tr>
					<td align="left"><b>ID</b></td>
					<td align="left"><b>Person</b></td>
					<td align="left"><b>MountainRange</b></td>
				</tr>
			</table>

	          <h4 id="gmba">gmba.geojson</h4>

	          <p>This file contains geodata about mountain ranges in
							<a href="http://geojson.org/">GeoJSON</a> format.
 							The source of the data is a GIS layer maintained by GMBA with mountain polygons.
							The export folder contains one small scale layer and one large scale one.
							We use the small scale version, additionally simplified and compressed using
							<a href="https://www.qgis.org/">QGIS</a> or <a href="https://mapshaper.org/">Mapshaper</a>.
							Each polygon comes with a GMBA-ID that matches the <b>people_ranges</b> table.
						</p>

						<p>The data can be uploaded in the backend, but will be reset on deployments.
							To ensure that it is preserved, it should also be updated in the
							<a href="https://github.com/loleg/gmba-connect/blob/master/geodata/gmba.geojson">source code</a>
							- <tt>geodata</tt> folder.</p>

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

{% block js %}
<script>
(function($) {
    $(function() {

        $("#refresh-all").removeAttr('disabled');
        var source = new EventSource("/progress");
        source.onmessage = function(event) {
            //console.log(event.data);
            jd = JSON.parse(event.data);
            pc = Math.min(100, Math.round(jd.p));
            $('.progress-bar').css('width', pc+'%').attr('aria-valuenow', pc);
            $('.progress-bar-label').text('Processing: '+pc+'%');
            if (pc > 0)
                $("#refresh-all").attr('disabled', 1);
            else
                $("#refresh-all").removeAttr('disabled');
            // Status highlighting
            $('.datafile').removeClass('active');
            $('.datafile[data-file="'+jd.f+'"]').addClass('active');
            $('.progress').css('display', (jd.f=='') ? 'none':'block');
        }

        $("#refresh-all").click(function(e) {
            e.preventDefault(); e.stopPropagation();
            $(this).attr('disabled', 1);
            var frm = $(this).parent();
            $.post(frm.attr('action'), frm.serialize(), function(data) {
                if (data.indexOf('done:')>=0) {
                    a_type = 'success';
                    data = data.substring(data.indexOf('done:')+5);
                } else if (data.indexOf('error:')>=0) {
                    a_type = 'danger';
                    data = data.substring(data.indexOf('error:')+6);
                } else {
                    a_type = 'info';
                }
                $('.navbar').first().after('<div class="alert alert-' +
                    a_type + ' alert-dismissable">' +
                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' +
                    data +
                '</div>');
            });
        });

    }); //-
})(jQuery);
</script>
{% endblock %}
{% block css %}
<style>
	table.head { width: 100%; overflow-x: scroll; display: block; }
	table.head tr td { padding: 5pt; border: 1px solid darkgrey; }
	h4 { padding: 10pt; background: #ffd; }
</style>
<style type="text/css">
    .datafile.active { background: lightseagreen }

		li.datafile { list-style:none;font-size:150% }
		li.datafile:hover { background: yellow }
		li.datafile .filename, li.datafile .commands { display:inline-block; width:16em }
</style>
{% endblock %}