Skip to content

Commit

Permalink
Update Glossary.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@soberbichler
soberbichler authored Oct 25, 2024
1 parent 5fbe0d3 commit 6746de6
Showing 1 changed file with 118 additions and 57 deletions.
175 changes: 118 additions & 57 deletions Glossary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,84 +4,145 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glossary</title>
<!-- Add Supabase JS library FIRST -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
/* ... keep your existing styles ... */
</style>
</head>
<body>
<!-- ... keep your existing HTML ... -->
<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>

<script>
// Create the Supabase client BEFORE any other code
const { createClient } = supabase;
const supabaseClient = createClient(
'https://itpqpqtvtpdyraookiqf.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w'
);
// Wait for the DOM to be fully loaded before running any code
document.addEventListener('DOMContentLoaded', function() {
// Initialize Supabase
const { createClient } = supabase;
const supabaseClient = createClient(
'https://itpqpqtvtpdyraookiqf.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w'
);

const glossaryForm = document.getElementById('glossaryForm');
const glossaryList = document.getElementById('glossaryList');
const searchInput = document.getElementById('searchInput');
let glossary = [];
const glossaryForm = document.getElementById('glossaryForm');
const glossaryList = document.getElementById('glossaryList');
const searchInput = document.getElementById('searchInput');
let glossary = [];

async function loadGlossary() {
try {
const { data, error } = await supabaseClient
.from('glossary_entries')
.select('*')
.order('term');

if (error) throw error;
glossary = data || [];
updateGlossaryDisplay();
} catch (error) {
console.error('Error loading glossary:', error);
}
}

glossaryForm.addEventListener('submit', async function(event) {
event.preventDefault();
const term = document.getElementById('term').value;
const definition = document.getElementById('definition').value;

try {
const { error } = await supabaseClient
.from('glossary_entries')
.insert([{
term: term.trim(),
definition: definition.trim()
}]);

if (error) throw error;
glossaryForm.reset();
await loadGlossary();
} catch (error) {
console.error('Error adding term:', error);
async function loadGlossary() {
try {
const { data, error } = await supabaseClient
.from('glossary_entries')
.select('*')
.order('term');

if (error) throw error;
glossary = data || [];
updateGlossaryDisplay();
} catch (error) {
console.error('Error loading glossary:', error);
}
}
});

// ... 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?")) {
glossaryForm.addEventListener('submit', async function(event) {
event.preventDefault();
const term = document.getElementById('term').value;
const definition = document.getElementById('definition').value;

try {
const { error } = await supabaseClient
.from('glossary_entries')
.delete()
.eq('id', id);

.insert([{
term: term.trim(),
definition: definition.trim()
}]);

if (error) throw error;
glossaryForm.reset();
await loadGlossary();
} catch (error) {
console.error('Error deleting term:', error);
console.error('Error adding term:', error);
}
});

searchInput.addEventListener('input', function() {
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);
});
}

async function deleteEntry(id) {
if (confirm("Are you sure you want to delete this entry?")) {
try {
const { error } = await supabaseClient
.from('glossary_entries')
.delete()
.eq('id', id);

if (error) throw error;
await loadGlossary();
} catch (error) {
console.error('Error deleting term:', error);
}
}
}
}

// Initial load
loadGlossary();
// Initial load
loadGlossary();
});
</script>
</body>
</html>

0 comments on commit 6746de6

Please sign in to comment.