change file upload

public/img/camera.svg

@@ -0,0 +1 @@
+<svg width="70px" height="70px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M9.77778 21H14.2222C17.3433 21 18.9038 21 20.0248 20.2646C20.51 19.9462 20.9267 19.5371 21.251 19.0607C22 17.9601 22 16.4279 22 13.3636C22 10.2994 22 8.76721 21.251 7.6666C20.9267 7.19014 20.51 6.78104 20.0248 6.46268C19.3044 5.99013 18.4027 5.82123 17.022 5.76086C16.3631 5.76086 15.7959 5.27068 15.6667 4.63636C15.4728 3.68489 14.6219 3 13.6337 3H10.3663C9.37805 3 8.52715 3.68489 8.33333 4.63636C8.20412 5.27068 7.63685 5.76086 6.978 5.76086C5.59733 5.82123 4.69555 5.99013 3.97524 6.46268C3.48995 6.78104 3.07328 7.19014 2.74902 7.6666C2 8.76721 2 10.2994 2 13.3636C2 16.4279 2 17.9601 2.74902 19.0607C3.07328 19.5371 3.48995 19.9462 3.97524 20.2646C5.09624 21 6.65675 21 9.77778 21ZM16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13ZM18 9.25C17.5858 9.25 17.25 9.58579 17.25 10C17.25 10.4142 17.5858 10.75 18 10.75H19C19.4142 10.75 19.75 10.4142 19.75 10C19.75 9.58579 19.4142 9.25 19 9.25H18Z" fill="#780a0a"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13ZM12.75 11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V12.25H10C9.58579 12.25 9.25 12.5858 9.25 13C9.25 13.4142 9.58579 13.75 10 13.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15V13.75H14C14.4142 13.75 14.75 13.4142 14.75 13C14.75 12.5858 14.4142 12.25 14 12.25H12.75V11Z" fill="#780a0a"></path> <path d="M18 9.25C17.5858 9.25 17.25 9.58579 17.25 10C17.25 10.4142 17.5858 10.75 18 10.75H19C19.4142 10.75 19.75 10.4142 19.75 10C19.75 9.58579 19.4142 9.25 19 9.25H18Z" fill="#780a0a"></path> </g></svg>

src/components/AdminHeader.astro

@@ -0,0 +1,17 @@
+<main>
+    <div>
+        <section class="bg-[#780A0A]">
+            <div class="container mx-auto px-4 text-white ">
+                <div class="flex flex-row ">
+                    <a class="p-4" href="/editor/add-news">Add News</a>
+                    <a class="p-4" href="/editor/edit-news">Edit News</a>
+                </div>
+                <!-- <a href="/editor/add-news">Add News</a>
+                <a href="/editor/add-news">Add News</a> -->
+            </div>
+        </section>
+    </div>
+</main>
+<style>
+
+</style>

src/components/EditNews.vue

@@ -76,6 +76,11 @@
             </div>
         </form>
       </section>
+
+      <section>
+        <div></div>
+      </section>
+
     </div>
 </template>
   

