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

---
 Glossary.html | 187 +++++---------------------------------------------
 1 file changed, 16 insertions(+), 171 deletions(-)
diff --git a/Glossary.html b/Glossary.html
index f99949d..4252cc6 100644
--- a/Glossary.html
+++ b/Glossary.html
@@ -4,130 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Glossary</title>
-    <!-- Add Supabase JS library -->
+    <!-- Add Supabase JS library FIRST -->
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <style>
-        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;
-        }
+        /* ... keep your existing styles ... */
     </style>
 </head>
 <body>
-    <h1>Glossary</h1>
-    <div class="container">
-        <div class="column side-column-left">
-            <h2>Add New Term</h2>
-            <form id="glossaryForm">
-                <input type="text" id="term" name="term" placeholder="Term" required>
-                <textarea id="definition" name="definition" placeholder="Definition" required></textarea>
-                <input type="submit" value="Add">
-            </form>
-        </div>
-        <div class="column main-column">
-            <h2>Glossary List</h2>
-            <div id="glossaryList"></div>
-        </div>
-        <div class="column side-column-right">
-            <h2>Search</h2>
-            <input type="text" id="searchInput" placeholder="Type to search...">
-        </div>
-    </div>
+    <!-- ... keep your existing HTML ... -->
 
     <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);
+        // Create the Supabase client BEFORE any other code
+        const { createClient } = supabase;
+        const supabaseClient = createClient(
+            'https://itpqpqtvtpdyraookiqf.supabase.co',
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w'
+        );
 
         const glossaryForm = document.getElementById('glossaryForm');
         const glossaryList = document.getElementById('glossaryList');
@@ -136,18 +28,12 @@ <h2>Search</h2>
 
         async function loadGlossary() {
             try {
-                console.log('Loading glossary from Supabase...');
-                const { data, error } = await supabase
+                const { data, error } = await supabaseClient
                     .from('glossary_entries')
                     .select('*')
                     .order('term');
                 
-                if (error) {
-                    console.error('Supabase error:', error);
-                    throw error;
-                }
-                
-                console.log('Loaded data:', data);
+                if (error) throw error;
                 glossary = data || [];
                 updateGlossaryDisplay();
             } catch (error) {
@@ -161,8 +47,7 @@ <h2>Search</h2>
             const definition = document.getElementById('definition').value;
             
             try {
-                console.log('Adding new term:', { term, definition });
-                const { error } = await supabase
+                const { error } = await supabaseClient
                     .from('glossary_entries')
                     .insert([{ 
                         term: term.trim(), 
@@ -170,65 +55,25 @@ <h2>Search</h2>
                     }]);
 
                 if (error) throw error;
-                
                 glossaryForm.reset();
-                await loadGlossary(); // Reload the list
+                await loadGlossary();
             } catch (error) {
                 console.error('Error adding term:', error);
             }
         });
 
-        searchInput.addEventListener('input', updateGlossaryDisplay);
-
-        function updateGlossaryDisplay() {
-            const searchTerm = searchInput.value.toLowerCase();
-            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 = '';
-            const sections = {};
-            
-            filteredGlossary.forEach(item => {
-                const firstLetter = item.term[0].toUpperCase();
-                if (!sections[firstLetter]) {
-                    sections[firstLetter] = [];
-                }
-                sections[firstLetter].push(item);
-            });
-            
-            Object.keys(sections).sort().forEach(letter => {
-                const sectionElement = document.createElement('div');
-                sectionElement.className = 'glossary-section';
-                sectionElement.innerHTML = `<div class="section-header">${letter}</div>`;
-                
-                sections[letter].forEach(item => {
-                    const itemElement = document.createElement('div');
-                    itemElement.className = 'glossary-item';
-                    itemElement.innerHTML = `
-                        <div><span class="term">${item.term}:</span> ${item.definition}</div>
-                        <button class="delete-button" onclick="deleteEntry(${item.id})">Delete</button>
-                    `;
-                    sectionElement.appendChild(itemElement);
-                });
-                
-                glossaryList.appendChild(sectionElement);
-            });
-        }
+        // ... keep rest of your existing code but replace 'supabase' with 'supabaseClient' ...
 
         async function deleteEntry(id) {
             if (confirm("Are you sure you want to delete this entry?")) {
                 try {
-                    const { error } = await supabase
+                    const { error } = await supabaseClient
                         .from('glossary_entries')
                         .delete()
                         .eq('id', id);
                     
                     if (error) throw error;
-                    await loadGlossary(); // Reload the list
+                    await loadGlossary();
                 } catch (error) {
                     console.error('Error deleting term:', error);
                 }
