130 lines
		
	
	
		
			4.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			130 lines
		
	
	
		
			4.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8">
 | 
						|
    <title>{{station_call}} Status</title>
 | 
						|
 | 
						|
  <!-- Leaflet's CSS -->
 | 
						|
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
 | 
						|
  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
 | 
						|
  crossorigin=""/>
 | 
						|
  <!-- Make sure you put this AFTER Leaflet's CSS -->
 | 
						|
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
 | 
						|
  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
 | 
						|
  crossorigin=""></script>
 | 
						|
 | 
						|
    <style>
 | 
						|
      table, th, td {
 | 
						|
        border: 1px solid black;
 | 
						|
      }
 | 
						|
      #map { height: 250px; }
 | 
						|
      .leaflet-tooltip.my-labels {
 | 
						|
        background-color: transparent;
 | 
						|
        border: transparent;
 | 
						|
        box-shadow: none;
 | 
						|
        }
 | 
						|
    </style>
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
<div style="width: 100%; overflow: hidden;">
 | 
						|
    <div style="width: 50%; float: left;">
 | 
						|
 | 
						|
      <h1>{{station_call}} Status</h1>
 | 
						|
      Station location: {{station_lat}}, {{station_lon}}
 | 
						|
 | 
						|
      <h2> About </h2>
 | 
						|
      This is a work in progress. See <a href="https://amiok.net/gitea/W1CDN/aprs_tool">https://amiok.net/gitea/W1CDN/aprs_tool</a> for usage.
 | 
						|
    </div>
 | 
						|
    <div style="margin-left: 50%;">
 | 
						|
      <div id="map"></div>
 | 
						|
        <script>
 | 
						|
            var map = L.map('map').setView([{{station_lat}}, {{station_lon}}], 10);
 | 
						|
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'}).addTo(map);
 | 
						|
 | 
						|
            //{{markers|safe}}
 | 
						|
 | 
						|
            // Show station location
 | 
						|
            var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', {permanent: true}).openTooltip();
 | 
						|
            
 | 
						|
            // Show GeoJSON of markers
 | 
						|
            var group = L.geoJSON({{geojs|safe}},
 | 
						|
                    {
 | 
						|
                        style: function (feature) {
 | 
						|
                            return {color: feature.properties.color};
 | 
						|
                        }
 | 
						|
                    });
 | 
						|
 | 
						|
            // group.bindTooltip(function (layer) {
 | 
						|
            //                           return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from;
 | 
						|
            //                           }, {permanent: false}).openTooltip().addTo(map);
 | 
						|
            // Hacked together from https://gis.stackexchange.com/a/246919
 | 
						|
            var pointLayer = L.geoJSON(null, {
 | 
						|
                                pointToLayer: function(feature,latlng){
 | 
						|
                                  //(true condition) ? "true" : "false"
 | 
						|
                                  label = (feature.properties.object_name === null) ? String(feature.properties.from) : String(feature.properties.object_name)
 | 
						|
                                  //label = String('Object '+feature.properties.object_name+' from '+feature.properties.from) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
 | 
						|
                                  return new L.CircleMarker(latlng, {
 | 
						|
                                    radius: 1,
 | 
						|
                                  }).bindTooltip(label, {permanent: true, opacity: 0.7, className: "my-labels"}).openTooltip();
 | 
						|
                                  }
 | 
						|
                                });
 | 
						|
            pointLayer.addData({{geojs|safe}});
 | 
						|
            map.addLayer(pointLayer);
 | 
						|
            
 | 
						|
 | 
						|
            // Zoom to show all
 | 
						|
            map.fitBounds(group.getBounds().pad(0.3));
 | 
						|
        </script>
 | 
						|
    </div>
 | 
						|
</div>
 | 
						|
 | 
						|
<h2> Recent RF Packets </h2>
 | 
						|
Query <a href="{{path}}/packets?n=10">10</a> | <a href="{{path}}/packets?n=50">50</a> | <a href="{{path}}/packets?n=100">100</a>
 | 
						|
   <table>
 | 
						|
     <tr>
 | 
						|
      <th> from </th>
 | 
						|
      <th> object_name </th>
 | 
						|
      <th> raw </th>
 | 
						|
      <th> created (utc) </th>
 | 
						|
      <th> relative </th>
 | 
						|
      <th> more </th>
 | 
						|
    </tr>
 | 
						|
        {% for i in frames %}
 | 
						|
     <tr>
 | 
						|
       <td> <a href="https://digi.w1cdn.net/aprs_api/packets?from={{ i['from'] }}">{{ i['from'] }}</a> </td>
 | 
						|
       <td> {{ i['object_name'] }} </td>
 | 
						|
       <td> {{ i['raw'] }} </td>
 | 
						|
       <td> {{ i['created'] }} </td>
 | 
						|
       <td> {{ i['time_ago'] }} </td>
 | 
						|
       <td> <a href="https://digi.w1cdn.net/aprs_api/packets?id={{ i['id'] }}">query</a>,
 | 
						|
            <a href="https://aprs.fi/#!mt=roadmap&z=12&call=a%2F{{ i['from'] }}">aprs.fi</a></td>
 | 
						|
     </tr>
 | 
						|
      {% endfor %}
 | 
						|
  </table>
 | 
						|
 | 
						|
  
 | 
						|
 | 
						|
<h2> Recent Stations </h2>
 | 
						|
Query <a href="{{path}}/stations?n=10">10</a> | <a href="{{path}}/stations?n=50">50</a> | <a href="{{path}}/stations?n=100">100</a>
 | 
						|
<table>
 | 
						|
  <tr>
 | 
						|
   <th> from </th>
 | 
						|
   <th> last heard (utc) </th>
 | 
						|
   <th> relative </th>
 | 
						|
   <th> count </th>
 | 
						|
   <th> more </th>
 | 
						|
 </tr>
 | 
						|
     {% for i in stations %}
 | 
						|
  <tr>
 | 
						|
    <td> <a href="https://digi.w1cdn.net/aprs_api/packets?from={{ i['from'] }}">{{ i['from'] }}</a> </td>
 | 
						|
    <td> {{ i['last_heard'] }} </td>
 | 
						|
    <td> {{ i['time_ago'] }} </td>
 | 
						|
    <td> {{ i['count']}} </td>
 | 
						|
    <td> <a href="https://aprs.fi/#!mt=roadmap&z=12&call=a%2F{{ i['from'] }}">aprs.fi</a></td>
 | 
						|
  </tr>
 | 
						|
   {% endfor %}
 | 
						|
</table>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 |