From bc5f11d4991794c6de117e9c516cbfc454ec9ed0 Mon Sep 17 00:00:00 2001
From: Krateng <git.noreply@krateng.ch>
Date: Thu, 27 Aug 2020 17:26:56 +0200
Subject: [PATCH] Implemented tiled charts for jinja

---
 maloja/jinja_filters.py                       |  4 ++
 maloja/server.py                              |  4 +-
 maloja/static/less/maloja.less                | 11 ++++-
 maloja/web/jinja/charts_artists.jinja         |  5 +++
 maloja/web/jinja/charts_tracks.jinja          |  5 +++
 .../jinja/partials/charts_artists_tiles.jinja | 41 +++++++++++++++++++
 .../jinja/partials/charts_tracks_tiles.jinja  | 41 +++++++++++++++++++
 7 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 maloja/jinja_filters.py
 create mode 100644 maloja/web/jinja/partials/charts_artists_tiles.jinja
 create mode 100644 maloja/web/jinja/partials/charts_tracks_tiles.jinja

diff --git a/maloja/jinja_filters.py b/maloja/jinja_filters.py
new file mode 100644
index 0000000..b78da42
--- /dev/null
+++ b/maloja/jinja_filters.py
@@ -0,0 +1,4 @@
+def fixlength(real,target):
+	t = real[:target]
+	while len(t)<target: t.append(None)
+	return t
diff --git a/maloja/server.py b/maloja/server.py
index dc4382f..6e8b8cb 100755
--- a/maloja/server.py
+++ b/maloja/server.py
@@ -20,6 +20,7 @@ from .utilities import resolveImage
 from .urihandler import uri_to_internal, remove_identical
 from . import urihandler
 from . import globalconf
+from . import jinja_filters
 # doreah toolkit
 from doreah import settings
 from doreah.logging import log
@@ -155,7 +156,7 @@ def static_image(pth):
 @webserver.route("/style.css")
 def get_css():
 	response.content_type = 'text/css'
-	return css
+	return generate_css() if settings.get_settings("CSS_DEBUG") else css
 
 
 @webserver.route("/login")
@@ -224,6 +225,7 @@ jinjaenv = Environment(
 	autoescape=select_autoescape(['html', 'xml'])
 )
 jinjaenv.globals.update(JINJA_CONTEXT)
+jinjaenv.filters.update({k:jinja_filters.__dict__[k] for k in jinja_filters.__dict__ if not k.startswith("__")})
 
 
 @webserver.route("/<name:re:admin.*>")
diff --git a/maloja/static/less/maloja.less b/maloja/static/less/maloja.less
index 6e75625..48a6287 100644
--- a/maloja/static/less/maloja.less
+++ b/maloja/static/less/maloja.less
@@ -679,12 +679,18 @@ table.tiles_top>tbody>tr>td {
 	width:300px;
 }
 
+
 table.tiles_sub {
 	height:100%;
 	width:100%;
 }
 
