Add reworks for partei, thema and other

webapp/README.md

@@ -1,4 +1,4 @@
-# Dashboard
+# Webapp
 Welche Themen beschäftigen das Stadtparlament St.Gallen wie stark?
 
 ## Installation

webapp/deploy.sh

@@ -1,3 +1,3 @@
- docker build -t stadtparlaments-dashboard .
- docker tag stadtparlaments-dashboard stadtparlamentsdashboardregistry.azurecr.io/stadtparlaments-dashboard:latest
- docker push stadtparlamentsdashboardregistry.azurecr.io/stadtparlaments-dashboard:latest
+ docker build -t parla-stadtparlament-webapp .
+ docker tag parla-stadtparlament-webapp stadtparlamentsdashboardregistry.azurecr.io/parla-stadtparlament-webapp:latest
+ docker push stadtparlamentsdashboardregistry.azurecr.io/parla-stadtparlament-webapp:latest

webapp/package.json

@@ -10,6 +10,7 @@
 	},
 	"devDependencies": {
 		"@fontsource/fira-mono": "^4.5.10",
+		"@iconify/svelte": "^3.1.4",
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.27.4",

webapp/src/routes/Header.svelte

@@ -13,7 +13,7 @@
 		<!-- Buttons on the right -->
 		<div class="flex space-x-2">
 			<a
-				href="/"
+				href="/sitzungen"
 				class="text-white font-semibold py-2 px-4 rounded hover:bg-gray-700 transition-colors duration-150 hover:no-underline"
 				role="button"
 			>
@@ -24,7 +24,7 @@
 				class="text-white font-semibold py-2 px-4 rounded hover:bg-gray-700 transition-colors duration-150 hover:no-underline"
 				role="button"
 			>
-				Themen
+				Thema
 			</a>
 			<a
 				href="/parteien"

webapp/src/routes/InfoEingabenParteiModal.svelte

@@ -0,0 +1,65 @@
+<!-- Modal.svelte -->
+<script>
+	export let isOpen = false;
+	export let close;
+
+	// Function to close the modal
+	function closeModal() {
+		if (close) close();
+	}
+</script>
+
+{#if isOpen}
+	<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+		<!--
+      Background backdrop, show/hide based on modal state.
+  
+      Entering: "ease-out duration-300"
+        From: "opacity-0"
+        To: "opacity-100"
+      Leaving: "ease-in duration-200"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+		<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+		<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+			<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+				<!--
+          Modal panel, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+            From: "opacity-100 translate-y-0 sm:scale-100"
+            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        -->
+				<div
+					class="relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+				>
+					<div>
+						<div class="mt-3 text-center  sm:mt-5">
+							<h3 class="text-base font-semibold leading-6 text-white" id="modal-title">
+								Warum liegt die SP vorn?
+							</h3>
+							<div class="mt-2">
+								<p class="text-sm text-gray-300">
+									Die SP ist seit den letzten 23 Jahren am stärksten Vertreten im Stadtparlament. Wenn du weitere Gründe dafür siehst schicke uns deine Meinung auf info@parlement.ch
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="mt-5 sm:mt-6">
+						<button
+                            on:click={closeModal}
+							type="button"
+							class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+							>Zurück</button
+						>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

webapp/src/routes/InfoModal.svelte

@@ -0,0 +1,65 @@
+<!-- Modal.svelte -->
+<script>
+	export let isOpen = false;
+	export let close;
+
+	// Function to close the modal
+	function closeModal() {
+		if (close) close();
+	}
+</script>
+
+{#if isOpen}
+	<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+		<!--
+      Background backdrop, show/hide based on modal state.
+  
+      Entering: "ease-out duration-300"
+        From: "opacity-0"
+        To: "opacity-100"
+      Leaving: "ease-in duration-200"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+		<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+		<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+			<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+				<!--
+          Modal panel, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+            From: "opacity-100 translate-y-0 sm:scale-100"
+            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        -->
+				<div
+					class="relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+				>
+					<div>
+						<div class="mt-3 text-center  sm:mt-5">
+							<h3 class="text-base font-semibold leading-6 text-white" id="modal-title">
+								Warum gibt es diesen Ausreisser in 2009?
+							</h3>
+							<div class="mt-2">
+								<p class="text-sm text-gray-300">
+									Genau diese Fragen wollen wir stellen, durch die Analyse der Daten. Nach der Antwort suchen wir selbst noch. Wenn du Gründe dafür siehst, schicke uns deine Meinung auf info@parlement.ch
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="mt-5 sm:mt-6">
+						<button
+                            on:click={closeModal}
+							type="button"
+							class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+							>Zurück</button
+						>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

webapp/src/routes/aktuelles-thema/+page.svelte

@@ -0,0 +1,111 @@
+<script>
+	// import Counter from './Counter.svelte';
+	// import Chart from './Chart.svelte';
+
+	import welcome from '$lib/images/svelte-welcome.webp';
+	import welcome_fallback from '$lib/images/svelte-welcome.png';
+
+	// import tradants from './tradants';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<div class="flex space-x-16">
+		<div class="infocard p-4 w-80 text-white">
+			<div class="mb-4 flex justify-between">
+				<div class="">Thema:</div>
+				<div class="p-2 rounded-md bg-neutral-800">Asyl Politik</div>
+			</div>
+			<div class="mb-4 flex justify-between">
+				<span class="">Partei:</span>
+				<span class="p-2 rounded-md bg-blue-700">JUSO</span>
+			</div>
+			<div class="mb-4 flex justify-between">
+				<span class="">Politisches Spektrum:</span>
+				<span class="p-2 rounded-md bg-green-700">65% Links</span>
+			</div>
+			<div class="mb-4 flex justify-between">
+				<span class="">Platzhalter</span>
+				<span class="p-2 rounded-md bg-neutral-800">Positiv</span>
+			</div>
+			<div class="mb-4 flex justify-between">
+				<span class="">Platzhalter</span>
+				<span class="p-2 rounded-md bg-neutral-800">So und so</span>
+			</div>
+		</div>
+
+		<div class="article-wrapper text-yellow-100 max-w-xl">
+			<div class="article-info-bar flex text-s mb-4">
+				<div class="article-date mr-8">Samstag, 23.12.2023</div>
+				<div class="article-info-title">Stadtparlaments Sitzung</div>
+			</div>
+			<div class="article-header text-xl font-bold mb-4">
+				Untersuchung der Haftbedingungen und Überstellungspraktiken im Ausschaffungsgefängnis
+				Bazenheid
+			</div>
+			<div class="article-abstract italic mb-4">
+				In einer detaillierten Anfrage an das Stadtparlament St. Gallen hinterfragt Andrea Scheck,
+				Stadtparlamentarierin der JUSO, die Haftbedingungen im Ausschaffungsgefängnis Bazenheid und
+				die Praxis der Überstellung abgewiesener Asylsuchender aus St. Gallen in diese Einrichtung.
+			</div>
+			<div class="article-text mb-8">
+				Der Text beinhaltet eine Anfrage an das Stadtparlament St. Gallen bezüglich der
+				Haftbedingungen im Ausschaffungsgefängnis Bazenheid und der Überstellung abgewiesener
+				Asylsuchender dorthin. Die Anfrage thematisiert die Einhaltung von Mindeststandards,
+				mangelnde Alternativen zu diesen Gefängnissen und die Prüfung der Rechtmäßigkeit und
+				Angemessenheit der Haft. Der Stadtrat erkennt an, dass nur Mindestanforderungen erfüllt
+				werden, sieht jedoch keine unmittelbaren Alternativen, bis die geplante Erweiterung des
+				Regionalgefängnisses Altstätten realisiert ist.
+			</div>
+			<div class="article-navigation-bar flex justify-between text-white text-s mb-4">
+				<div class="previous-session p-4 rounded-md bg-neutral-600">
+					<div>
+						<div>Sitzung davor</div>
+						<div class="text-gray-400 font-bold">22.12.2023</div>
+					</div>
+				</div>
+
+				<div class="next-session p-4 rounded-md bg-neutral-600 text-right">
+					<div>
+						<div>Sitzung danach</div>
+						<div class="text-gray-400 font-bold">23.12.2023</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 0.6;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>

webapp/src/routes/api/tradants.json/+server.js

@@ -24,7 +24,7 @@ export async function GET(request) {
       },
     });
   }
-
+@
   // Return the array of JSON objects
   return new Response({
     status: 200,

webapp/src/routes/sverdle/how-to-play/+page.js → webapp/src/routes/parteien/+page.js

@@ -2,8 +2,8 @@ import { dev } from '$app/environment';
 
 // we don't need any JS on this page, though we'll load
 // it in dev so that we get hot module replacement
-export const csr = dev;
+// export const csr = dev;
 
 // since there's no dynamic data here, we can prerender
 // it so that it gets served as a static asset in production
-export const prerender = true;
+// export const prerender = true;

webapp/src/routes/parteien/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import InfoModal from '../InfoModal.svelte';
+	import InfoEingabenParteiModal from '../InfoEingabenParteiModal.svelte';
+
+	let showModal = false;
+
+	function toggleModal() {
+		showModal = !showModal;
+	}
+</script>
+
+<div class=" text-white p-4">
+	<!-- Main Grid Container -->
+	<div class="container mx-auto grid grid-cols-1 md:grid-cols-12 gap-4 md:custom-height-md">
+		<!-- Main Content Area -->
+		<div class="md:col-span-12 flex flex-col">
+			<!-- Themen dieses Jahr Section -->
+			<div class="bg-neutral-600 p-6 px-8 rounded-3xl flex-grow overflow-auto">
+				<!-- Content goes here -->
+				<div class="flex justify-between">
+					<p>Statistik der Woche</p>
+					<button type="button" on:click={toggleModal} class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20">
+						Info <Icon class="ml-1 h-8 w-8" icon="material-symbols:info" />
+					</button>
+				</div>
+				<InfoEingabenParteiModal isOpen={showModal} close={() => (showModal = false)}>
+					<!-- Your modal content here -->
+				</InfoEingabenParteiModal>
+				<h2 class="font-bold text-zinc-100 underline text-xl mb-2">Eingaben pro Partei</h2>
+				<img src="parteienanteil.png" alt="" />
+				<!-- Add your stats bars or other content here -->
+				<!-- ... Other content -->
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	@media (min-width: 768px) {
+		.custom-height-md {
+			height: calc(100vh - 100px); /* Full viewport height minus 100px for medium screens and up */
+		}
+	}
+</style>

webapp/src/routes/sitzungen/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+// export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+// export const prerender = true;