From c06befa3436b09fc47f7ccf419ef7ced7d528bd8 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Fri, 16 Feb 2024 08:42:16 +0000
Subject: [PATCH] add dyanamic category pages

---
 src/components/ENCategory.vue        | 130 +++++++++++++++++++++++++++
 src/components/Modal.vue             |  50 +++++++++++
 src/pages/editor/add-file-list.astro |   3 +
 src/pages/editor/add-file.astro      |   6 +-
 src/pages/en/[id].astro              |  14 +--
 src/pages/en/cat/index.astro         |  21 +++++
 src/pages/en/file.astro              |   7 --
 src/pages/en/index.astro             |  11 ++-
 8 files changed, 225 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ENCategory.vue
 create mode 100644 src/components/Modal.vue
 create mode 100644 src/pages/en/cat/index.astro
 delete mode 100644 src/pages/en/file.astro

diff --git a/src/components/ENCategory.vue b/src/components/ENCategory.vue
new file mode 100644
index 0000000..9897cd9
--- /dev/null
+++ b/src/components/ENCategory.vue
@@ -0,0 +1,130 @@
+<template>
+    <div>
+      <section class="container mx-auto px-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
+            <div class="flex flex-col">
+              <div>
+                <a class="flex flex-col" :href="`/en/${item.slug}`">
+                  <img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
+                  <h2 class="text-lg text-justify">{{ item.title }}</h2>
+                </a>
+              </div>
+              <div>
+                <!-- Overlay -->
+                <div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50" @click="closeDialog(item)"></div>
+                <dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
+                  <form method="dialog">
+                    <div class="flex flex-col md:flex-col">
+                      <a :href="`/en/${item.slug}`" class="flex flex-col md:flex-col">
+                        <img class="rounded-t-xl" :src="item.img" :alt="item.title" />
+                        <h1 class="text-lg font-bold">{{ item.heading }}</h1>
+                        <h2 class="text-justify">{{ item.in_brief }}</h2>
+                      </a>
+                      <div class="flex flex-row place-content-between place-items-center">
+                        <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+                          <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+                          <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/en/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
+                          <a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/${item.slug}&text=${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                          <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+                        </div>
+                        <div class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+                          <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" @click="closeDialog(item)">&#10008;</button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </dialog>
+              </div>
+            </div>
+            <div class="flex flex-row place-content-between">
+              <button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+              <a :href="`/en/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        items: [],
+      };
+    },
+    methods: {
+      openDialog(item) {
+        item.dialogOpen = true;
+    
+        window.addEventListener('keydown', this.handleKeyDown);
+      },
+      closeDialog(item) {
+        item.dialogOpen = false;
+    
+        window.removeEventListener('keydown', this.handleKeyDown);
+      },
+      handleKeyDown(event) {
+        if (event.key === 'Escape') {
+        
+          this.items.forEach(item => {
+            item.dialogOpen = false;
+          });
+        
+          window.removeEventListener('keydown', this.handleKeyDown);
+        }
+      },
+      getData() {
+        let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
+        // console.log(fullURL);
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-en/?cat=${fullURL}`)
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return response.json();
+          })
+          .then(data => {
+            console.log(data);
+            this.items = data;
+
+            this.items.forEach(item => {
+              item.dialogOpen = false;
+            });
+          })
+          .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+          });
+      },
+    },
+    mounted() {
+      this.getData();
+    }
+  };
+  </script>
+<style scoped>
+.dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white; /* Adjust as needed */
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Additional styles for the overlay (optional) */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  z-index: 999; /* Ensure the overlay is above other content */
+}
+</style>
+
+  
\ No newline at end of file
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..93f131e
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="modal-mask" v-if="show" @click="closeModal">
+    <div class="modal-container" @click.stop>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false
+    };
+  },
+  created() {
+    this.$parent.$on('open-modal', this.openModal);
+  },
+  methods: {
+    openModal(itemId) {
+      // Logic to show modal, optionally filter by itemId if needed
+      this.show = true;
+    },
+    closeModal() {
+      this.show = false;
+    }
+  }
+};
+</script>
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-container {
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/src/pages/editor/add-file-list.astro b/src/pages/editor/add-file-list.astro
index e8265f5..eeaca16 100644
--- a/src/pages/editor/add-file-list.astro
+++ b/src/pages/editor/add-file-list.astro
@@ -107,3 +107,6 @@ import AdminHeader from "../../components/AdminHeader.astro";
         })
     }
 </script>
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/editor/add-file.astro b/src/pages/editor/add-file.astro
index eb995d8..4eda7b6 100644
--- a/src/pages/editor/add-file.astro
+++ b/src/pages/editor/add-file.astro
@@ -9,6 +9,7 @@ import AdminHeader from "../../components/AdminHeader.astro";
             <!-- <AddFile client:visible /> -->
             <section class="container mx-auto px-4 max-w-2xl shadow-2xl rounded-2xl mt-16">
                 <h3 class="text-2xl py-4">Add File</h3>
+                <p id="uploadConfirm" class="text-green-500 font-bold py-2" style="display: none;">Image Uploaded successfully</p>
                 <form id="imageChoose" class="flex flex-col">
                     <p class="text-red-500" style="display: none;" id="errorMessage"></p>
                     <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
@@ -97,7 +98,10 @@ import AdminHeader from "../../components/AdminHeader.astro";
         })
         .then(response => response.json()) // Convert response to text
         .then(data => {
-            console.log(data); 
+            console.log(data);
+            if(data.success === true){
+                document.getElementById('uploadConfirm').style.display = 'block';
+            }
         })  
         .catch(error => {
             console.error('Error occurred:', error);
diff --git a/src/pages/en/[id].astro b/src/pages/en/[id].astro
index e5d8839..2bfffed 100644
--- a/src/pages/en/[id].astro
+++ b/src/pages/en/[id].astro
@@ -27,13 +27,13 @@ const items  = data[idx];
             tiwtterImage={items.img}
             tiwtterTitle={items.meta_title}
             tiwtterDesc={items.meta_description}
-            tiwtterURL=`https://barta-india.in/bn/${items.slug}`
+            tiwtterURL=`https://barta-india.in/en/${items.slug}`
             artPubTime={items.date_created}
-            ogSiteName=`https://barta-india.in/bn/${items.slug}`
+            ogSiteName=`https://barta-india.in/en/${items.slug}`
             ogType='News'
             ogTitle={items.meta_title}
             ogDesc={items.meta_description}
-            ogURL=`https://barta-india.in/bn/${items.slug}`>
+            ogURL=`https://barta-india.in/en/${items.slug}`>
     <main>
         <section class="container mx-auto px-4 mt-16">
           <div class="flex flex-col justify-center">
@@ -46,10 +46,10 @@ const items  = data[idx];
               <div class="flex flex-row justify-center md:justify-end mt-2">
                 <div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
                   <p class="text-xl font-bold text-[#780a0a]">Share on: </p>
-                  <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
-                  <a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
-                  <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/${items.slug}&text=%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
-                  <a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/bn/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+                  <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/en/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+                  <a href=`https://www.facebook.com/share.php?u=https://barta-india.in/en/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
+                  <a href=`http://www.twitter.com/share?url=https://barta-india.in/en/${items.slug}&text=%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                  <a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/en/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
                 </div>
               </div>
               <p class="text-justify  mt-4">{items.content}</p>
diff --git a/src/pages/en/cat/index.astro b/src/pages/en/cat/index.astro
new file mode 100644
index 0000000..95ee13b
--- /dev/null
+++ b/src/pages/en/cat/index.astro
@@ -0,0 +1,21 @@
+---
+import Layout from "../../../layouts/Layout.astro"
+import ENCategory from "../../../components/ENCategory.vue";
+const postData = { key1: 'value1', key2: 'value2'};
+const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
+const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
+const data = await response.json();
+const news = data;
+// console.log(news);
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="container mx-auto px-4">
+                <h1 class="text-[#780a0a] py-6">Page > Name </h1>
+                <ENCategory client:visible />
+                
+            </section>
+        </div>
+    </main>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/en/file.astro b/src/pages/en/file.astro
deleted file mode 100644
index 03e93fb..0000000
--- a/src/pages/en/file.astro
+++ /dev/null
@@ -1,7 +0,0 @@
-<main>
-    <div>
-        <section>sqjns
-            <img src="https://cdn33.siliconpin.com/files/siliconid0/gtfdo20u6v_" alt="">
-        </section>
-    </div>
-</main>
\ No newline at end of file
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 4b06413..5ca8383 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -5,7 +5,7 @@ const options = { method: 'POST', headers: { 'Content-Type': 'application/json',
 const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
 const data = await response.json();
 const news = data;
-console.log(news);
+// console.log(news);
 ---
 <Layout title="">
     <main>
@@ -14,6 +14,13 @@ console.log(news);
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
+			<div class="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
+				<a href="/en/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
+				<a href="/en/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
+				<a href="/en/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
+				<a href="/en/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
+				<a href="/en/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
+			</div>
 			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
 				{news.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
 					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
@@ -36,7 +43,7 @@ console.log(news);
 											<div class="flex flex-row place-content-between place-items-center">
 												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
 													<a class="hover:-translate-y-2 duration-[1s]" href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
-													<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+													<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/share.php?u=https://barta-india.in/en/${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
 													<a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
 													<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
 												</div>