src/components/GetData.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <section class="container mx-auto px-4">
+            <label for="langValue">Read Also:</label>
+            <select v-on:change="dataCall()" v-model="langValue" name="langValue" id="langValue">
+                <option value="en">English</option>
+                <option value="bn">Bengali</option>
+                <option value="hi">Hindi</option>
+                <option value="zh">Mandarin</option>
+                <option value="es">Espanish</option>
+            </select>
+            <div v-for="items in items" :key="items.id">
+                <p>{{ items.title }}</p>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+    export default {
+        data(){
+            return{
+                data: "",
+                items: "",
+                langValue: 'en'
+            }
+        },
+    methods: {
+        dataCall(){
+            // let fullURL = window.location.href;
+            // console.log(fullURL)
+            console.log(langValue)
+            fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_${this.langValue}`)
+            .then(data => data.json())
+            .then(data => {
+                console.log(data)
+                this.items = data;
+            })
+            .catch(error => {
+                console.error(error)
+            })
+        }
+        // getData() {
+        //     fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/')
+        //     .then(response => {
+        //     if (!response.ok) {
+        //         throw new Error('Network response was not ok');
+        //     }
+        //     return response.json();
+        //     })
+        //     .then(data => {
+        //     // Handle the JSON response data
+        //     console.log(data);
+        //     })
+        //     .catch(error => {
+        //     // Handle any errors that occurred during the fetch
+        //     console.error('Fetch error:', error);
+        //     });
+        // }
+    },
+    mounted() {
+        this.dataCall(); // Call the getData function when the component is mounted
+    }
+    };
+</script>

src/pages/editor/add-file.astro

@@ -4,24 +4,33 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="Upload File | Barta-India">
     <main>
         <div class="container mx-auto px-4 flex flex-col space-y-4">
+            <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
+                Select image to upload:
+                <input type="file" name="fileToUploadToSpApi" id="fileToUpload">
+                <input type="submit" value="Upload Image" name="submit">
+            </form>
             <h1>Upload File</h1>
-            <form id="formID">
+            <!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
+                <input type="file" name="file" id="file" /> <br>
+                <input type="submit" value="Upload">
+            </form> -->
+            <!-- <form id="formID">
                 <p class="text-red-500" style="display: none;" id="errorMessage"></p>
                 <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
                 <label for="file">Choose a file:</label>
                 <input type="file" name="file" id="file" required>
                 <br>
                 <input onclick="saveFile(event);" type="submit" value="Upload">
-            </form>
+            </form> -->
         </div>
     </main>
 </Layout>
-<script is:inline>
+<!-- <script is:inline>
     function saveFile(event){
         event.preventDefault();
         let formID = document.getElementById('formID');
         let formData = new FormData(formID);
-        fetch(`https://apisp.dev2.cicdhosting.com/file_upload/v2/`,{
+        fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
             method: 'POST',
             body: formData,
         })
@@ -44,4 +53,4 @@ import Layout from "../../layouts/Layout.astro";
             console.error(error);
         })
     }
-</script>
+</script> -->

src/pages/editor/add-news.astro

@@ -1,9 +1,11 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import ImageUpload from "../../components/ImageUpload.vue";
+import AdminHeader from "../../components/AdminHeader.astro";
 ---
 
 <Layout title="Add News | Barta India">
+    <AdminHeader />
     <main>
         <div>
             <section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
@@ -34,8 +36,13 @@ import ImageUpload from "../../components/ImageUpload.vue";
                     <div class="flex flex-col">
                         <textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
                     </div>
-                    <div class="flex flex-col">
+                    <div class="flex flex-col" id="imgDIV">
-                        <input type="file" name="file" id="file ">
+                        <!-- <img class="w-[100px]" id="imgview" src="" alt="" style="display: none;"/>
+                        <label for="file" class="cursor-pointer"><img src="/img/camera.svg" alt="add file | Barta-India"></label> -->
+                        <input oninput="saveFile(event);" type="file" name="file" id="file" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">
+                        <input style="display: none;" value="" type="text" name="img" id="img" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" />
+                    </div>
+                    <div>
                     </div>
                     <div>
                         <button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
@@ -43,6 +50,7 @@ import ImageUpload from "../../components/ImageUpload.vue";
                     <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
                 </form>
             </section>
+            <!-- border-2 border-[#780a0a] rounded-xl -->
             <section class="bg-white rounded-full px-6 py-4" id="loadingSection" style="display: none;">
                 <div class="flex flex-col justify-center place-items-center">
                     <div class="load-aimate animate-spin "></div>
@@ -54,6 +62,43 @@ import ImageUpload from "../../components/ImageUpload.vue";
 </Layout>
 
 <script is:inline>
+    function saveFile(event){
+        event.preventDefault();
+        let formID = document.getElementById('newsPara');
+        let file = document.getElementById('file').file;
+        let formData = new FormData;
+        formData.append('file', file);
+        fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            if(data.error_code == 8050){
+                document.getElementById('errorMessage').innerHTML = data.error;
+                document.getElementById('errorMessage').style.display = 'block';
+                document.getElementById('errorMessage2').style.display = 'none';
+            }
+            if(data.error_code == 8051){
+                document.getElementById('errorMessage2').innerHTML = data.error;
+                document.getElementById('errorMessage2').style.display = 'block';
+                document.getElementById('errorMessage').style.display = 'none';
+            }
+            document.getElementById('img').value = data.file_url;
+            if(data.file_url){
+                document.getElementById('img').style.display = 'block';
+                document.getElementById('file').style.display = 'none';
+
+            }else{
+                document.getElementById('img').style.display = 'none';
+                document.getElementById('file').style.display = 'block';
+            }
+            console.log(data)
+        })
+        .catch(error => {
+            console.error(error);
+        })
+    }
     function qryWithLang(){
         let langValue = document.getElementById('language').value;
         document.getElementById('systemMessage').value = `provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh,  es,  pt, ru, fr, ur, ar all in a json structure no use comma after line ending`;
@@ -146,6 +191,20 @@ import ImageUpload from "../../components/ImageUpload.vue";
             console.error('Error occurred', error);
         });
     }
