<style> form textarea.textarea-design { resize: none; width: 100%; height: 300px; } form textarea.textarea-single { resize: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Works with overflow: hidden */ min-height: 0; /* Ensures the element can be constrained to a single line's height */ } form div#image_attachments img { width: 95%; display: inline-block; } div.hide { display: none; } </style> <div id='all_categories' style='max-height: 300px; overflow-y: scroll;' class='ui segment'><h2 class='ui segment inverted'>All Categories (select to edit)</h2> </div> <form id='thread_form' action='javascript:submitForm();'> <input id='form_title' style=' clear: both; font-weight: 550; font-size: 1.5rem; color: white; border: 1px solid rgba(255,255,255,0.3); padding: 10px; ' class='title-input' required type='text' placeholder='Title'/> <textarea id='form_desc' class='ui segment textarea-design' required placeholder='Description'></textarea> <h2>Banner (Optional)</h2> <div id="image_attachments"><img id="the_img"/></div> <button id="uploaddummy" class="ui inverted yellow button" type='button'>Upload Image</button><button id="clear_attachments" class="ui disabled small inverted button red" type="button">Clear Images</button> <input id='uploadimg' style='display: none;' type='file' accept='image/jpeg, image/png'/> <br> <br> <br> <button id='submit_form' class='ui big button teal' type='submit'>Create Topic</button> <button id='reset_form' class='ui big button violet' type='button'>Reset</button> </form> <script type='module'> window.addEventListener('load', async() => { const title = document.getElementById('form_title'); const description = document.getElementById('form_desc'); const banner = document.getElementById('the_img'); const uploadBtn = document.getElementById('uploaddummy'); const submitBtn = document.getElementById('submit_form'); const clearImg = document.getElementById('clear_attachments'); const categories = document.getElementById('all_categories'); let myform = document.querySelector('form#thread_form'); let isEditing = false; let cat_id = ''; const admins = [ 'ef33a291-0a55-47e2-b56a-1fd64571b9fd' ]; let user_id = await checkIfAdmin(); if (!user_id) { myform.style = 'pointer-events: none; opacity: 0.7;'; return; } await loadCategories(); window.submitForm = async() => { await processForm(); } window.loadCategoryForEdit = async(elem) => { unSelectCategories(); elem.classList.add('red'); isEditing = true; let { data, error } = await supabase.from('sth_category').select('id, title, description, banner').eq('id', elem.id).single(); if (error) { window.alert(`${error.message}`); return; } title.value = data.title; description.value = data.description; banner.src = data.banner; if (data.banner) clearImg.classList.remove('disabled'); cat_id = data.id; submitBtn.innerText = `Edit Topic`; } // LISTENERSSSS title.addEventListener('keyup', () => { let search_query = title.value.toUpperCase(); let cat = categories.querySelectorAll('div'); cat.forEach(item => { if (item.querySelector('span').innerText.toUpperCase().indexOf(search_query) == -1) { item.classList.add('hide'); item.classList.remove('yellow'); } else if (item.querySelector('span').innerText.toUpperCase().indexOf(search_query) == 0) { item.classList.remove('yellow'); item.classList.remove('hide'); } else { item.classList.remove('hide'); item.classList.add('yellow'); } }); }); // RESET BUTTON document.getElementById('reset_form').addEventListener('click', () => { myform.reset(); banner.src = ''; clearImg.classList.add('disabled'); submitBtn.innerText = 'Create Topic'; isEditing = false; unSelectCategories(); }); await initFunctions(['ImgurJS']); ImgurJS.uploadImgUr('uploadimg', 'the_img', () => { uploadBtn.innerText = 'Uploading...'; submitBtn.style.pointerEvents = 'none'; uploadBtn.style.pointerEvents = 'none'; }, () => { submitBtn.style.pointerEvents = 'auto'; uploadBtn.style.pointerEvents = 'auto'; uploadBtn.innerText = 'Upload Image'; clearImg.classList.remove('disabled'); } ); // FUNCTIONS function unSelectCategories() { let divs = categories.querySelectorAll('div'); divs.forEach(item => { item.classList.remove('red'); }); } async function loadCategories() { await initFunctions(['supabase']); let { data, error } = await supabase.from('sth_category').select('title, banner, id'); if (error) { window.alert(`${error.message}`); return; } if (data.length > 0) { data.forEach(item => { categories.innerHTML += ` <div onclick='loadCategoryForEdit(this);' id=${item.id} class="ui tiny white message" style="cursor: pointer; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5)), url(${item.banner ? item.banner: `https://static.vecteezy.com/system/resources/thumbnails/040/944/023/small/banner-bananas-with-hard-shadows-pattern-on-yellow-background-photo.jpg`});"><span style=" background: beige; padding: 5px; border-radius: 10px; font-weight: 550; ">${item.title}</span></div>`; }); } } async function processForm() { submitBtn.innerText = 'Creating Topic...'; myform.style = 'pointer-events: none; opacity: 0.7;'; // check if there's a banner let banner_src = banner.src; let title_val = title.value; let desc_val = description.value; if (isEditing) { let edit_data = await supabase.from('sth_category') .update({ title: title_val, description: desc_val, banner: banner_src }).eq('id', cat_id); if (edit_data.error) { window.alert(`Error encountered: ${edit_data.error.message}`); return; } if (edit_data.error) { window.alert(`${post_data.error}`); submitBtn.innerText = 'Edit Topic'; myform.style = 'pointer-events: auto; opacity: 1;'; return; } window.alert('Topic has been added to the database.'); window.location.href = `https://storehaccounts.blogspot.com/`; return; } // check if the title is already exists let { data, error } = await supabase.from('sth_category').select('id').ilike('title', title_val); if (error) { window.alert(`${error.message}`); submitBtn.innerText = 'Create Topic'; myform.style = 'pointer-events: auto; opacity: 1;'; return; } if (data.length > 0) { window.alert(`The title is already given. Try other topics.`); submitBtn.innerText = 'Create Topic'; myform.style = 'pointer-events: auto; opacity: 1;'; return; } else if (data.length == 0) { // means the topic is not already given. let post_data = await supabase.from('sth_category').insert({ date: 'now()', title: title_val, description: desc_val, users_id: user_id, banner: banner_src }); if (post_data.error) { window.alert(`${post_data.error}`); submitBtn.innerText = 'Create Topic'; myform.style = 'pointer-events: auto; opacity: 1;'; return; } if (post_data.status == 200 || post_data.status == 201) { window.alert('Topic has been added to the database.'); window.location.href = `https://storehaccounts.blogspot.com/`; return; } } } async function checkIfAdmin() { await initFunctions(['supabase']); let { data, error } = await supabase.auth.getSession(); if (error) { window.alert(`${error.message}`); return; } if (!admins.includes(data.session.user.id)) { window.alert(`******************************************** The user ${data.session.user.email} is not an admin!`); return; } let user_data = await supabase.from('users').select('id').eq('email', data.session.user.email).single(); if (user_data.error) { window.alert(`Error detected: ${user_data.error.message}`); return; } if (user_data.data) { return user_data.data.id; } } uploadBtn.addEventListener('click', () => { document.getElementById('uploadimg').click(); }); clearImg.addEventListener('click', () => { banner.src = ''; clearImg.classList.add('disabled'); }); }, false); </script>