web: Added inline layout for single value statistic queries

YourMJK · Aug 2, 2024 · 95c8072 · 95c8072
1 parent 7de3a49
commit 95c8072
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 23 deletions.
diff --git a/code/dreimetadaten/Web/StatisticsPageBuilder.swift b/code/dreimetadaten/Web/StatisticsPageBuilder.swift
@@ -35,7 +35,7 @@ class StatisticsPageBuilder: PageBuilder {
 				default: return "\(value)"
 			}
 		}
-		func createSection(title: String, subtitle: String? = nil, noHeaders: Bool = false, query: String) throws {
+		func createSection(title: String, subtitle: String? = nil, inline: Bool = false, noHeaders: Bool = false, query: String) throws {
 			addLine("<div class=\"statistic\">")
 
 			// Query result
@@ -44,12 +44,25 @@ class StatisticsPageBuilder: PageBuilder {
 				throw ResultError.queryHasNoResults(query: query)
 			}
 
+			// Inline result
+			var title = title
+			if inline {
+				title.append(":")
+				addLine("<div class=\"inline\">")
+				addLine("<div>")
+			}
+
 			// Title
 			addLine("<h3>\(title)</h3>")
 			if let subtitle {
 				addLine("<h4>\(subtitle)</h4>")
 			}
 
+			if inline {
+				addLine("</div>")
+				addLine("<div>")
+			}
+
 			// Table
 			let table = TableBuilder()
 			table.startTable(class: .datatable)
@@ -73,6 +86,11 @@ class StatisticsPageBuilder: PageBuilder {
 
 			content.append(table.content)
 
+			if inline {
+				addLine("</div>")
+				addLine("</div>")
+			}
+
 			// Query
 			addLine("<details>")
 			addLine("\t<summary><b>SQL</b></summary>")
@@ -81,6 +99,9 @@ class StatisticsPageBuilder: PageBuilder {
 
 			addLine("</div>\n")
 		}
+		func createSingleSection(title: String, subtitle: String? = nil, query: String) throws {
+			try createSection(title: title, subtitle: subtitle, inline: true, noHeaders: true, query: query)
+		}
 
 		try createSection(
 			title: "Top 10 Sprecher",
@@ -139,19 +160,18 @@ class StatisticsPageBuilder: PageBuilder {
 			ORDER BY dauer DESC LIMIT 10
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Gesamtdauer aller Hörspiele",
-			noHeaders: true,
+			subtitle: "in Stunden",
 			query:
 			"""
-			SELECT ROUND(SUM(dauer)/1000/3600.0, 2) || ' Stunden'
+			SELECT ROUND(SUM(dauer)/1000/3600.0, 2)
 			FROM kapitel JOIN track USING (trackID)
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Anzahl an Hörspielen",
 			subtitle: "ohne Teile",
-			noHeaders: true,
 			query:
 			"""
 			SELECT COUNT(*) FROM hörspiel h
@@ -160,37 +180,33 @@ class StatisticsPageBuilder: PageBuilder {
 			)
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Anzahl an Sprechern",
-			noHeaders: true,
 			query:
 			"""
 			SELECT COUNT(*) FROM (
 			  SELECT DISTINCT personID FROM spricht
 			)
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Anzahl an Rollen",
-			noHeaders: true,
 			query:
 			"""
 			SELECT COUNT(*) FROM rolle
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Anzahl an Buchautoren",
-			noHeaders: true,
 			query:
 			"""
 			SELECT COUNT(*) FROM (
 			  SELECT DISTINCT personID FROM hörspielBuchautor
 			)
 			"""
 		)
-		try createSection(
+		try createSingleSection(
 			title: "Anzahl an Hörspielskriptautoren",
-			noHeaders: true,
 			query:
 			"""
 			SELECT COUNT(*) FROM (

diff --git a/web/statistik.html b/web/statistik.html
@@ -299,27 +299,40 @@ <h4>nach Dauer</h4>
 </div>
 
 <div class="statistic">
-<h3>Gesamtdauer aller Hörspiele</h3>
+<div class="inline">
+<div>
+<h3>Gesamtdauer aller Hörspiele:</h3>
+<h4>in Stunden</h4>
+</div>
+<div>
 <table class="datatable">
 <tr>
-	<td class="cell_data">307.62 Stunden</td>
+	<td class="cell_data">307.62</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
-	<pre><code class="hljs language-sql">SELECT ROUND(SUM(dauer)/1000/3600.0, 2) || ' Stunden'
+	<pre><code class="hljs language-sql">SELECT ROUND(SUM(dauer)/1000/3600.0, 2)
 FROM kapitel JOIN track USING (trackID)</code></pre>
 </details>
 </div>
 
 <div class="statistic">
-<h3>Anzahl an Hörspielen</h3>
+<div class="inline">
+<div>
+<h3>Anzahl an Hörspielen:</h3>
 <h4>ohne Teile</h4>
+</div>
+<div>
 <table class="datatable">
 <tr>
 	<td class="cell_data">259</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
 	<pre><code class="hljs language-sql">SELECT COUNT(*) FROM hörspiel h
@@ -330,12 +343,18 @@ <h4>ohne Teile</h4>
 </div>
 
 <div class="statistic">
-<h3>Anzahl an Sprechern</h3>
+<div class="inline">
+<div>
+<h3>Anzahl an Sprechern:</h3>
+</div>
+<div>
 <table class="datatable">
 <tr>
 	<td class="cell_data">900</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
 	<pre><code class="hljs language-sql">SELECT COUNT(*) FROM (
@@ -345,25 +364,37 @@ <h3>Anzahl an Sprechern</h3>
 </div>
 
 <div class="statistic">
-<h3>Anzahl an Rollen</h3>
+<div class="inline">
+<div>
+<h3>Anzahl an Rollen:</h3>
+</div>
+<div>
 <table class="datatable">
 <tr>
 	<td class="cell_data">2001</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
 	<pre><code class="hljs language-sql">SELECT COUNT(*) FROM rolle</code></pre>
 </details>
 </div>
 
 <div class="statistic">
-<h3>Anzahl an Buchautoren</h3>
+<div class="inline">
+<div>
+<h3>Anzahl an Buchautoren:</h3>
+</div>
+<div>
 <table class="datatable">
 <tr>
 	<td class="cell_data">25</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
 	<pre><code class="hljs language-sql">SELECT COUNT(*) FROM (
@@ -373,12 +404,18 @@ <h3>Anzahl an Buchautoren</h3>
 </div>
 
 <div class="statistic">
-<h3>Anzahl an Hörspielskriptautoren</h3>
+<div class="inline">
+<div>
+<h3>Anzahl an Hörspielskriptautoren:</h3>
+</div>
+<div>
 <table class="datatable">
 <tr>
 	<td class="cell_data">10</td>
 </tr>
 </table>
+</div>
+</div>
 <details>
 	<summary><b>SQL</b></summary>
 	<pre><code class="hljs language-sql">SELECT COUNT(*) FROM (

diff --git a/web/style.css b/web/style.css
@@ -240,6 +240,7 @@ footer {
 	vertical-align: bottom;
 }
 
+
 .statisticsData {
 	margin: 2em 0;
 	display: grid;
@@ -249,6 +250,14 @@ footer {
 .statistic h3, .statistic h4 {
 	margin: 0.1em 0;
 }
-.statistic table {
+.statistic .datatable {
 	margin: 1em 0;
 }
+
+.statistic .inline {
+	display: flex;
+	gap: 1em;
+}
+.statistic .inline .datatable {
+	margin: 0;
+}