plugo/_layouts/home.html

---
layout: default
---

<style>
	{% for id in site.data.dead %}tr[data-id="{{id}}"]{% if forloop.last %}{% else %},{% endif %}
	{% endfor %} {
		background-color: #f8d7da !important;
	}
</style>
<details open>
	<summary>Show Map</summary>
	<div width="740px" height="300px" id="map">
		<nav id="filter-group" class="filter-group">
			<input id="markers-zero" type="checkbox">
			<label for="markers-zero"><span></span>Zero Powerbanks</label>
		</nav>
	</div>
	
</details>

<details open>
	<summary>Show Number of Locations by Time</summary>
	<div id="chart"></div>
</details>

<details open>
	<summary>Show Number of Powerbanks by Time</summary>
	<div id="chart2"></div>
</details>

<script src="https://d3js.org/d3.v7.min.js"></script>
	<style>
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }
    </style>
    <script src="assets/chart.js"></script>

{{content}}

{% assign zeroPowerBankLocations = 0 %}
<table id="plugo-data">
	<thead>
		<tr>
			<th>Address</th>
			<th>Location Type</th>
			<th><span title="Number of Powerbanks">Count</span></th>
			<th>Date Added</th>
		</tr>
	</thead>
	<tbody>
{% assign locations = site.data.plugo|sort:'state' %}
{% assign total = 0 %}

{% for row in locations %}
<tr id="{{row.id}}" data-id="{{row.id}}">
	<td>
	{%comment%}
	{% assign state_lower_case =  row.state|downcase %}
	<!-- <td>{{site.data.city[city_lower_case] | default:row.city}}, {{site.data.state[state_lower_case] | default: row.state}}</td> -->
	{%endcomment%}
	{% include location.html data=row %}
	</td>
	<td>{{row.business}}</td>
	<td>{{row.totalAvailablePowerbanks}} 
		{% if  site.data.dead contains row.id  %}💀{%endif%}
	</td>
  {% if row.totalAvailablePowerbanks == 0 %}
  {% assign zeroPowerBankLocations = zeroPowerBankLocations | plus:1 %}
  {% endif %}
	<td data-sort="{{row.createdAt | date_to_xmlschema}}">{{row.createdAt | date_to_string}}</td>
	{% assign total = total|plus:row.totalAvailablePowerbanks %}
	<!-- <td>{%if row.isVisible %}☑{%else%}❌{%endif%}</td> -->
</tr>
{% endfor %}
</tbody>
</table>

<h3>Statistics</h3>
<ul>
	<li>Total Available Powerbanks: {{total}}</li>
	<li>Total Locations: {{locations|size}} out of which {{site.data.dead | size }} are dead (no powerbanks seen in 2 weeks)</li>
	<li>{{zeroPowerBankLocations}} locations with zero powerbanks</li>
	<li>Last Updated: {{site.time | date: "%Y-%m-%d %H:%M" }} IST</li>
	<li>This page is automatically updated 5 times a day, at roughly 0930, 1230, 1530, 1830, 2130 IST</li>
	<li>The map is also available in <a href="map.geojson">GeoJSON Format</a>. You can also view the underlying data directly at <a href="http://geojson.io/#data=data:text/x-url,https://captnemo.in/plugo/map.geojson">geojson.io</a>.
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js" integrity="sha256-04C2SeXF6JtsrsX+sFnI+gFdm56VJdhW49hWm4m+0io=" crossorigin="anonymous"></script>
<script>
	let table = new DataTable('#plugo-data', {
		"paging": false,
		"autoWidth": false,
		"info": false
	});
</script>

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" integrity="sha256-eQmEh0JSFrPkGN9Lge0CpB3ZMAiwuSBq9tQKMURq0do=" crossorigin="anonymous">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js" integrity="sha256-s0WzvUEKt3AVyIJQ7kE4w+yqDoZxIiMiW+dImDRo5/E=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/plugo/assets/style.css">
<script src="/plugo/map.js"></script>