barta-india.in/src/pages/multi-lang.astro

158 lines
8.6 KiB
Plaintext

---
import Layout from "../layouts/Layout.astro";
import ImageUpload from "../components/ImageUpload.vue";
---
<Layout title="Add News | Barta India">
<main>
<div>
<section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
<h1 class="text-center text-2xl underline decoration-4 decoration-[#580a0a]">Genarate New News</h1>
<form id="newsPara" class="flex flex-col space-y-4" enctype="multipart/form-data">
<!-- <label for="language">Language<span class="text-[#580a0a] font-bold">*</span></label>
<select required onchange="qryWithLang();" name="language" id="language" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
<option value="0">-Select-</option>
<option value="english">English</option>
<option value="bengali">Bengali</option>
</select> -->
<div class="flex flex-col">
<label for="category">Category<span class="text-[#580a0a] font-bold">*</span></label>
<select name="category" id="category" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
<option value="0">-Select-</option>
<option value="national">National</option>
<option value="politics">Politics</option>
<option value="local">Local</option>
<option value="technology">Technology</option>
<option value="world">World</option>
</select>
</div>
<div class="flex flex-col ">
<label for="preText">News Paragraph</label>
<textarea required name="preText" id="preText" cols="30" maxlength="1000000" rows="10" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">white tiger</textarea>
</div>
<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>
<button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
</div>
<!-- <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>
</div>
</main>
</Layout>
<script is:inline>
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`;
// give me long description below 2000 characters, title, heading not more than 160 characters, short desciption not more than 280 characters, meta_title not more than 60 characters and try to use common words, meta_description not more than 160 characters and try to use common words, all text are convert to ${langValue} language, give me all in a json structure`
// provide meta_title within 60 characters, meta_description within 160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
// need title, heading not more than 160 characters, meta_title not more than 60 characters, meta_description not more than 160 characters, short_description not more than 280 characters, long_description below 2000 characters, all are ${langValue} language all in a json structure
// provide meta_title within 60 characters, meta_description within 160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
// provide meta_title within 60 characters, meta_description within 160 characters, short_description within 280 characters in English, bengali, hindi, Mandarin, Spanish, Portuguese, Russian, French, all in a json structure
}
function submitNewsPara(event) {
event.preventDefault();
let genButton = document.getElementById('genButton');
let langInput = document.getElementById('language');
let loadSection = document.getElementById('loadingSection');
let newsData = document.getElementById('newsPara');
let formData = new FormData(newsData);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/multi-lang/`, {
method: 'POST',
body: formData,
})
.then(data => data.json())
.then(data => {
// if (data === 200) {
// counter++;
// } else {
// formSection genButton brightness-50
console.log(data)
// }
let newsData = data.choices[0].message.content;
let jsonObject = JSON.parse(newsData);
// Sample array
// Using forEach to log each element
// jsonObject.forEach(function(arrayData) {
// console.log('Array Data', arrayData);
// });
// console.log(jsonObject.en)
// console.log(jsonObject.bn)
// document.getElementById('title').value = jsonObject.title;
// document.getElementById('slug').value = jsonObject.title;
// document.getElementById('heading').value = jsonObject.heading;
// document.getElementById('meta_title').value = jsonObject.meta_title;
// document.getElementById('meta_description').value = jsonObject.meta_description;
// document.getElementById('in_brief').value = jsonObject.short_description;
// document.getElementById('content').value = jsonObject.long_description;
})
.catch(error => {
console.error('Error occurred', error);
});
}
function slugify(text) {
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w-]+/g, '') // Remove all non-word characters
.replace(/--+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
function updateSlug() {
const titleInput = document.getElementById('slug');
const slugInput = document.getElementById('slug');
const titleValue = titleInput.value;
slugInput.value = slugify(titleValue);
}
function callApi(event) {
event.preventDefault();
let slugValue = document.getElementById('slug').value;
let newsData = document.getElementById('newsForm');
let formData = new FormData(newsData);
fetch(`https://apisp.dev2.cicdhosting.com/news/add-news/?action=save`, {
method: 'POST',
body: formData,
})
.then(data => data.json())
.then(data => {
if (data.success === true) {
window.location.href= `/add-file?slug=${slugValue}`
// console.log(slugValue)
console.log('Form Data Submitted Successfully');
} else {
console.log('Data Submit Failed');
}
console.log(data);
})
.catch(error => {
console.error('Error occurred', error);
});
}
</script>
<style>
#loadingSection{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.load-aimate{
width: 60px;
height: 60px;
border-radius: 50%;
border-left: 5px solid #580a0a;
border-right: 5px solid #580a0a;
border-bottom: 5px solid #580a0a;
border-top: 5px solid #FFFFFF;
background-color: #FFFFFF;
}
</style>