geo-activity-playground 1.0.0__py3-none-any.whl → 1.2.0__py3-none-any.whl

geo_activity_playground/webui/templates/equipment/index.html.j2

@@ -35,7 +35,7 @@
 <div class="row mb-3">
     <div class="col">
         <h2>Monthly Equipment Usage</h2>
-        {{ vega_direct("stacked_area_chart", stacked_area_chart) }}
+        {{ vega_direct(stacked_area_chart) }}
     </div>
 </div>
 
@@ -49,13 +49,13 @@
 <h3>{{ equipment }}</h3>
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct(data.total_distances_plot_id, data.total_distances_plot) }}
+        {{ vega_direct(data.total_distances_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct(data.yearly_distance_plot_id, data.yearly_distance_plot) }}
+        {{ vega_direct(data.yearly_distance_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct(data.usages_plot_id, data.usages_plot) }}
+        {{ vega_direct(data.usages_plot) }}
     </div>
 </div>
 {% endfor %}

geo_activity_playground/webui/templates/explorer/server-side.html.j2

@@ -25,7 +25,8 @@
 </div>
 
 <div class="btn-group mb-3" role="group">
-    <button type="button" class="btn btn-primary" onclick="changeColor('cluster')">Cluster</button>
+    <button type="button" class="btn btn-primary" onclick="changeColor('colorful_cluster')">Colorful Cluster</button>
+    <button type="button" class="btn btn-primary" onclick="changeColor('max_cluster')">Max Cluster</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('first')">First Visit</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('last')">Last Visit</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('visits')">Number of Visits</button>
@@ -58,17 +59,17 @@
 <div class="row mb-3">
     <div class="col-md-4">
         {% if plot_tile_evolution|length > 0 %}
-        {{ vega_direct("plot_tile_evolution", plot_tile_evolution) }}
+        {{ vega_direct(plot_tile_evolution) }}
         {% endif %}
     </div>
     <div class="col-md-4">
         {% if plot_cluster_evolution|length > 0 %}
-        {{ vega_direct("plot_cluster_evolution", plot_cluster_evolution) }}
+        {{ vega_direct(plot_cluster_evolution) }}
         {% endif %}
     </div>
     <div class="col-md-4">
         {% if plot_square_evolution|length > 0 %}
-        {{ vega_direct("plot_square_evolution", plot_square_evolution) }}
+        {{ vega_direct(plot_square_evolution) }}
         {% endif %}
     </div>
 </div>

geo_activity_playground/webui/templates/hall_of_fame/index.html.j2

@@ -0,0 +1,57 @@
+{% extends "page.html.j2" %}
+
+{% block container %}
+
+<h1>Hall of Fame</h1>
+
+<div class="mb-3">
+    {% include "search_form.html.j2" %}
+</div>
+
+<script>
+    function add_map(id, geojson) {
+        let map = L.map(`map-${id}`, {
+            fullscreenControl: true
+        })
+        L.tileLayer('/tile/color/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '{{ map_tile_attribution|safe }}'
+        }).addTo(map)
+
+        let geojson_layer = L.geoJSON(geojson).addTo(map)
+        map.fitBounds(geojson_layer.getBounds())
+        return map
+    }
+</script>
+
+{% for activity_batch in nominations|batch(3) %}
+<div class="row row-cols-1 row-cols-md-3 g-4 mb-3">
+    {% for activity, reasons, line_geojson in activity_batch %}
+    <div class="col">
+        <div class="card">
+            <div class="card-img-top" id="map-{{ activity.id }}" style="height: 200px; width: 100%;"></div>
+            <script>
+                let map{{ activity.id }} = add_map("{{ activity.id }}", {{ line_geojson | safe }})
+            </script>
+            <div class="card-body">
+                <a href="{{ url_for('activity.show', id=activity.id) }}">
+                    <h5 class="card-title">{{ activity["name"] }}</h5>
+                </a>
+                <p class="card-text">
+                <ul style='list-style-type: "🏆 "'>
+                    {% for reason in reasons %}
+                    <li>{{ reason }}</li>
+                    {% endfor %}
+                </ul>
+                </p>
+                <p class="card-text"><small class="text-body-secondary"></small>{{ activity.emoji_string }} on {{
+                    activity.start|dt }}</small></p>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% endfor %}
+
+
+{% endblock %}

geo_activity_playground/webui/templates/home.html.j2

@@ -8,10 +8,7 @@
 <div class="row mb-3">
     <div class="col">
         <h2>Last 30 days</h2>