-table.tiles_top td {
+table.tiles_sub div {
+	height:100%;
+	width:100%;
+}
+
+table.tiles_top td div {
 	background-size:cover;
 	background-position:center;
 	vertical-align:bottom;
@@ -693,6 +699,9 @@ table.tiles_top td {
 table.tiles_top td span {
 	background-color:rgba(0,0,0,0.7);
 }
+table.tiles_top td a:hover {
+	text-decoration: none;
+}
 
 table.tiles_1x1 td {
 	height:100%;
diff --git a/maloja/web/jinja/charts_artists.jinja b/maloja/web/jinja/charts_artists.jinja
index ad8aaeb..b7969c2 100644
--- a/maloja/web/jinja/charts_artists.jinja
+++ b/maloja/web/jinja/charts_artists.jinja
@@ -33,6 +33,11 @@
 	</tr>
 </table>
 
+{% if settings('CHARTS_DISPLAY_TILES') %}
+	{% import 'partials/charts_artists_tiles.jinja' as charts_artists_tiles %}
+	{{ charts_artists_tiles.charts_artists_tiles(limitkeys,amountkeys,compare=true) }}
+	<br/><br/>
+{% endif %}
 
 {% import 'partials/charts_artists.jinja' as charts_artists %}
 {{ charts_artists.charts_artists(limitkeys,amountkeys,compare=true) }}
diff --git a/maloja/web/jinja/charts_tracks.jinja b/maloja/web/jinja/charts_tracks.jinja
index 5bd6ec5..e116774 100644
--- a/maloja/web/jinja/charts_tracks.jinja
+++ b/maloja/web/jinja/charts_tracks.jinja
@@ -33,6 +33,11 @@
 	</tr>
 </table>
 
+{% if settings('CHARTS_DISPLAY_TILES') %}
+	{% import 'partials/charts_tracks_tiles.jinja' as charts_tracks_tiles %}
+	{{ charts_tracks_tiles.charts_tracks_tiles(filterkeys,limitkeys,amountkeys,compare=true) }}
+	<br/><br/>
+{% endif %}
 
 {% import 'partials/charts_tracks.jinja' as charts_tracks %}
 {{ charts_tracks.charts_tracks(filterkeys,limitkeys,amountkeys,charts=charts,compare=true) }}
diff --git a/maloja/web/jinja/partials/charts_artists_tiles.jinja b/maloja/web/jinja/partials/charts_artists_tiles.jinja
new file mode 100644
index 0000000..6097b16
--- /dev/null
+++ b/maloja/web/jinja/partials/charts_artists_tiles.jinja
@@ -0,0 +1,41 @@
+{% macro charts_artists_tiles(limitkeys,amountkeys,charts=None,compare=False) %}
+
+{% if charts is none %}
+	{% set charts = dbp.get_charts_artists(limitkeys) %}
+{% endif %}
+
+{% set charts = charts | fixlength(14) %}
+{% set charts_cycler = cycler(*charts) %}
+
+
+<table class="tiles_top"><tr>
+{% for segment in range(3) %}
+	<td>
+	{% set segmentsize = segment+1 %}
+	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
+		{% for row in range(segmentsize) %}
+			<tr>
+				{% for col in range(segmentsize) %}
+					{% set entry = charts_cycler.next() %}
+					{% if entry is not none %}
+						{% set artist = entry.artist %}
+						{% set rank = entry.rank %}
+						<td>
+							<a href="{{ htmlgenerators.link_address(artist) }}">
+							<div style='cursor:pointer;background-image:url("{{ utilities.getArtistImage(artist,fast=True) }}")'>
+								<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
+							</div>
+							</a>
+						</td>
+					{% else %}
+						<td><span class='stats'></span> <span></span></td>
+					{% endif %}
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</table>
+</td>
+{% endfor %}
+</tr></table>
+
+{%- endmacro %}
diff --git a/maloja/web/jinja/partials/charts_tracks_tiles.jinja b/maloja/web/jinja/partials/charts_tracks_tiles.jinja
new file mode 100644
index 0000000..b3b6ea2
--- /dev/null
+++ b/maloja/web/jinja/partials/charts_tracks_tiles.jinja
@@ -0,0 +1,41 @@
+{% macro charts_tracks_tiles(filterkeys,limitkeys,amountkeys,charts=None,compare=False) %}
+
+{% if charts is none %}
+	{% set charts = dbp.get_charts_tracks(filterkeys,limitkeys) %}
+{% endif %}
+
+{% set charts = charts | fixlength(14) %}
+{% set charts_cycler = cycler(*charts) %}
+
+
+<table class="tiles_top"><tr>
+{% for segment in range(3) %}
+	<td>
+	{% set segmentsize = segment+1 %}
+	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
+		{% for row in range(segmentsize) %}
+			<tr>
+				{% for col in range(segmentsize) %}
+					{% set entry = charts_cycler.next() %}
+					{% if entry is not none %}
+						{% set track = entry.track %}
+						{% set rank = entry.rank %}
+						<td>
+							<a href="{{ htmlgenerators.link_address(track) }}">
+							<div style='cursor:pointer;background-image:url("{{ utilities.getTrackImage(track.artists,track.title,fast=True) }}")'>
+								<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
+							</div>
+							</a>
+						</td>
+					{% else %}
+						<td><span class='stats'></span> <span></span></td>
+					{% endif %}
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</table>
+</td>
+{% endfor %}
+</tr></table>
+
+{%- endmacro %}