+    // function imagePreview() {
+    //     let fileInput = document.getElementById('file');
+    //     let file = fileInput.files[0];
+    //     let imgView = document.getElementById('imgview');
+    //     if (file) {
+    //         document.getElementById('imgview').style.display = 'block';
+    //         let imgUrl = URL.createObjectURL(file);
+    //         imgView.src = imgUrl;
+    //         document.getElementById('imgDIV').classList.add('border-2', 'border-[#780a0a]', 'rounded-xl');
+    //     } else {
+    //         imgView.src = "";
+    //     }
+    // }
+
 </script>
 <style>
     #loadingSection{

src/pages/editor/edit-news.astro

@@ -1,19 +1,21 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import AdminHeader from "../../components/AdminHeader.astro";
 ---
 <Layout title="Edit News | Barta-India">
+    <AdminHeader />
     <main>
         <div>
             <section class="container mx-auto px-4">
                 <div class="flex flex-col">
                     <p class="text-2xl">Edit News</p>
-                    <select name="lang" id="lang">Select Language
+                    <!-- <select name="lang" id="lang">Select Language
                         <option value="en">English</option>
                         <option value="bn">Bengali</option>
                         <option value="hi">Hindi</option>
                         <option value="zh">Mandarine</option>
                         <option value="se">Spanish</option>
-                    </select>
+                    </select> -->
                     <table class="border-2">
                         <thead>
                             <tr class="text-center">
@@ -44,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
                 let cellEdit = row.insertCell(2);
                 let editButton = document.createElement('a');
                 editButton.innerText = 'Edit';
-                editButton.href = `/editor/?edit=${singleData.slug}&lang=${document.getElementById('lang').value}`
+                editButton.href = `/editor/?edit=${singleData.slug}&lang=en`
                 editButton.addEventListener('click', function() {
                     // Add your edit functionality here
                     // console.log('Editing ID:', singleData.id);

src/pages/editor/index.astro

@@ -1,8 +1,10 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import EditNews from "../../components/EditNews.vue";
+import AdminHeader from "../../components/AdminHeader.astro";
 ---
 <Layout title="Edit News | Barta-India">
+    <AdminHeader />
     <main>
         <div>
             <EditNews client:visible />

src/pages/en/index.astro

@@ -0,0 +1,25 @@
+---
+import Layout from "../../layouts/Layout.astro";
+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>
+            <p>News English</p>
+            <!-- <img src="https:\/\/cdn33.siliconpin.com\/files\/siliconid0\/gtdk3ixrvs_Screenshot-from-2024-02-07-12-42-53.png" alt=""> -->
+            <div class="">
+                {data.map((items: {id: string | undefined; title: string | undefined;}) =>
+                    <div>
+                        <p>{items.id}</p>
+                        <p>{items.title}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    </main>
+</Layout>

src/pages/news.astro

@@ -0,0 +1,49 @@
+---
+import Layout from "../layouts/Layout.astro";
+import GetData from "../components/GetData.vue"
+const fetchData = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/');
+const dataJSON = await fetchData.json();
+const data = dataJSON.data;
+console.log(data);
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="container mx-auto px-4">
+                <GetData client:visible />
+                <p>News List</p>
+                <div>
+                    <button onclick="getData();">Get Data</button>
+                    <p id="dataID"></p>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    function getData(){
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en`)
+        .then(data => data.json())
+        .then(data => {
+            console.log(data)
+        })
+        .catch(error => {
+            console.error("an error occoured", error)
+        })
+        // fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en')
+        //     .then(response => {
+        //         if (!response.ok) {
+        //         throw new Error('Network response was not ok');
+        //         }
+        //         return response.json();
+        //     })
+        //     .then(data => {
+        //         // Handle the JSON response data
+        //         console.log(data);
+        //     })
+        //     .catch(error => {
+        //         // Handle any errors that occurred during the fetch
+        //         console.error('Fetch error:', error);
+        //     });
+    }
+</script>