-        {{ vega_direct("distance-last-30-days", distance_last_30_days_plot) }}
-        {% if elevation_gain_last_30_days_plot %}
-        {{ vega_direct("elevation-gain-last-30-days", elevation_gain_last_30_days_plot) }}
-        {% endif %}
+        {{ tabbed_vega(last_30_days_plot) }}
     </div>
 </div>
 
@@ -49,14 +46,7 @@
                     <h5 class="card-title">{{ elem.activity.name }}</h5>
                 </a>
                 <p class="card-text">
-                    {{ elem.activity.kind.name }} with
-                    📏 {{ (elem.activity.distance_km)|round(1) }} km
-                    {% if elem.activity.elapsed_time %}
-                    ⏱️ {{ elem.activity.elapsed_time|td }}
-                    {% endif %}
-                    {% if elem.activity.elevation_gain %}
-                    ⛰️ {{ (elem.activity.elevation_gain)|round|int }} m
-                    {% endif %}
+                    {{ elem.activity.emoji_string }}
                 </p>
                 {% if elem.activity.start %}
                 <p class="card-text"><small class="text-body-secondary">{{ elem.activity.start|dt }}</small></p>

geo_activity_playground/webui/templates/page.html.j2

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 
+{% from "plot-macros.html.j2" import vega, vega_direct, activity_tag, tabbed_vega %}
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,37 +10,37 @@
     <title>Geo Activity Playground</title>
 
     <!-- Bootstrap CSS. -->
-    <link href="/static/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
 
     <!-- Leaflet for interactive maps. -->
-    <link rel="stylesheet" href="/static/leaflet.css" />
-    <script src="/static/leaflet.js"></script>
+    <link rel="stylesheet" href="/static/leaflet/leaflet.css" />
+    <script src="/static/leaflet/leaflet.js"></script>
 
     <!-- Fullscreen button for Leaflet. -->
-    <link href='/static/leaflet.fullscreen.css' rel='stylesheet' />
-    <script src='/static/Leaflet.fullscreen.min.js'></script>
+    <link href='/static/leaflet/leaflet.fullscreen.css' rel='stylesheet' />
+    <script src='/static/leaflet/Leaflet.fullscreen.min.js'></script>
 
-    <link rel="stylesheet" href="/static/MarkerCluster.css" />
-    <link rel="stylesheet" href="/static/MarkerCluster.Default.css" />
-    <script src="/static/leaflet.markercluster.js"></script>
+    <link rel="stylesheet" href="/static/leaflet/MarkerCluster.css" />
+    <link rel="stylesheet" href="/static/leaflet/MarkerCluster.Default.css" />
+    <script src="/static/leaflet/leaflet.markercluster.js"></script>
 
     <!-- Vega for plots.-->
-    <script src="/static/vega@5"></script>
-    <script src="/static/vega-lite@4"></script>
-    <script src="/static/vega-embed@6"></script>
+    <script src="/static/vega/vega@5.js"></script>
+    <script src="/static/vega/vega-lite@4.js"></script>
+    <script src="/static/vega/vega-embed@6.js"></script>
 
-    <script src="/static/bootstrap-dark-mode.js"></script>
+    <script src="/static/bootstrap/bootstrap-dark-mode.js"></script>
 
     <script src="/static/table-sort.min.js"></script>
 
     <!-- Favicon. -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="manifest" href="/static/site.webmanifest">
-    <link rel="shortcut icon" href="/static/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="shortcut icon" href="/static/favicons/favicon.ico">
     <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="msapplication-config" content="/static/browserconfig.xml">
+    <meta name="msapplication-config" content="/static/favicons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 </head>
 
@@ -78,6 +80,8 @@
                                 <li><a class="dropdown-item" href="{{ url_for('summary.index') }}">Summary
                                         Statistics</a>
                                 </li>
+                                <li><a class="dropdown-item" href="{{ url_for('hall_of_fame.index') }}">Hall of Fame</a>
+                                </li>
                                 <li><a class="dropdown-item" href="{{ url_for('eddington.distance') }}">Eddington
                                         Number</a>
                                 </li>
@@ -183,24 +187,6 @@
             </div>
         </nav>
 
-        {% macro vega(id, path) %}
-        <div id="{{ id }}"></div>
-        <script type="text/javascript">
-            vegaEmbed('#{{ id }}', "{{ path }}").then(function (result) { }).catch(console.error);
-        </script>
-        {% endmacro %}
-
-        {% macro vega_direct(id, spec) %}
-        <div id="{{ id }}"></div>
-        <script type="text/javascript">
-            vegaEmbed('#{{ id }}', {{ spec| safe }}).then(function (result) { }).catch(console.error);
-        </script>
-        {% endmacro %}
-
-        {% macro activity_tag(tag) %}
-        <span class="badge" style="background-color: {{ tag.color or '#0d6efd' }}">{{ tag.tag }}</span>
-        {% endmacro %}
-
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         {% for category, message in messages %}
@@ -235,7 +221,7 @@
         </div>
     </div>
 
