feat: adding addWebLink to dashboard functionality.

frontend/app.js

@@ -1,10 +1,11 @@
-import {NavItemSelected, SideNavCollapse} from './home/index.js';
-import {DeleteAccountModelInit, DisableMyAccountInit} from './setting/index.js';
+import { NavItemSelected, SideNavCollapse, AddNewWebLinkInit } from './home/index.js';
+import { DeleteAccountModelInit, DisableMyAccountInit } from './setting/index.js';
 
 document.addEventListener('DOMContentLoaded', function () {
-    NavItemSelected();
-    SideNavCollapse();
-    DeleteAccountModelInit();
-    DisableMyAccountInit();
-    console.log('App is loaded');
+  NavItemSelected();
+  SideNavCollapse();
+  DeleteAccountModelInit();
+  DisableMyAccountInit();
+  AddNewWebLinkInit();
+  console.info('App is loaded');
 }, false);

frontend/common/index.js

@@ -1,3 +1,11 @@
 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');
+  });
+
 }

frontend/home/index.js

@@ -1,3 +1,5 @@
+import { CloseModal } from '../common/index.js';
+
 const navUrl = {
   '/': 'home',
   '/home': 'home',
@@ -21,8 +23,8 @@ export function NavItemSelected() {
   }
   selector.classList.add('text-indigo-500');
   selector.querySelector('svg').classList.add('text-indigo-500');
-  console.log('NavBar loaded...', navUrl[window.location.pathname]);
-  console.log('NavBar selected item ', selector);
+  console.info('NavBar loaded...', navUrl[window.location.pathname]);
+  console.info('NavBar selected item ', selector);
 }
 
 export function SideNavCollapse() {
@@ -36,3 +38,49 @@ export function SideNavCollapse() {
     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 = '';
+  });
+
+  CloseModal('#close-modal', linkModal);
+}
+
+async function AddNewLink(webLink) {
+  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);
+  }
+}

frontend/setting/index.js

@@ -1,40 +1,40 @@
-import {RedirectToLogin} from '../common/index.js';
+import { RedirectToLogin } from '../common/index.js';
 
 export function DeleteAccountModelInit() {
-    const deleteBtn = document.querySelector('#delete-my-account');
-    if (!deleteBtn) {
-        return;
-    }
-    const deleteModal = document.querySelector('#delete-account-modal');
-    deleteBtn.addEventListener('click', (e) => {
-        deleteModal.classList.toggle('hidden');
-    });
+  const deleteBtn = document.querySelector('#delete-my-account');
+  if (!deleteBtn) {
+    return;
+  }
+  const deleteModal = document.querySelector('#delete-account-modal');
+  deleteBtn.addEventListener('click', (e) => {
+    deleteModal.classList.toggle('hidden');
+  });
 }
 
 async function DisableAccount() {
-    const url = '/setting/disablemyaccount';
-    try {
-        const response = await fetch(url, {method: 'PUT'});
-        if (!response.ok) {
-            throw new Error(`Response status: ${response.status}`);
-        }
-        return await response.json();
-    } catch (error) {
-        console.error(error.message);
+  const url = '/setting/disablemyaccount';
+  try {
+    const response = await fetch(url, { method: 'PUT' });
+    if (!response.ok) {
+      throw new Error(`Response status: ${response.status}`);
     }
+    return await response.json();
+  } catch (error) {
+    console.error(error.message);
+  }
 }
 
 export function DisableMyAccountInit() {
-    const disableBtn = document.querySelector('#disable-my-account');
-    if (!disableBtn) {
-        return;
+  const disableBtn = document.querySelector('#disable-my-account');
+  if (!disableBtn) {
+    return;
+  }
+  disableBtn.addEventListener('click', async (e) => {
+    console.info('Disable my account event');
+    const res = await DisableAccount();
+    if (res && res?.Status === 'OK') {
+      console.info('Account is disabled until you logged in back.');
+      RedirectToLogin();
     }
-    disableBtn.addEventListener('click', async (e) => {
-        console.log('Disable my account event');
-        const res = await DisableAccount();
-        if (res && res['Status'] === 'OK') {
-            console.log('Account is disabled until you logged in back.');
-            RedirectToLogin();
-        }
-    });
+  });
 }

server/home/home.go

@@ -8,6 +8,13 @@ import (
 	"github.com/puni9869/pinmyblogs/pkg/logger"
 )
 
+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})
+}
+
 func Home(c *gin.Context) {
 	c.HTML(http.StatusOK, "home.tmpl", nil)
 }

server/routers.go

@@ -44,6 +44,9 @@ func RegisterRoutes(r *gin.Engine, sessionStore session.Store) {
 		authRouters.GET("/favourite", home.Favourite)
 		authRouters.GET("/archived", home.Archived)
 		authRouters.GET("/trash", home.Trash)
+
+		authRouters.POST("/new", home.AddWeblink)
+
 		// setting handler
 		settingsRoute := authRouters.Group("/setting")
 		{

templates/home/home.tmpl

@@ -5,6 +5,7 @@
     <div class="flex flex-row py-3 px-2 bg-white border-l-2 border-r-2 border-gray-200">
         {{template "layout/nav_bar_opener" .}}
         {{template "widget/search" .}}
+        {{template "widget/add_link" .}}
     </div>
     {{template "home/url_container" .}}
   </main>

templates/widget/add_link.tmpl

@@ -0,0 +1,30 @@
+{{define "widget/add_link"}}
+    <div class="relative z-10 mx-right h-auto group">
+  <div class="flex items-center px-2 py-1 text-gray-700 group select-none hover:cursor-pointer hover:text-indigo-500">
+   <p id="add-weblink">Add Link</p>
+  </div>
+</div>
+<!-- Modal Background -->
+<div id="add-weblink-modal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center pt-10 hidden">
+  <!-- Modal Content -->
+  <div class="fixed bg-white w-full max-w-md mx-4 sm:mx-6 md:mx-8 lg:mx-12 p-6 sm:p-8 rounded-lg shadow-lg">
+    <!-- Close Button (Cross Icon) -->
+    <button class="absolute top-4 right-4 text-gray-500 hover:text-black-700" id="close-modal">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+
+    <h2 class="text-sm sm:text-sm font-bold mb-4">Add Link</h2>
+
+    <!-- Input Box -->
+    <input type="text" id="add-weblink-input-box" placeholder="Enter link" class="w-full p-1 border rounded mb-3 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+
+    <!-- Add Link Button -->
+    <div class="flex justify-end">
+      <button class="bg-blue-500 text-white text-sm px-4 py-2 rounded hover:bg-blue-600" id="add-link-btn">Add Link</button>
+    </div>
+  </div>
+</div>
+
+{{end}}

templates/widget/sort.tmpl

@@ -1,6 +1,6 @@
 {{define "widget/sort"}}
 <div class="dropdown">
-  <span class="flex pr-1 items-center justify-center">
+  <span class="flex pr-1 items-center justify-center z-0">
     <button class="text-gray-700 text-md select-none">Sort</button>
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 ml-1 accent-indigo-600 focus:accent-indigo-600">
       <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"  />