From 705422f044b2e484e09ff6736dfbae7dc82ead6b Mon Sep 17 00:00:00 2001
From: Petter <petter@digidemlab.org>
Date: Thu, 16 Jan 2025 14:12:31 +0100
Subject: [PATCH] v2

---
 index.html | 607 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 378 insertions(+), 229 deletions(-)
diff --git a/index.html b/index.html
index 697ab47..698d83f 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Min Matplikt - Dashboard</title>
+    <title>Min Matplikt</title>
+    <!-- CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link href="fonts.css" rel="stylesheet">
     <style>
         :root {
@@ -52,45 +54,70 @@
             border: 1px solid var(--gray);
             padding: 1.5rem;
             border-radius: 8px;
+            margin-bottom: 1.5rem;
         }
 
-        .progress-bar {
-            width: 100%;
-            height: 8px;
-            background-color: var(--gray);
-            border-radius: 4px;
-            overflow: hidden;
+        .checkbox-list {
+            list-style: none;
+            padding: 0;
         }
 
-        .progress-fill {
-            height: 100%;
-            background-color: var(--green);
-            transition: width 0.3s ease;
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
         }
 
-        .project-card {
-            border: 1px solid var(--gray);
-            padding: 1rem;
-            margin-bottom: 1rem;
+        .custom-checkbox {
+            width: 24px;
+            height: 24px;
+            border: 2px solid var(--gray);
             border-radius: 4px;
+            margin-right: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
         }
 
-        .button {
+        .custom-checkbox.checked {
             background-color: var(--green);
+            border-color: var(--green);
+        }
+
+        .custom-checkbox.checked::after {
+            content: '✓';
             color: var(--black);
-            padding: 0.5rem 1rem;
+            font-weight: bold;
+        }
+
+        #map {
+            height: 400px;
+            width: 100%;
             border-radius: 4px;
-            cursor: pointer;
         }
 
-        .button:hover {
-            background-color: var(--pink);
+        .map-legend {
+            display: flex;
+            gap: 2rem;
+            padding: 1rem;
+            background: var(--white);
+            border: 1px solid var(--gray);
+            border-radius: 4px;
+            margin-top: 1rem;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
         .climate-stats {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 1rem;
+            margin-bottom: 1rem;
         }
 
         .stat-card {
@@ -100,222 +127,344 @@
             text-align: center;
         }
 
-        footer {
-            margin-top: 4rem;
-            padding-top: 2rem;
-            border-top: 1px solid var(--gray);
+        .stat-card i {
+            color: var(--black);
+            margin-bottom: 0.5rem;
+        }
+
+        .recommended-crops {
+            margin-top: 1rem;
+            background: var(--white);
+            padding: 1rem;
+            border-radius: 4px;
+            border: 1px solid var(--gray);
+        }
+
+        .crop-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid var(--gray);
+        }
+
+        .crop-metrics {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .metric {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
         }
+
+        .project-card {
+            border: 1px solid var(--gray);
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 4px;
+        }
+
+        .button {
+            background-color: var(--green);
+            color: var(--black);
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .button:hover {
+            background-color: var(--pink);
+        }
+
     </style>
 </head>
 <body>
-    <div class="container mx-auto px-4 max-w-7xl">
-        <!-- Header -->
-        <header class="py-8">
-            <h1 class="text-4xl font-bold mb-2">Min Matplikt</h1>
-            <p class="text-xl">Dashboard för min matproduktion</p>
-        </header>
-
-        <!-- Region Selector -->
-        <div class="region-selector">
-            <button class="region-button">Sverige</button>
-            <button class="region-button">Västra Götaland</button>
-            <button class="region-button">Göteborg</button>
-            <button class="region-button active">Masthugget</button>
-        </div>
-
-        <!-- Main Dashboard Grid -->
-        <div class="dashboard-grid">
-            <!-- Left Column - Map and Goals -->
-            <div class="space-y-4">
-                <!-- Map Area -->
-                <div class="card">
-                    <div class="flex justify-between items-start mb-4">
-                        <h2 class="text-2xl font-bold">Masthugget</h2>
-                        <div class="text-right">
-                            <p class="font-bold">Odlingszon 1</p>
-                        </div>
-                    </div>
-                    <div class="relative w-full h-[400px] bg-gray-100 rounded">
-                        <svg viewBox="0 0 400 300" class="w-full h-full">
-                            <!-- Base map -->
-                            <rect x="0" y="0" width="400" height="300" fill="var(--gray)" />
-
-                            <!-- Active Areas -->
-                            <circle cx="150" cy="120" r="8" fill="var(--green)" />
-                            <circle cx="220" cy="180" r="8" fill="var(--green)" />
-
-                            <!-- Suggested Areas -->
-                            <circle cx="180" cy="150" r="8" fill="none" stroke="var(--pink)"
-                                    stroke-width="2" stroke-dasharray="4,4" />
-                            <circle cx="280" cy="130" r="8" fill="none" stroke="var(--pink)"
-                                    stroke-width="2" stroke-dasharray="4,4" />
-                        </svg>
-                    </div>
-                </div>
-
-                <!-- Climate Data -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Klimatdata - Mars 2025</h2>
-                    <div class="climate-stats">
-                        <div class="stat-card">
-                            <h3>Temperatur</h3>
-                            <p class="text-2xl font-bold">8°C</p>
-                        </div>
-                        <div class="stat-card">
-                            <h3>Nederbörd</h3>
-                            <p class="text-2xl font-bold">45mm</p>
-                        </div>
-                        <div class="stat-card">
-                            <h3>Jordkvalitet</h3>
-                            <p class="text-2xl font-bold">God</p>
-                        </div>
-                        <div class="stat-card">
-                            <h3>Luftkvalitet</h3>
-                            <p class="text-2xl font-bold">Måttlig</p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Production Goals -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Måluppfyllelse lokal matproduktion</h2>
-                    <canvas id="goalsChart" height="200"></canvas>
-                </div>
-            </div>
-
-            <!-- Right Column - Tasks and Projects -->
-            <div class="space-y-4">
-                <!-- My Commitments -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Mina åtaganden</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <div class="flex justify-between mb-2">
-                                <span>Gå med i lokal odlingsgrupp</span>
-                                <span>75%</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: 75%"></div>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="flex justify-between mb-2">
-                                <span>Tillvarata frukt från allmänna parker</span>
-                                <span>30%</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: 30%"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Active Projects -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Pågående projekt</h2>
-                    <div class="space-y-4">
-                        <div class="project-card">
-                            <h3 class="font-bold">Masthuggets Odlingsförening</h3>
-                            <p class="text-sm mb-2">Stadsodling</p>
-                            <div class="progress-bar mb-2">
-                                <div class="progress-fill" style="width: 85%"></div>
-                            </div>
-                            <button class="button">Anmäl intresse</button>
-                        </div>
-                        <div class="project-card">
-                            <h3 class="font-bold">Kolonilotter vid Kjellmansgatan</h3>
-                            <p class="text-sm mb-2">Koloniområde</p>
-                            <div class="progress-bar mb-2">
-                                <div class="progress-fill" style="width: 65%"></div>
-                            </div>
-                            <button class="button">Anmäl intresse</button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Project Suggestions -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Förslag på projekt</h2>
-                    <div class="space-y-4">
-                        <div class="project-card">
-                            <h3 class="font-bold">Nya pallkragar till Värmlandsgatan</h3>
-                            <div class="grid grid-cols-2 gap-2 my-2">
-                                <div>
-                                    <p class="text-sm">Matproduktion</p>
-                                    <div class="progress-bar">
-                                        <div class="progress-fill" style="width: 35%"></div>
-                                    </div>
-                                </div>
-                                <div>
-                                    <p class="text-sm">Luftkvalitet</p>
-                                    <div class="progress-bar">
-                                        <div class="progress-fill" style="width: 20%"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex justify-between items-center">
-                                <span class="text-sm">15 intresserade</span>
-                                <button class="button">Visa intresse</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Seasonal Recommendations -->
-                <div class="card">
-                    <h2 class="text-xl font-bold mb-4">Rekommenderade grödor - Mars</h2>
-                    <div class="space-y-4">
-                        <div class="project-card">
-                            <h3 class="font-bold">Spenat</h3>
-                            <div class="grid grid-cols-2 gap-2 my-2">
-                                <div>
-                                    <p class="text-sm">Matproduktion: +30%</p>
-                                    <div class="progress-bar">
-                                        <div class="progress-fill" style="width: 30%"></div>
-                                    </div>
-                                </div>
-                                <div>
-                                    <p class="text-sm">Luftkvalitet: +15%</p>
-                                    <div class="progress-bar">
-                                        <div class="progress-fill" style="width: 15%"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <footer>
-            <p>Matplikt är ett projekt från Digidem Lab</p>
-        </footer>
-    </div>
 
+  <div class="container mx-auto px-4 max-w-7xl">
+      <!-- Header -->
+      <header class="py-8">
+          <h1 class="text-4xl font-bold mb-2">Min Matplikt</h1>
+          <p class="text-xl">Verktyg för att hantera min matproduktion</p>
+      </header>
+
+      <!-- Region Selector -->
+      <div class="region-selector">
+          <button class="region-button">Sverige</button>
+          <button class="region-button">Västra Götaland</button>
+          <button class="region-button">Göteborg</button>
+          <button class="region-button active">Masthugget</button>
+      </div>
+
+      <div class="dashboard-grid">
+          <!-- Left Column -->
+          <div class="space-y-4">
+              <!-- Map -->
+              <div class="card">
+                  <div class="flex justify-between items-start mb-4">
+                      <h2 class="text-2xl font-bold">Masthugget</h2>
+                      <div class="text-right">
+                          <p class="font-bold">Odlingszon 1</p>
+                      </div>
+                  </div>
+                  <div id="map"></div>
+                  <div class="map-legend">
+                      <div class="legend-item">
+                          <div style="width: 12px; height: 12px; background: var(--green); border-radius: 50%;"></div>
+                          <span>Aktiva odlingar</span>
+                      </div>
+                      <div class="legend-item">
+                          <div style="width: 12px; height: 12px; border: 2px solid var(--pink); border-radius: 50%;"></div>
+                          <span>Föreslagna områden</span>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- Climate Data -->
+              <div class="card">
+                  <h2 class="text-xl font-bold mb-4">Klimatdata - Mars 2025</h2>
+                  <div class="climate-stats">
+                      <div class="stat-card">
+                          <i class="fas fa-temperature-high text-2xl"></i>
+                          <h3>Temperatur</h3>
+                          <p class="text-2xl font-bold">8°C</p>
+                      </div>
+                      <div class="stat-card">
+                          <i class="fas fa-cloud-rain text-2xl"></i>
+                          <h3>Nederbörd</h3>
+                          <p class="text-2xl font-bold">45mm</p>
+                      </div>
+                      <div class="stat-card">
+                          <i class="fas fa-seedling text-2xl"></i>
+                          <h3>Jordkvalitet</h3>
+                          <p class="text-2xl font-bold">God</p>
+                      </div>
+                      <div class="stat-card">
+                          <i class="fas fa-wind text-2xl"></i>
+                          <h3>Luftkvalitet</h3>
+                          <p class="text-2xl font-bold">Måttlig</p>
+                      </div>
+                  </div>
+
+                  <div class="recommended-crops">
+                      <h3 class="text-lg font-bold mb-2">Rekommenderade grödor</h3>
+                      <div class="crop-item">
+                          <span class="font-bold">🥬 Spenat</span>
+                          <div class="crop-metrics">
+                              <div class="metric">
+                                  <i class="fas fa-apple-alt"></i>
+                                  <span>+30%</span>
+                              </div>
+                              <div class="metric">
+                                  <i class="fas fa-wind"></i>
+                                  <span>+15%</span>
+                              </div>
+                          </div>
+                      </div>
+                      <div class="crop-item">
+                          <span class="font-bold">🥕 Morötter</span>
+                          <div class="crop-metrics">
+                              <div class="metric">
+                                  <i class="fas fa-apple-alt"></i>
+                                  <span>+25%</span>
+                              </div>
+                              <div class="metric">
+                                  <i class="fas fa-wind"></i>
+                                  <span>+10%</span>
+                              </div>
+                          </div>
+                      </div>
+                      <div class="crop-item">
+                          <span class="font-bold">🌱 Rädisor</span>
+                          <div class="crop-metrics">
+                              <div class="metric">
+                                  <i class="fas fa-apple-alt"></i>
+                                  <span>+20%</span>
+                              </div>
+                              <div class="metric">
+                                  <i class="fas fa-wind"></i>
+                                  <span>+5%</span>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- Goals Chart -->
+              <div class="card">
+                  <h2 class="text-xl font-bold mb-4">Måluppfyllelse lokal matproduktion</h2>
+                  <canvas id="goalsChart" height="200"></canvas>
+              </div>
+          </div>
+
+          <!-- Right Column -->
+          <div class="space-y-4">
+              <!-- Commitments as Checklist -->
+              <div class="card">
+                  <h2 class="text-xl font-bold mb-4">Mina åtaganden</h2>
+                  <ul class="checkbox-list">
+                      <li class="checkbox-item">
+                          <div class="custom-checkbox checked"></div>
+                          <span>Gå med i lokal odlingsgrupp</span>
+                      </li>
+                      <li class="checkbox-item">
+                          <div class="custom-checkbox checked"></div>
+                          <span>Tillvarata frukt från allmänna parker</span>
+                      </li>
+                      <li class="checkbox-item">
+                          <div class="custom-checkbox"></div>
+                          <span>Starta balkongodling</span>
+                      </li>
+                  </ul>
+              </div>
+
+              <!-- Active Projects -->
+              <div class="card">
+                  <h2 class="text-xl font-bold mb-4">Pågående projekt</h2>
+                  <div class="space-y-4">
+                      <div class="project-card">
+                          <h3 class="font-bold">Masthuggets Odlingsförening</h3>
+                          <p class="text-sm mb-2">Stadsodling</p>
+                          <div class="flex justify-between items-center">
+                              <span>24 medlemmar</span>
+                              <button class="button">Anmäl intresse</button>
+                          </div>
+                      </div>
+                      <div class="project-card">
+                          <h3 class="font-bold">Kolonilotter vid Kjellmansgatan</h3>
+                          <p class="text-sm mb-2">Koloniområde</p>
+                          <div class="flex justify-between items-center">
+                              <span>12 medlemmar</span>
+                              <button class="button">Anmäl intresse</button>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- Project Suggestions -->
+              <div class="card">
+                  <h2 class="text-xl font-bold mb-4">Förslag på projekt</h2>
+                  <div class="space-y-4">
+                      <div class="project-card">
+                          <h3 class="font-bold">Nya pallkragar till Värmlandsgatan</h3>
+                          <div class="grid grid-cols-2 gap-2 my-2">
+                              <div class="metric">
+                                  <i class="fas fa-apple-alt"></i>
+                                  <span>Mat: +35%</span>
+                              </div>
+                              <div class="metric">
+                                  <i class="fas fa-wind"></i>
+                                  <span>Luft: +20%</span>
+                              </div>
+                          </div>
+                          <div class="flex justify-between items-center">
+                              <span>15 intresserade</span>
+                              <button class="button">Visa intresse</button>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <!-- Footer -->
+      <footer class="py-8 border-t border-gray">
+          <p>Matplikt är ett projekt från Digidem Lab</p>
+      </footer>
+  </div>
+
+
+    <!-- JavaScript i slutet av body -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
     <script>
-        // Initialize goals chart
-        const ctx = document.getElementById('goalsChart').getContext('2d');
-        new Chart(ctx, {
-            type: 'bar',
-            data: {
-                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun'],
-                datasets: [{
-                    label: 'Måluppfyllelse',
-                    data: [65, 70, 75, 80, 85, 90],
-                    backgroundColor: 'var(--green)'
-                }]
-            },
-            options: {
-                responsive: true,
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        max: 100
+        // Initiera karta och graf när sidan har laddats helt
+        window.addEventListener('load', function() {
+            // Initiera karta
+            initMap();
+            // Initiera graf
+            initChart();
+        });
+
+        function initMap() {
+            const mapElement = document.getElementById('map');
+            if (!mapElement) {
+                console.error('Map element not found');
+                return;
+            }
+
+            try {
+                const map = L.map('map').setView([57.699, 11.952], 15);
+
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    attribution: '© OpenStreetMap contributors'
+                }).addTo(map);
+
+                // Definiera ikoner
+                const activeIcon = L.divIcon({
+                    className: 'custom-marker',
+                    html: '<div style="width: 12px; height: 12px; background: #00F1A4; border-radius: 50%;"></div>',
+                    iconSize: [12, 12]
+                });
+
+                const suggestedIcon = L.divIcon({
+                    className: 'custom-marker',
+                    html: '<div style="width: 12px; height: 12px; border: 2px solid #FF7484; border-radius: 50%;"></div>',
+                    iconSize: [12, 12]
+                });
+
+                // Lägg till markörer
+                L.marker([57.699, 11.952], {icon: activeIcon})
+                    .addTo(map)
+                    .bindPopup('Masthuggets Odlingsförening');
+
+                L.marker([57.697, 11.955], {icon: suggestedIcon})
+                    .addTo(map)
+                    .bindPopup('Förslag: Nya pallkragar');
+
+            } catch (error) {
+                console.error('Error initializing map:', error);
+                mapElement.innerHTML = '<div class="p-4 bg-red-100 text-red-700">Det gick inte att ladda kartan. Försök ladda om sidan.</div>';
+            }
+        }
+
+        function initChart() {
+            const chartElement = document.getElementById('goalsChart');
+            if (!chartElement) {
+                console.error('Chart element not found');
+                return;
+            }
+
+            try {
+                const ctx = chartElement.getContext('2d');
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun'],
+                        datasets: [{
+                            label: 'Måluppfyllelse',
+                            data: [65, 70, 75, 80, 85, 90],
+                            backgroundColor: '#00F1A4'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                max: 100
+                            }
+                        }
                     }
-                }
+                });
+            } catch (error) {
+                console.error('Error initializing chart:', error);
+                chartElement.insertAdjacentHTML('afterend',
+                    '<div class="p-4 bg-red-100 text-red-700">Det gick inte att ladda grafen. Försök ladda om sidan.</div>'
+                );
             }
-        });
+        }
     </script>
 </body>
 </html>