-    <script src="/static/bootstrap.bundle.min.js"></script>
+    <script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>

geo_activity_playground/webui/templates/photo/new.html.j2

@@ -6,7 +6,7 @@
 <form method="POST" enctype="multipart/form-data">
     <div class="mb-3">
         <label for="file" class="form-label">Photo file</label>
-        <input type="file" name="file" id="file" class="form-control">
+        <input type="file" name="file" id="file" class="form-control" multiple>
     </div>
     <button type="submit" class="btn btn-primary">Upload</button>
 </form>

geo_activity_playground/webui/templates/plot-macros.html.j2

@@ -0,0 +1,72 @@
+{% macro vega(path) %}
+{% set id = unique_id() %}
+<div id="{{ id }}"></div>
+<script type="text/javascript">
+    vegaEmbed('#{{ id }}', "{{ path }}").then(function (result) { }).catch(console.error);
+</script>
+{% endmacro %}
+
+{% macro vega_direct(spec) %}
+{% set id = unique_id() %}
+<div id="{{ id }}"></div>
+<script type="text/javascript">
+    vegaEmbed('#{{ id }}', {{ spec| safe }}).then(function (result) { }).catch(console.error);
+</script>
+{% endmacro %}
+
+{% macro activity_tag(tag) %}
+<span class="badge" style="background-color: {{ tag.color or '#0d6efd' }}">{{ tag.tag }}</span>
+{% endmacro %}
+
+{% macro tabbed_vega(tab_dict, last=False) %}
+{% set id = unique_id() %}
+<ul class="nav nav-pills mb-3" role="tablist">
+    {% for key in tab_dict.keys() %}
+    {% set plot_id = id ~ "-" ~ loop.index %}
+    <li class="nav-item" role="presentation">
+        <button class="nav-link {% if (last and loop.last) or (not last and loop.first) %} active {% endif %}"
+            id="{{ plot_id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ plot_id }}-pane" type="button" role="tab"
+            aria-controls="{{ plot_id }}-pane" aria-selected="{{ loop.last }}">{{ key }}</button>
+    </li>
+    {% endfor %}
+</ul>
+<div class="tab-content mb-3">
+    {% for plot in tab_dict.values() %}
+    {% set plot_id = id ~ "-" ~ loop.index %}
+    <div class="tab-pane fade {% if (last and loop.last) or (not last and loop.first) %} show active {% endif %}"
+        id="{{ plot_id }}-pane" role="tabpanel" aria-labelledby="{{ plot_id }}-tab" tabindex="0">
+        {{ vega_direct(plot) }}
+    </div>
+    {% endfor %}
+</div>
+{% endmacro %}
+
+{% macro parametric_plot(spec, plot_groups, outer_loop_index) %}
+{% if spec.group_by %}
+<ul class="nav nav-pills mb-3" id="myTab_{{ outer_loop_index }}" role="tablist">
+    {% for key, plot in plot_groups.items() %}
+    {% set plot_id = "custom_plot_" ~ outer_loop_index ~ "_" ~ loop.index %}
+    <li class="nav-item" role="presentation">
+        <button class="nav-link {% if loop.last %} active {% endif %}" id="{{ plot_id }}-tab" data-bs-toggle="tab"
+            data-bs-target="#{{ plot_id }}-pane" type="button" role="tab" aria-controls="{{ plot_id }}-pane"
+            aria-selected="{{ loop.last }}">{{ key }}</button>
+    </li>
+    {% endfor %}
+</ul>
+<div class="tab-content mb-3" id="myTabContent_{{ outer_loop_index }}">
+    {% for key, plot in plot_groups.items() %}
+    {% set plot_id = "custom_plot_" ~ outer_loop_index ~ "_" ~ loop.index %}
+    <div class="tab-pane fade {% if loop.last %} show active {% endif %}" id="{{ plot_id }}-pane" role="tabpanel"
+        aria-labelledby="{{ plot_id }}-tab" tabindex="0">
+        {{ vega_direct(plot) }}
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="row mb-3">
+    <div class="col">
+        {{ vega_direct(plot_groups[""]) }}
+    </div>
+</div>
+{% endif %}
+{% endmacro %}

geo_activity_playground/webui/templates/plot_builder/edit.html.j2

@@ -1,11 +1,17 @@
 {% extends "page.html.j2" %}
 
-{% block container %}
+{% from "plot-macros.html.j2" import parametric_plot %}
 
