From 08003d085b7a0323804d4df8cb817540e40d9c4c Mon Sep 17 00:00:00 2001 From: puni9869 Date: Fri, 8 Nov 2024 18:54:46 +0530 Subject: [PATCH] feat: added tags of color in add url --- frontend/common/index.js | 15 ++-- frontend/css/style.css | 33 ++++++++ frontend/home/index.js | 148 ++++++++++++++++++--------------- server/home/home.go | 12 ++- templates/widget/add_link.tmpl | 42 +++++++++- 5 files changed, 168 insertions(+), 82 deletions(-) diff --git a/frontend/common/index.js b/frontend/common/index.js index 343504e..de37555 100644 --- a/frontend/common/index.js +++ b/frontend/common/index.js @@ -1,11 +1,14 @@ export function RedirectToLogin() { - window.location = '/logout'; + window.location = '/logout'; } -export function CloseModal(modalId, toClose) { - const m = document.querySelector(modalId); - m.addEventListener('click', () => { - toClose.classList.toggle('hidden'); - }); +export function RefreshPage(path = '') { + window.location = path; +} +export function CloseModal(modalId, toClose) { + const m = document.querySelector(modalId); + m.addEventListener('click', () => { + toClose.classList.toggle('hidden'); + }); } diff --git a/frontend/css/style.css b/frontend/css/style.css index 24e2a9a..e46bbc8 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -52,3 +52,36 @@ body { .dropdown:hover .dropdown-content { display: flex; } + +.colors ul { + list-style: none; + padding: 0; + margin: 0; +} + +.colors li { + margin: 0 10px 0 0; + display: inline-block; +} + +.colors label { + cursor: pointer; +} + +.colors input { + display: none; +} + +.colors input[type="radio"]:checked + .swatch { + box-shadow: inset 0 0 0 3px azure; +} + +.swatch { + display: inline-block; + vertical-align: middle; + border-radius: 50%; + height: 20px; + width: 20px; + margin: 0 3px 0 0; + border: 1px solid #2f2424; +} diff --git a/frontend/home/index.js b/frontend/home/index.js index 2d96801..9101c52 100644 --- a/frontend/home/index.js +++ b/frontend/home/index.js @@ -1,86 +1,96 @@ -import { CloseModal } from '../common/index.js'; +import {CloseModal, RefreshPage} from '../common/index.js'; const navUrl = { - '/': 'home', - '/home': 'home', - '/archived': 'archived', - '/favourite': 'favourite', - '/setting': 'setting', - '/trash': 'trash', - '/login': 'login' + '/': 'home', + '/home': 'home', + '/archived': 'archived', + '/favourite': 'favourite', + '/setting': 'setting', + '/trash': 'trash', + '/login': 'login' }; export function NavItemSelected() { - if (!navUrl[window.location.pathname]) { - return; - } + if (!navUrl[window.location.pathname]) { + return; + } - const selector = window.location.pathname === '/' - ? document.querySelector('[data-home]') - : document.querySelector(`[data-${navUrl[window.location.pathname]}]`); - if (!selector) { - return; - } - selector.classList.add('text-indigo-500'); - selector.querySelector('svg').classList.add('text-indigo-500'); - console.info('NavBar loaded...', navUrl[window.location.pathname]); - console.info('NavBar selected item ', selector); + const selector = window.location.pathname === '/' + ? document.querySelector('[data-home]') + : document.querySelector(`[data-${navUrl[window.location.pathname]}]`); + if (!selector) { + return; + } + selector.classList.add('text-indigo-500'); + selector.querySelector('svg').classList.add('text-indigo-500'); + console.info('NavBar loaded...', navUrl[window.location.pathname]); + console.info('NavBar selected item ', selector); } export function SideNavCollapse() { - const sideNav = document.querySelector('#side-navbar'); - const sideNavOpener = document.querySelector('#nav-bar-open'); - if (!sideNav || !sideNavOpener) { - return; - } - sideNavOpener.addEventListener('click', (e) => { - sideNav.classList.toggle('hidden'); - sideNavOpener.classList.toggle('text-indigo-500'); - }); + const sideNav = document.querySelector('#side-navbar'); + const sideNavOpener = document.querySelector('#nav-bar-open'); + if (!sideNav || !sideNavOpener) { + return; + } + sideNavOpener.addEventListener('click', (e) => { + sideNav.classList.toggle('hidden'); + sideNavOpener.classList.toggle('text-indigo-500'); + }); } export function AddNewWebLinkInit() { - const link = document.querySelector('#add-weblink'); - const linkModal = document.querySelector('#add-weblink-modal'); - const saveBtn = document.querySelector('#add-link-btn'); - if (!link || !linkModal || !saveBtn) { - return; - } - link.addEventListener('click', async () => { - linkModal.classList.toggle('hidden'); - }); - saveBtn.addEventListener('click', async () => { - let url = document.querySelector('#add-weblink-input-box'); - if (!url || url?.value.trim().length === 0) { - return; - } - await AddNewLink(url?.value.trim()); - linkModal.classList.toggle('hidden'); - url.value = ''; - }); + const link = document.querySelector('#add-weblink'); + const linkModal = document.querySelector('#add-weblink-modal'); + const saveBtn = document.querySelector('#add-link-btn'); + if (!link || !linkModal || !saveBtn) { + return; + } + const tags = document.querySelectorAll("#tag"); + let selectedTag; + link.addEventListener('click', async () => { + linkModal.classList.toggle('hidden'); + if (tags.length) { + tags.forEach((tag) => { + tag.addEventListener('change', (e) => { + selectedTag = e.target.value; + }); + }); + } + }); + saveBtn.addEventListener('click', async () => { + let url = document.querySelector('#add-weblink-input-box'); + if (!url || url?.value.trim().length === 0) { + return; + } + await AddNewLink(url?.value.trim(), selectedTag ? selectedTag : 'black'); + linkModal.classList.toggle('hidden'); + url.value = ''; + }); - CloseModal('#close-modal', linkModal); + CloseModal('#close-modal', linkModal); } -async function AddNewLink(webLink) { - const url = '/new'; - try { - const headers = new Headers(); - headers.append('Content-Type', 'application/json'); +async function AddNewLink(webLink, selectedTag) { + const url = '/new'; + try { + const headers = new Headers(); + headers.append('Content-Type', 'application/json'); - const response = await fetch(url, { - method: 'POST', - headers: headers, - body: JSON.stringify({ url: webLink }) - }); - if (!response.ok) { - throw new Error(`Response status: ${response.status}`); - } - const resp = await response.json(); - if (resp?.Status === "OK") { - console.info(resp?.Message); - } - } catch (error) { - console.error(error.message); - } + const response = await fetch(url, { + method: 'POST', + headers: headers, + body: JSON.stringify({url: webLink, tag: selectedTag}) + }); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + const resp = await response.json(); + if (resp?.Status === "OK") { + console.info(resp?.Message); + RefreshPage(); + } + } catch (error) { + console.error(error.message); + } } diff --git a/server/home/home.go b/server/home/home.go index 32525c0..0e78c66 100644 --- a/server/home/home.go +++ b/server/home/home.go @@ -10,9 +10,15 @@ import ( func AddWeblink(c *gin.Context) { log := logger.NewLogger() - webLink := c.Request.PostForm.Get("url") - log.Info("Requested to add " + webLink) - c.JSON(http.StatusCreated, gin.H{"Status": "OK", "Message": "Weblink Added." + webLink}) + + var requestBody struct { + Url string `json:"url"` + Tag string `json:"tag"` + } + // Handle the error for url validation + _ = c.ShouldBindJSON(&requestBody) + log.Info("Requested to add %s in tag: %s ", requestBody.Url, requestBody.Tag) + c.JSON(http.StatusCreated, gin.H{"Status": "OK", "Message": "Weblink Added."}) } func Home(c *gin.Context) { diff --git a/templates/widget/add_link.tmpl b/templates/widget/add_link.tmpl index e220365..4e38006 100644 --- a/templates/widget/add_link.tmpl +++ b/templates/widget/add_link.tmpl @@ -19,10 +19,44 @@ - - -
- +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +