From 525561d12d7b877c27c18effb3e42fc13a9ed847 Mon Sep 17 00:00:00 2001
From: Sarah Oberbichler <66369271+soberbichler@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:52:17 +0200
Subject: [PATCH] Update Glossary.html

---
 Glossary.html | 209 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 155 insertions(+), 54 deletions(-)
diff --git a/Glossary.html b/Glossary.html
index b4ef4a1..f99949d 100644
--- a/Glossary.html
+++ b/Glossary.html
@@ -4,8 +4,102 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Glossary</title>
+    <!-- Add Supabase JS library -->
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <style>
-        /* ... your existing styles ... */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+        .container {
+            display: flex;
+            max-width: 1000px;
+            margin: 0 auto;
+            gap: 20px;
+        }
+        .column {
+            background-color: #ffffff;
+            padding: 15px;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .side-column-left {
+            flex: 1;
+        }
+        .side-column-right {
+            flex: 0 0 150px;
+        }
+        .main-column {
+            flex: 2;
+        }
+        h1, h2 {
+            color: #444;
+            margin-top: 0;
+            font-weight: normal;
+        }
+        h1 {
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+        h2 {
+            font-size: 18px;
+            margin-bottom: 15px;
+        }
+        input[type="text"],
+        textarea {
+            width: 100%;
+            padding: 6px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            box-sizing: border-box;
+            font-size: 14px;
+        }
+        textarea {
+            height: 80px;
+            resize: vertical;
+        }
+        button, input[type="submit"] {
+            background-color: #f0f0f0;
+            color: #333;
+            padding: 6px 10px;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        button:hover, input[type="submit"]:hover {
+            background-color: #e0e0e0;
+        }
+        .glossary-section {
+            margin-bottom: 15px;
+        }
+        .section-header {
+            font-size: 16px;
+            font-weight: bold;
+            border-bottom: 1px solid #eee;
+            margin-bottom: 8px;
+            padding-bottom: 3px;
+        }
+        .glossary-item {
+            margin-bottom: 8px;
+            padding: 3px 0;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+        }
+        .term {
+            font-weight: bold;
+            margin-right: 5px;
+        }
+        .delete-button {
+            padding: 2px 5px;
+            font-size: 11px;
+        }
     </style>
 </head>
 <body>
@@ -30,69 +124,72 @@ <h2>Search</h2>
     </div>
 
     <script>
+        // Initialize Supabase client - Replace these with your actual values
+        const supabaseUrl = 'https://itpqpqtvtpdyraookiqf.supabase.co';
+        const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w';
+        const supabase = supabase.createClient(supabaseUrl, supabaseKey);
+
         const glossaryForm = document.getElementById('glossaryForm');
         const glossaryList = document.getElementById('glossaryList');
         const searchInput = document.getElementById('searchInput');
         let glossary = [];
 
-        function loadGlossary() {
-            console.log('Loading glossary from localStorage');
-            const savedGlossary = localStorage.getItem('glossary');
-            if (savedGlossary) {
-                console.log('Found saved glossary:', savedGlossary);
-                glossary = JSON.parse(savedGlossary);
+        async function loadGlossary() {
+            try {
+                console.log('Loading glossary from Supabase...');
+                const { data, error } = await supabase
+                    .from('glossary_entries')
+                    .select('*')
+                    .order('term');
+                
+                if (error) {
+                    console.error('Supabase error:', error);
+                    throw error;
+                }
+                
+                console.log('Loaded data:', data);
+                glossary = data || [];
+                updateGlossaryDisplay();
+            } catch (error) {
+                console.error('Error loading glossary:', error);
             }
-            updateGlossaryDisplay();
-        }
-
-        function saveGlossary() {
-            console.log('Saving glossary:', glossary);
-            localStorage.setItem('glossary', JSON.stringify(glossary));
         }
 
-        glossaryForm.addEventListener('submit', function(event) {
+        glossaryForm.addEventListener('submit', async function(event) {
             event.preventDefault();
-            console.log('Form submitted');
-            
             const term = document.getElementById('term').value;
             const definition = document.getElementById('definition').value;
             
-            console.log('Adding new term:', { term, definition });
-            
-            const newEntry = {
-                term: term.trim(),
-                definition: definition.trim(),
-                id: Date.now()
-            };
-            
-            glossary.push(newEntry);
-            console.log('Updated glossary:', glossary);
-            
-            saveGlossary();
-            updateGlossaryDisplay();
-            
-            glossaryForm.reset();
-        });
+            try {
+                console.log('Adding new term:', { term, definition });
+                const { error } = await supabase
+                    .from('glossary_entries')
+                    .insert([{ 
+                        term: term.trim(), 
+                        definition: definition.trim() 
+                    }]);
 
-        searchInput.addEventListener('input', function() {
-            console.log('Search input:', searchInput.value);
-            updateGlossaryDisplay();
+                if (error) throw error;
+                
+                glossaryForm.reset();
+                await loadGlossary(); // Reload the list
+            } catch (error) {
+                console.error('Error adding term:', error);
+            }
         });
 
+        searchInput.addEventListener('input', updateGlossaryDisplay);
+
         function updateGlossaryDisplay() {
-            console.log('Updating display with glossary:', glossary);
-            
             const searchTerm = searchInput.value.toLowerCase();
-            const filteredGlossary = glossary.filter(item => 
-                item.term.toLowerCase().includes(searchTerm) || 
-                item.definition.toLowerCase().includes(searchTerm)
-            );
-
-            console.log('Filtered glossary:', filteredGlossary);
+            const filteredGlossary = glossary
+                .filter(item => 
+                    item.term.toLowerCase().includes(searchTerm) || 
+                    item.definition.toLowerCase().includes(searchTerm)
+                )
+                .sort((a, b) => a.term.localeCompare(b.term));
 
             glossaryList.innerHTML = '';
-            filteredGlossary.sort((a, b) => a.term.localeCompare(b.term));
-            
             const sections = {};
             
             filteredGlossary.forEach(item => {
@@ -103,8 +200,6 @@ <h2>Search</h2>
                 sections[firstLetter].push(item);
             });
             
-            console.log('Organized sections:', sections);
-            
             Object.keys(sections).sort().forEach(letter => {
                 const sectionElement = document.createElement('div');
                 sectionElement.className = 'glossary-section';
@@ -124,17 +219,23 @@ <h2>Search</h2>
             });
         }
 
-        function deleteEntry(id) {
-            console.log('Deleting entry:', id);
+        async function deleteEntry(id) {
             if (confirm("Are you sure you want to delete this entry?")) {
-                glossary = glossary.filter(item => item.id !== id);
-                console.log('Glossary after deletion:', glossary);
-                saveGlossary();
-                updateGlossaryDisplay();
+                try {
+                    const { error } = await supabase
+                        .from('glossary_entries')
+                        .delete()
+                        .eq('id', id);
+                    
+                    if (error) throw error;
+                    await loadGlossary(); // Reload the list
+                } catch (error) {
+                    console.error('Error deleting term:', error);
+                }
             }
         }
 
-        console.log('Starting application');
+        // Initial load
         loadGlossary();
     </script>
 </body>