-<h1 class="row mb-3">Plot Builder</h1>
+{% block container %}
 
-<div class="mb-3"><a class="btn btn-primary" href="{{ url_for('.index') }}">Back to overview</a></div>
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="{{ url_for('.index') }}">Plot Builder</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Edit</li>
+    </ol>
+</nav>
 
+<h1 class="row mb-3">Plot Builder</h1>
 
 <div class="row mb-3">
     <div class="col-md-4">
@@ -22,12 +28,13 @@
         </div>
         {% endmacro %}
 
-        <form>
+        <form method="post">
             <div class="mb-3">
                 <label for="name">Name</label>
                 <input type="text" name="name" id="name" class="form-control" value="{{ spec.name }}">
             </div>
 
+            {{ select_field("Group by", "group_by", group_by, spec.group_by)}}
             {{ select_field("Mark", "mark", marks, spec.mark)}}
 
             {{ select_field("X", "x", continuous, spec.x)}}
@@ -45,7 +52,7 @@
     </div>
     <div class="col-md-8">
         {% if plot %}
-        {{ vega_direct("plot", plot) }}
+        {{ parametric_plot(spec, plot, 0) }}
         {% endif %}
     </div>
 </div>
@@ -58,6 +65,4 @@
 
 <code><pre>{{ spec.to_json() }}</pre></code>
 
-
-
 {% endblock %}

geo_activity_playground/webui/templates/plot_builder/import-spec.html.j2

@@ -0,0 +1,24 @@
+{% extends "page.html.j2" %}
+
+{% block container %}
+
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="{{ url_for('.index') }}">Plot Builder</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Import</li>
+    </ol>
+</nav>
+
+<h1 class="mb-3">Import Custom Plot</h1>
+
+<form method="post">
+    <div class="mb-3">
+        <label for="spec_json" class="form-label">Plot specification JSON</label>
+        <textarea class="form-control" id="spec_json" rows="3" name="spec_json"></textarea>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Import & Preview</button>
+</form>
+
+
+{% endblock %}

geo_activity_playground/webui/templates/plot_builder/index.html.j2

@@ -2,8 +2,11 @@
 
 {% block container %}
 
+
 <h1 class="row mb-3">Plot Builder</h1>
 
+<p>Build custom plots here. For inspiration, check out <a href="https://martin-ueding.github.io/geo-activity-playground/build-custom-plots/" target="_blank">the documentation</a>.</p>
+
 {% if specs %}
 <table class="table mb-3">
     <thead>
@@ -29,4 +32,6 @@
 
 <a class="btn btn-primary" href="{{ url_for('.new') }}">New</a>
 
+<a class="btn btn-primary" href="{{ url_for('.import_spec') }}">Import</a>
+
 {% endblock %}

geo_activity_playground/webui/templates/settings/index.html.j2

@@ -56,6 +56,15 @@
                 </div>
             </div>
         </div>
+        <div class="col">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Map tile source</h5>
+                    <p class="card-text">Change the source of the map tiles.</p>
+                    <a href="{{ url_for('.tile_source') }}" class="btn btn-primary">Change tile source</a>
+                </div>
+            </div>
+        </div>
         <div class="col">
             <div class="card">
                 <div class="card-body">

geo_activity_playground/webui/templates/settings/tile-source.html.j2

@@ -0,0 +1,33 @@
+{% extends "page.html.j2" %}
+
+{% block container %}
+
+<h1 class="mb-3">Tile Source</h1>
+
+<p>You can change the tile source to be whatever you like. Be aware that different sources have different licensing
+    constraints. It is on you to make sure that you are allowed to use the tiles from the source that you enter. See <a
+        href="https://wiki.openstreetmap.org/wiki/Raster_tile_providers" target="_blank">this list of raster tile
+        providers</a> for inspiration.</p>
+
+
+<form action="" method="POST" class="mb-3">
+    <div class="mb-3">
+        <label for="map_tile_url" class="form-label">Map tile URL</label>
+        <input type="text" class="form-control" id="map_tile_url" name="map_tile_url" value="{{ map_tile_url }}" />
+    </div>
+    <div class="mb-3">
+        <label for="map_tile_attribution" class="form-label">Map tile attribution</label>
+        <input type="text" class="form-control" id="map_tile_attribution" name="map_tile_attribution"
+            value="{{ map_tile_attribution|e }}" />
+    </div>
+
+    <button type="submit" class="btn btn-primary">Save</button>
+</form>
+
+<h2>Test image</h2>
+
+<p>This is a tile using your current tile source:</p>
+
+<p><img src="{{ test_url }}"></p>
+
+{% endblock %}