how to make the text in the items to float above the image in SwipeJS?

I’m trying to duplicate this effect from the SwipeJS demo page, where the text floats on the bottom part, but not outside of, the image in each slide.

I’ve tried using slide-content like I see in the devtools and I also tried using title and subtitle classes like it says in the docs (in the parallax part). but they all fails, as in showing the texts below the image, instead of over the image. what am I doing wrong? any help is appreciated.

this is my code:

      var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      });
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
      }

      .swiper-slide .card-img-text {
        translatey: (-50%);
        mix-blend-mode: exclusion;
      }

      .swiper-slide .card-img-text * {
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://picsum.photos/800"
            class="card-img-top"
            alt="example image 1"
          />
          <div class="slide-content">
            <h5>Slide 1 Title</h5>
            <p>Slide 1 Description</p>
          </div>
          <!-- <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> -->
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  </body>
</html>

Next Page is not loading and setting values in Suitelet Page

I am not able to go to the nextpage using the pageIndex field .When I click on the that it reloads into as new page with blank filter and sublist
Suitelet Script

/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/email', 'N/record', 'N/search', 'N/ui/serverWidget','N/file','N/redirect'],
    /**
 * @param{email} email
 * @param{record} record
 * @param{search} search
 * @param{serverWidget} serverWidget
 * @param{file} file
 *  @param{redirect} redirect
 */
    (email, record, search, serverWidget, file,redirect) => {
        /**
         * Defines the Suitelet script trigger point.
         * @param {Object} scriptContext
         * @param {ServerRequest} scriptContext.request - Incoming request
         * @param {ServerResponse} scriptContext.response - Suitelet response
         * @since 2015.2
         */
        function EmployeeSearch(){
            try {
               let searchObj = search.create({
                   type: search.Type.EMPLOYEE,
                   filters:  ["isinactive","any","F"],
                   columns: ['entityid','internalid']
               })
               let results = searchObj.run().getRange({
                start: 0,
                end: 1000
            });
            //    log.debug("results",results)
                return results;
               
               
            } catch (e) {
               log.error("error",e.message)
            }
           }
        function createCsvFile(request,lineCount){
            let docNo ;
            let vendor;let memo;
            let total;
            //let fileId;
            let csvContent = 'DocumentNo,Vendor,Memo,Amountn';
            for(let i=0;i<lineCount;i++){
                let select = request.getSublistValue({
                    group: "custpage_jj_porder",
                    line:i,
                    name: "custpage_jj_sub_porder_select"
                });
                log.debug("select",select);
                if(select ==='T'){
                docNo = request.getSublistValue({
                    group: "custpage_jj_porder",
                    line:i,
                    name: "custpage_jj_sub_porder_docno"
                });
                vendor  = request.getSublistValue({
                    group: "custpage_jj_porder",
                    line:i,
                    name:"custpage_jj_sub_porder_vendor"
                });
               
                memo  = request.getSublistValue({
                    group: "custpage_jj_porder",
                    line:i,
                    name: "custpage_jj_sub_porder_memo"
                });
              
               total  = request.getSublistValue({
                    group: "custpage_jj_porder",
                    line:i,
                    name: "custpage_jj_sub_porder_total"
                });
                csvContent +=docNo+','+vendor+','+memo+','+total+"n";
              
                } 
           

              
              
            }
           
            return csvContent;
        }
        function sendEmailToSupervisor(supervisor,csvFileId,supervisorName){
            email.send({
                author:-5 ,
                body: "Dear SuperVisor ,Here are the orders that are pending this month",
                recipients:supervisor,
                subject:"Pending Billed Purchase Orders",
                attachments:[file.load({
                    id: csvFileId
                })]
            })
            
            let body = "Email Sent to "+supervisorName;
            return body;
        }
        function fetchSearchResult(pagedData,pageIndex) {

        try {
            let searchPage = pagedData.fetch({
                index : pageIndex
            });
            // log.debug("")
        let results = new Array();

        searchPage.data.forEach(function (result) {
           
            results.push({
                "docno":result.getValue({name: "tranid", label: "Document Number"}),
                "vendor": result.getValue({ name: "entityid",
                    join: "vendor",
                    label: "Name"}),
                "memo":result.getValue({ name: "memo", label: "Memo"}),
                "total":result.getValue({ name: "amount", label: "Amount"})
            });
            return true;
        });
        return results;
        } catch (e) {
            log.error("Error on Fetch Search Results",e.message)
        }
        }
        const onRequest = (scriptContext) => {
        try{
               
            if(scriptContext.request.method === "GET"){
                let form = serverWidget.createForm({
                    title: "Email Report",
                });
                form.addFieldGroup({
                    id: "custpage_jj_filter",
                    label: "FIlter"
                })
                form.addFieldGroup({
                    id: "custpage_jj_page_group",
                    label: "Page Group"
                })
                form.clientScriptFileId = 3253;
                let employee = form.addField({
                    id: "custpage_jj_employee",
                    label: "Select a Employee",
                    type: serverWidget.FieldType.SELECT,
                    container: "custpage_jj_filter"
                });
                let results = EmployeeSearch();
                employee.addSelectOption({
                    value: "",
                    text: "",
                });
                for(let i =0;i<results.length;i++){
                    employee.addSelectOption({
                        value: results[i].getValue({
                            name: "internalid"
                        }),
                        text:  results[i].getValue({
                            name: "entityid"
                        })
                    })
                }
              
                form.addButton({
                    id: "custpage_jj_get_values_button",
                    label: "Get Values",
                    functionName: 'setValues'
                });
                form.addSubmitButton({
                    label: "Send Email"
                })
                let subList = form.addSublist({
                    id: "custpage_jj_porder",
                    label: "Purchase Order",
                    type: serverWidget.SublistType.LIST
                });
                subList.addField({
                    id: "custpage_jj_sub_porder_docno",
                    label: "Document No",
                    type: serverWidget.FieldType.INTEGER,
                })
                subList.addField({
                    id: "custpage_jj_sub_porder_vendor",
                    label: "Vendor",
                    type: serverWidget.FieldType.TEXT,
                  
                })
                let memo = subList.addField({
                    id: "custpage_jj_sub_porder_memo",
                    label: "Memo",
                    type: serverWidget.FieldType.TEXT,
                  
                })
                subList.addField({
                    id: "custpage_jj_sub_porder_total",
                    label: "Total Amount",
                    type: serverWidget.FieldType.CURRENCY,
                })
                subList.addField({
                    id: "custpage_jj_sub_porder_select",
                    label: "Select",
                    type: serverWidget.FieldType.CHECKBOX,
                    
                })
                let selectOptions = form.addField({
                    id : 'custpage_jj_pageid',
                    label : 'Page Index',
                    type : serverWidget.FieldType.SELECT,
                    container:"custpage_jj_page_group"
                });
                let employeeId = scriptContext.request.parameters.empId||null;
              
                employee.defaultValue = employeeId;
                // const pageSize  = 10;
                log.debug("empid",employeeId);
                if(employeeId){
                    let purchaseorderSearchObj = search.create({
                        type: "purchaseorder",
                        settings:[{"name":"consolidationtype","value":"ACCTTYPE"}],
                        filters:
                        [
                           ["type","anyof","PurchOrd"], 
                           "AND", 
                           ["mainline","is","T"], 
                           "AND", 
                           ["datecreated","within","thismonth"], 
                           "AND", 
                           ["status","anyof","PurchOrd:F"], 
                           "AND", 
                           ["createdby","anyof",employeeId]
                        ],
                        columns:
                        [
                           search.createColumn({name: "tranid", label: "Document Number"}),
                           search.createColumn({
                              name: "entityid",
                              join: "vendor",
                              label: "Name"
                           }),
                           search.createColumn({name: "memo", label: "Memo"}),
                           search.createColumn({name: "amount", label: "Amount"}),
                           search.createColumn({name: "datecreated", label: "Date Created"}),
                           search.createColumn({name: "createdby", label: "Created By"})
                        ]
                     });
                     let searchResults  = purchaseorderSearchObj.run();
                    
                     let results = purchaseorderSearchObj.run().getRange({
                        start:0,
                        end:1000
                     });
                     log.debug("resultsearch",searchResults);
                     let pageSize = 10;
                     let pagedData = purchaseorderSearchObj.runPaged({ pageSize: pageSize });
                     let searchResultCount = pagedData.count;
                    log.debug("purchaseorderSearchObj result count",searchResultCount);
                   
                    let pageId = parseInt(scriptContext.request.parameters.pageid)||0;   
                     let pageCount = Math.ceil(searchResultCount / pageSize);
                     log.debug("pageCount",pageCount);
                   
                     if (pageCount === 0) {
                        alert("No Results Found")
                      } else {
                        
                        if (pageId < 0 || pageId >= pageCount) {
                          pageId = 0;
                        }
                        else if (pageId >= pageCount)
                            pageId = pageCount - 1;

                        if (pageId != 0) {
                            form.addButton({
                                id : 'custpage_previous',
                                label : 'Previous',
                                functionName : 'getSuiteletPage(' + (pageId - 1) +')',
                                container:'custpage_jj_page_group'
                            });
                        }
            
                        if (pageId != pageCount - 1) {
                            form.addButton({
                                id : 'custpage_next',
                                label : 'Next',
                                functionName : 'getSuiteletPage(' +(pageId + 1) + ')',
                                container:'custpage_jj_page_group'
                            });
                        }
                        
                        let addResults = fetchSearchResult(pagedData, pageId);
                        log.debug("array result",addResults);
                        var j = 0;
                        addResults.forEach(function (result) {
                           subList.setSublistValue({
                               id: "custpage_jj_sub_porder_docno",
                               line: j,
                               value: result.docno
                           });
                           subList.setSublistValue({
                               id: "custpage_jj_sub_porder_vendor",
                               line: j,
                               value: result.vendor
                           });
                           subList.setSublistValue({
                               id: "custpage_jj_sub_porder_memo",
                               line: j,
                               value: result.memo
                           });
                           memo.updateDisplayType({
                               displayType : serverWidget.FieldDisplayType.ENTRY
                           });
                           subList.setSublistValue({
                               id: "custpage_jj_sub_porder_total",
                               line: j,
                               value: result.total
                           });
                           j++;
                       })
                }
                   
                     for (let i = 0; i < pageCount; i++) {
                    if (i == pageId) {
                        selectOptions.addSelectOption({
                            value : 'pageid_' + i,
                            text : ((i * pageSize) + 1) + ' - ' + ((i + 1) * pageSize),
                            isSelected:true
                        });
                        // redirect.toSuitelet({
                        //     scriptId: "customscript_jj_sl_email_sup_otp7939",
                        //     deploymentId: "customdeploy_jj_sl_email_sup_otp7939",
                        //     parameters:{
                        //         pageid : pageId
                        //     }
                        // })
                    } else {
                        selectOptions.addSelectOption({
                            value : 'pageid_' + i,
                            text : ((i * pageSize) + 1) + ' - ' + ((i + 1) * pageSize)
                        });
                    }
                    log.debug("'pageid_' "+ i)
                    }
                

             }
             scriptContext.response.writePage(form);     
    }else{
        let request = scriptContext.request;
      
        let lineCount = request.getLineCount({
            group: "custpage_jj_porder"
        });
        let csvFile;
        let body;
        let employeeId = scriptContext.request.parameters.custpage_jj_employee;
        let lookupSearchObj  = search.lookupFields({
            type: search.Type.EMPLOYEE,
            id: employeeId,
            columns: ['supervisor']
            });
            let supervisor = lookupSearchObj.supervisor[0].value;
            let supervisorName = lookupSearchObj.supervisor[0].text;
            log.debug("supervisor",supervisor);
            log.debug("supervisor",supervisorName);
            let csvFileId;
        if(lineCount>0){
            csvFile = createCsvFile(request,lineCount);
            log.debug("csv",csvFile);
            let csvDocument = file.create({
                name: "Pending Billed Purchase Orders"+employeeId,
                fileType: file.Type.CSV,
                contents: csvFile,
                folder: -15,
                isOnline: true
            })
             csvFileId = csvDocument.save();
           //body    = sendEmailToSupervisor(supervisor,csvFileId,supervisorName)
        } 
        //let finalText = "CsvContent"+csvFile+"n"+body;
        scriptContext.response.write(csvFileId);     
    }


        }catch(e){
         log.error("error",e.message+e.stack);
        }

}


        return {onRequest}

    });

Client Script

/**
 * @NApiVersion 2.1
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 */
define(['N/currentRecord', 'N/url'],
    /**
     * @param{currentRecord} currentRecord
     * @param{url} url
     */
    function(currentRecord, url) {
        
        /**
         * Function to be executed after page is initialized.
         *
         * @param {Object} scriptContext
         * @param {Record} scriptContext.currentRecord - Current form record
         * @param {string} scriptContext.mode - The mode in which the record is being accessed (create, copy, or edit)
         *
         * @since 2015.2
         */
        function pageInit(scriptContext) {
            window.onbeforeunload =null;
        }
    
        /**
         * Function to be executed when field is changed.
         *
         * @param {Object} scriptContext
         * @param {Record} scriptContext.currentRecord - Current form record
         * @param {string} scriptContext.sublistId - Sublist name
         * @param {string} scriptContext.fieldId - Field name
         * @param {number} scriptContext.lineNum - Line number. Will be undefined if not a sublist or matrix field
         * @param {number} scriptContext.columnNum - Line number. Will be undefined if not a matrix field
         *
         * @since 2015.2
         */
      
        function fieldChanged(scriptContext) {
            console.log("triggering");
        if(scriptContext.fieldId == 'custpage_jj_pageid') {    
        let pageId = scriptContext.currentRecord.getValue({
            fieldId: "custpage_jj_pageid"
        });
        let pageStr  = parseInt(pageId.split('_')[1]);
        console.log("pageId",pageStr);
        // let result = pageStr.split('- ')[1];
        // let integer = parseInt(result);
        //pageId = parseInt(pageId.split('-')[1]);//NaN
        // console.log("pagestr",result);
        if(pageId){
        document.location = url.resolveScript({
            deploymentId:  getParameterFromURL('deploy'),
            scriptId: getParameterFromURL('script'),
            params: {
                pageid : pageStr
            }
        })
    }
    
        }
    }
        function setValues(){
         try {
            
            let currRecord = currentRecord.get();
            let employeeId = currRecord.getValue({
                fieldId: "custpage_jj_employee"
            });
            console.log("employee",employeeId);
            document.location = url.resolveScript({
                deploymentId: "customdeploy_jj_sl_suite_otp7939",
                scriptId: "customscript_jj_sl_suite_otp7939",
                params: {
                    empId : employeeId
                }
            })

          
        
         } catch (e) {
            console.log("error",e.message+e.stack)
         }
    }
        // function returnPageId(){
         
        // }
        function getSuiteletPage(pageId) {
           
            document.location = url.resolveScript({
                    scriptId : "customdeploy_jj_sl_suite_otp7939",
                    deploymentId : "customscript_jj_sl_suite_otp7939",
                    params : {
                        pageid : pageId,
                    }
                });
        }
        function getParameterFromURL(param) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == param) {
                    return decodeURIComponent(pair[1]);
                }
            }
            return (false);
        }
     
      
        return {
            pageInit: pageInit,
            setValues:setValues,
            fieldChanged:fieldChanged,
           getSuiteletPage: getSuiteletPage
        };
        
    });
 

I was trying to do pagination in my suitelet page with the help of https://suiteanswers.custhelp.com/app/answers/detail/a_id/63272/loc/en_US
Suppose I have 14 results in my search i need to display 10 on one page and 4 on other page
I got the first 10 results but when i clicked on the next page it is not going to the next page instead it is resetting the page

Display of image sequences in Webbrowser using VueJs

I am developing a web frontend using VueJs for the ui part and a python flask server to provide data.
Communication between the two works with axios.

One main task of the frontend is to display images (one at a time, but with high frequency).
The images are provided via zmq. The VueJs makes a request to the flask server every sencond (required are 300ms) to get the newest image. The timer is set in the onMounted of App.vue.
When I restart everything, the frontend displays the images for a few seconds, then just stops. There is no load event from the image control anymore.

Is this a problem with VueJS? Or with the browser? The browser I am using is Google Chrome. Is there a better way to load large image sequences with high display frequency?

This is the python code:

@app.route('/img.jpg')
def image():

    while not socket.poll(10000, zmq.POLLIN):
        continue

    thumbnail = socket.recv(zmq.NOBLOCK)
    
    arr = np.frombuffer(thumbnail, dtype=np.uint8)
    img = np.reshape(arr, ( 2048, 1536,4))
    
    from PIL import Image as im
    data = im.fromarray(img)
    th = io.BytesIO()
    data.save(th, "JPEG")

    th.seek(0)

    return flask.Response(th, mimetype='image/jpeg')

and in my frontend code

the image store

const imageRoute = "img.jpg";
export const useImageStore = defineStore(
'image',
() => {
    const imgUrl = ref("");
    const imageBaseUrl = axios.defaults.baseURL + imageRoute;

    function updateImageData() {
        axios.get(imageRoute)
            .then(() => {                    
                imgUrl.value = imageBaseUrl + "?" + new Date().getTime();
            })
            .catch((err) => {
                console.error(err);
                imgUrl.value = "";
            });
    }

    return {
        updateImageData,
        imgUrl
    }
})

and the vue file:

<script setup>
import {useImageStore} from "../stores/image";

const imageStore = useImageStore();

function triggerRefresh() {
  console.log("refresh triggered by load event!")
}  

</script>

<template>
<main>
  <div class="container">
  <div class="row">
    <div class="col-md-5 px-1">
      <img alt="Grapes" class="rounded w-100  img-thumbnail" :src="imageStore.imgUrl" @load="triggerRefresh"/>
    </div>
  <div>
  <div>
 </main>
 </template>

Validation with alpine.js

In my form, I am trying to implement validation for checkboxes using Alpine.js.
When I fill out the form correctly (when the validation passes without displaying any error messages), the result of $request->all() returns an array containing values of 1 for checked fields and 0 for unchecked ones:

"myown" => "0"
"manager" => "1"
"supervisor" => "1"
"planningoutbound" => "0"

However, when the checkbox validation is triggered—meaning, for example, the ‘myown’ checkbox is checked along with another checkbox or none of the checkboxes are checked—it displays an error (indicating that the validation works correctly). The problem arises when I then re-check the checkboxes correctly and submit the form; the values for the checked checkboxes turn into null, while the unchecked fields still return a value of 0.

"myown" => "0"
"manager" => null
"supervisor" => null
planningoutbound" => "0"

a snippet of my form code:

<div x-data="addTask" class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
    <form action="{{ route('action.list.store') }}" method="post" x-ref="myForm" @submit.prevent="submitFormAddNewTask()">
        @csrf
        <div class="mb-3">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            
        <div class="mb-3">
            <h5>Task for</h5>
            @php
                $grupsChunks = $userGroups->chunk(4);
            @endphp
            <div class="flex flex-row">
                @foreach ($grupsChunks[0] as $group )
                <div class="mr-5">
                    <input type="hidden" name="{{ $group->name }}" value="0" :value="selectedCheckboxes.{{ $group->name }} ? 1 : 0" />
                    <input type="checkbox" name="{{ $group->name }}" class="form-checkbox text-success peer" id="{{ $group->name }}" x-model="selectedCheckboxes.{{ $group->name }}" value="1"  @change="selectedCheckboxes.{{ $group->name }} = $event.target.checked ? 1 : 0"/>
                    <label class="text-sm peer-checked:text-success" for="{{ $group->name }}">{{ ucfirst($group->name) }}</label>
                </div>
                @endforeach
            </div>
            @isset($grupsChunks[1])
            <div class="flex flex-row">
                @foreach ($grupsChunks[1] as $group )
                <div class="mr-5">
                    <input type="hidden" name="{{ $group->name }}" value="0" :value="selectedCheckboxes.{{ $group->name }} ? 1 : 0" />
                    <input type="checkbox" name="{{ $group->name }}"  class="form-checkbox text-success peer" id="{{ $group->name }}" x-model="selectedCheckboxes.{{ $group->name }}" value="1" @change="selectedCheckboxes.{{ $group->name }} = $event.target.checked ? 1 : 0"/>
                    <label class="text-sm peer-checked:text-success" for="{{ $group->name }}">{{ ucfirst($group->name) }}</label>
                </div>
                @endforeach
            </div>
            @endisset
            <template x-if="isSubmitForm1">
                <p class="text-danger mt-1 text-xs" x-text="validateCheckboxes(selectedCheckboxes)"></p>
            </template>
        </div>
        <div class="flex justify-end items-center mt-8">
            <button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
            <button type="submit" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
        </div>
    </form>
</div>

code snippet of my .js file:

document.addEventListener("alpine:init", () => {
    /*
    Validate Add new task in Action List
    */
Alpine.data("addTask", () => ({
    
    selectedCheckboxes: {},
    
    isSubmitForm1: false,
    
    validateCheckboxes(selectedCheckboxes){
        
        Object.keys(selectedCheckboxes).forEach(group => {
            selectedCheckboxes[group] = selectedCheckboxes[group] ? 1 : 0;
        });
        const selectedGroups = Object.keys(selectedCheckboxes).filter(group => selectedCheckboxes[group] === 1);
        const myownSelected = selectedGroups.includes('myown');
        const otherSelected = selectedGroups.filter(group => group !== 'myown').length > 0

        if(myownSelected && otherSelected){
            return 'You cannot select "myown" with other groups'
        } else if(!myownSelected && !otherSelected){
            return 'Please select at least one group'
        }
        return ''
    },

    submitFormAddNewTask() {
        if(this.validateCheckboxes(this.selectedCheckboxes)){
            
            this.isSubmitForm1 = true;
            console.log('Not ok')
            
            return false
        }
    
        console.log('ok');
        this.$refs.myForm.submit()
    },
}))
});

I don’t understand why this is happening and how to resolve this issue.

Updating Oracle database using AJAX

I have created a project where my interface fetch data from my Oracle SQL database using springboot, Jquery and AJAX and displays it on a table. What I couldn’t find online is to how to do basic operations(Post, Delete) on my table using HTML forms. All sources mostly focuses on php mySQL projects. I would appreciate any help or guidance on this matter.

$(function(){ //fetching data from oracle

    var $patientsfn = $('#firstname');
    var $patientsln = $('#lastname');
    var $patientsno = $('#patientno');
    var $patientsage = $('#age');
    var $patientsg = $('#gender');
    var $patientsad = $('#adresses');
    var $patientsrd = $('#registerdate');
    var $patientsadd = $('#attendeddoctors');
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/v1/patients',
        success: function(patients) {
            $.each(patients, function(i, patient){
                $patientsfn.append('<li>'+ patient.firstNames+ '</li>');
                $patientsln.append('<li>'+ patient.lastName+ '</li>');
                $patientsno.append('<li>'+ patient.patientNo+ '</li>');
                $patientsage.append('<li>'+ patient.ages+ '</li>');
                $patientsg.append('<li>'+ patient.genders+ '</li>');
                $patientsad.append('<li>'+ patient.adresses+ '</li>');
                $patientsrd.append('<li>'+ patient.registerDate+ '</li>');
                $patientsadd.append('<li>'+ patient.attendedDocs+ '</li>')
            })
        }
    });
    function submitData(){
        var submitfn = $('input[submitfn = firstNames]').val();
    }
    
});
<script <!-- code for table and  --> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="backup.html" class="btn btn-secondary text-light">add data</a>
    <div class="container">
      <table id="example" class="table table-striped" style="width: 100%">
        <thead>
          <tr>
            <th>FIRSTNAME</th>
            <th>LASTNAME</th>
            <th>PATIENTNO</th>
            <th>AGE</th>
            <th>GENDER</th>
            <th>ADRESSES</th>
            <th>REGISTERDATE</th>
            <th>ATTENDEDDOCTORS</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id="firstname"></td>
            <td id="lastname"></td>
            <td id="patientno"></td>
            <td id="age"></td>
            <td id="gender"></td>
            <td id="adresses"></td>
            <td id="registerdate"></td>
            <td id="attendeddoctors"></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>FIRSTNAME</th>
            <th>LASTNAME</th>
            <th>PATIENTNO</th>
            <th>AGE</th>
            <th>GENDER</th>
            <th>ADRESSES</th>
            <th>REGISTERDATE</th>
            <th>ATTENDEDDOCTORS</th>
          </tr>
        </tfoot>
      </table>
    </div>
    
    
    <body id="second">
    <h1 id="header">Veri ekleme</h1>
    <img id="backupimg" src="images/akgun.png" alt="" />


    <form> <!--code for html form-->
      <label for="firstNames">First name:</label><br />
      <input type="text" id="firstNames" name="firstNames" /><br />
      <label for="lastName">Last name:</label><br />
      <input type="text" id="lastName" name="lastName" /><br /><br />
      <label for="ages">Age:</label><br />
      <input type="text" id="ages" name="ages" /><br /><br />
      <label for="genders">Gender:</label><br />
      <input type="text" id="genders" name="genders" /><br /><br />
      <label for="adresses">Adress:</label><br />
      <input type="text" id="adresses" name="adresses" /><br /><br />
      <label for="attendedDocs">Attended Doctor:</label><br />
      <input type="text" id="attendedDocs" name="attendedDocs" /><br /><br />
      <label for="registerDate">Register Date:</label><br />
      <input type="date" id="registerDate" name="registerDate" /><br /><br />
      <input id="submit" type="submit" />
    </form>
    

Retrieving data for Power Apps Person Card from MS GraphAPI

I’m working on a project using Power Pages where I need to display person cards. These cards should pull user information via an API call, specifically using Microsoft Graph API to get details like name, email, and job title. Here’s what I have tried so far:

const options = {
    authProvider,
};

const client = Client.init(options);

let user = await client.api('/users/email.de').get();
<div id="email-container" data-email="{{ employee.new_email }}">
  Email: {{ employee.new_email }}
</div>
<div id="user-info"></div> <!-- Hier wird das API-Ergebnis angezeigt -->

I’m not sure how to correctly authenticate and connect to the API in Power Pages using JavaScript. Specifically, I don’t know how to implement the authProvider in this context to get access to Microsoft Graph without requiring user login each time.

I would also like to display the result dynamically once the API call is made.

How do I authenticate correctly within Power Pages using the Microsoft Graph API? Can I securely make API calls from the client side, or do I need a server-side implementation for this?

Is there a best practice for handling authentication when working with APIs in Power Pages?

Any guidance or examples would be much appreciated!

Unable to reopen YouTube iframe embed full screen after open-exit full screen mod fast

Whenever i try to open and exit youtube embed video in full screen mode fast, button full screen in youtube frame stop working even when i reload the page

It can only work if i close and reopen the page

This is the page code

<!DOCTYPE html>
<meta charset="utf-8">
<title>Demo</title>
<body>

    <iframe width="100%" src="https://www.youtube.com/embed/kWi1beTiVig" frameborder="0" allowFullScreen="allowFullScreen"></iframe>
    <br />

</body>

Is there any solution for this?

I had already try to add attributes in iframe but nothing fix the problem

SyntaxError: Unexpected token in JSON.parse – Invalid JSON format being sent in to the Backend

To give you some context:

I am trying to implement a simple Crud with a Client/Server architecture.
While doing so I tried making a multi-step form, since alot of the forms became quite long,
But, I soon realized error checking while having a multistep form was harder than a simple onepage form.

In order to check if the Unique values of the form were indeed unused in the DB I created a react-query that will check it for me and display a message if the return message was false, meaning there is a duplicate in the DB.

As I was trying to implement said API endpoint I ran into a curious Error:

The value that is being send into the backend is a json that contains values suchs as:

{“name”: “”xValue””}

Which completely crashes my backend.

I could probably try to do some string manipulation to “clean up” the string before turning it into a json and sending it back to the backend.

But I figured before I patch my error up I should probably address the real problem:
The way I am capturing the value. I think…

These are some of the relevant code that I used for this “Unique Checking”

//useState that will hold the value:

  const [carnetValue, setCarnetValue] = useState('');

//React Query and onChange reaction function:

  const { data: isUnique } = useQuery(["checkCarnet", carnetValue], () => apiClient.checkCarnet(carnetValue), {
    enabled: !!carnetValue
  });


  const handleChange = (value: string) => {
    setCarnetValue(value);
  }

//The input itself:

  <input
          type="text"
          className="border border-blue-500 w-full py-1 px-2 font-normal"
          {...register("carnet", { required: "Este campo es necesario", onChange: e => handleChange(e.target.value) })}
        />

//The API Client:

export const checkCarnet = async (carnet: string): Promise<RevisarDato> => {
  console.log(carnet);
  const response = await fetch(`${BASE_API_URL}/api/auth/check-carnet`, {
    method: "POST",
    body: JSON.stringify(carnet),
    headers: {
      "Content-type": "application/json",
    },
  });
  if (!response.ok) {
    throw new Error("Something went wrong");
  }
  const returnData = await response.json();
  return returnData;
};

// In case necessary or relevant this is the Backend Endpoint

export const checkCarnet = async (req: Request, res: Response) => {
  const { carnet } = req.body;
  try {
    const yaExiste = await pool.query(
      "SELECT * FROM Personas WHERE carnet = $1",
      [carnet]
    );
    if (yaExiste.rows.length != 0) {
      return res.status(400).json({ result: false });
    }
    return res.status(200).json({ message: true });
  } catch (error) {
    console.log(error);
    res.status(500).json({ result: "Internal Server Error 500" });
  }
};

This is an example of the displayed Error itself:

SyntaxError: Unexpected token '"', ""asdasda"" is not valid JSON
    at JSON.parse (<anonymous>)

Based on it I can only assume that It has something to do with the way The values are being captured. Maybe its becouse I am using both a custom onChange as well as react-hook-form. Maybe some form of string manipulation is always necesary. I am not really sure.

Aside from the error that inspired this post I would also appreciate any feedback or input about the code itself or how to Error Check Uniqueness in Forms.

With that being said I appreciate your time to see my post!

Functions written inside the File not getting mocked in Node js Test case

I have following file which I am trying to write test cases for .

VehicleAssign.ts

expot const vehicleAssignSPO = async(gettersetter, input) => {
 //some code
 try {
    await checkExpiredSPO(getterSetter, "some value")
}
}


 export const checkExpiredSPO = async(getterSetter, flmt) => {
  
  //some code
   
  }

Now I am trying to write a test case for this file.

VehicleAssign.test.ts

  it('Should be able to call the Function Successfully', async () => {
        const input = mockInput();

         jest.mock('../helpers/vehicleAssignSPO.helper', () => ({
            checkExpiredSPO: jest.fn().mockResolvedValue({})
        }))
       
        const result = await vehicleAssignSPO(getterSetterMock, input)
    })

But here I am mocking the function checkExpiredSPO but still is calling the actual function and the mocked one.

How Can I fix this ?

Non-async function call inside an async function

import { useState } from 'react';

export default function Form() {
  const [text, setText] = useState('');

  function sleep(milliseconds) {
    const start = Date.now();
    while (Date.now() - start < milliseconds) {
    }
  }

  async function handleSubmit(e) {
    sleep(5000);
  }

  function handleTextareaChange(e) {
    setText(e.target.value);
  }

  return (
    <>
      <h2>Test</h2>
      <form onSubmit={handleSubmit}>
        <textarea
          value={text}
          onChange={handleTextareaChange}
        />
        <br />
        <button>
          Submit
        </button>
      </form>
    </>
  );
}

I edited this component from the react docs to make it to the point.

I was learning react and JavaScript and ran into async functions in the react docs.

Here when I submit the form I can not edit it until the sleep runs out, but my confusion is that the sleep(5000) was called inside an async function.

Calling functions inside async functions does not make them non-blocking?
Or, does the form also call await on the handleSubmit as well?

My knowledge on JavaScript and react is low, so I may not be using terms correctly.

Document doesn’t get deleted after expiration

I’m trying to expire the document after one minute its been created but after creating a document it does not get deleted after one minute

const mongoose = require('mongoose');

const textSchema = new mongoose.Schema({
  id: {
    type: String,
    required: true,
    unique: true  
  },
  text: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
    expires: '60s'
  }
});

const Text = mongoose.model('Text', textSchema);

module.exports = Text;

vue3.5 Pass a value to a child component but the child component has not yet been mounted

Parent component :

When clicked, the dialog map component opens and updates the values that need to be passed

function editPowerStationChooseMap() {
    mapVisible.value = true;
    mapForm.address = null
    mapForm.fullDddress = editPowerStationForm.value.address;
    editAddressInfo.value = editPowerStationForm.value.address;
}
<el-dialog v-model="mapVisible" title="选择位置" width="70%">
        <template #header>
            <el-form  :inline="true" ref="mapFormRef" :model="mapForm">
                <el-form-item label="省市区" prop="address">
                    <el-cascader v-model="mapForm.address" :filterable="true" :options="addressOption.option" :props="cascaderProps" class="custom-cascader" @change="chooseAddress" style="width: 240px"/>
                </el-form-item>
                <el-form-item label="详细地址" prop="fullDddress">
                    <el-input v-model="mapForm.fullDddress" placeholder="请输入详细地址" style="min-width: 400px"/>
                </el-form-item>
            </el-form>
        </template>
        <Map @mapReady="handleMapReady" :addressInfo="addressInfo":editAddressInfo="editAddressInfo"/>
        <span slot="footer" class="dialog-footer">
  <el-button @click="mapVisible = false">取消</el-button>
  <el-button type="primary" @click="confirmAddress">确定</el-button>
</span>
    </el-dialog>

children component:

const emit = defineEmits(["mapReady"]);
const { addressInfo, editAddressInfo } = defineProps({
    addressInfo: {
        type: String,
    },
    editAddressInfo: {
        type: String
    }
});
watch([() => addressInfo, () => editAddressInfo], ([newAddress, newEditAddress], [oldAddress, oldEditAddress]) => {
    let addressToGeocode = '';
    // 判断是哪个值发生了变化
    if (newAddress !== oldAddress) {
        addressToGeocode = newAddress;
    } else if (newEditAddress !== oldEditAddress) {
        addressToGeocode = newEditAddress;
    }
    if (addressToGeocode) {
        geocoder.getLocation(addressToGeocode, function (status, result) {
            if (status === 'complete' && result.info === "OK") {
                const lnglat = result.geocodes[0].location;
                map.setCenter(lnglat);
                positionPicker.on('success', function (positionResult) {
                    detailedAddress.value = positionResult.address;
                    emit("mapReady", {
                        map,
                        geocoder,
                        detailedAddress,
                        positonInfo: [positionResult.position.lng, positionResult.position.lat]
                    });
                });
                positionPicker.on('fail', function (positionResult) {
                });
                positionPicker.start(lnglat);
            } else {
                console.error('根据地址查询位置失败');
            }
        });
    }
});

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: '61ed75a46aa0cc6a2860aa025fd22ed5',
    };

    AMapLoader.load({
        key: '9c4e9341d7408b1241277ae9d7498df9',
        version: "2.0",
        AMapUI: {
            version: "1.1"
        }
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                viewMode: "2D",
                zoom: 11,
                center: [116.397428, 39.90923], // 默认中心点
            });


            // 拖拽选址插件
            AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
                positionPicker = new PositionPicker({
                    mode: 'dragMarker',//设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
                    map: map, //依赖地图对象
                    iconStyle: {//自定义外观
                        url: ikun,
                        size: [48, 48],  //要显示的点大小,将缩放图片
                        ancher: [24, 40],//锚点的位置,即被size缩放之后,图片的什么位置作为选中的位置
                    }
                });
            });

            // Geocoder 插件
            AMap.plugin('AMap.Geocoder', () => {
                geocoder = new AMap.Geocoder({city: '全国'});
                emit("mapReady", {map, geocoder, detailedAddress: ''});
            });

        })
        .catch((e) => {
            console.error(e);
        });
});

When I click, the dialog opens but the watch code does not execute. When I add the delayer, the code executes normally. like this:

function editPowerStationChooseMap() {
    mapVisible.value = true;
    setTimeout(()=>{
        mapForm.address = null
        mapForm.fullDddress = editPowerStationForm.value.address;
        editAddressInfo.value = editPowerStationForm.value.address;
    },500)
}

Trying nextTick didn’t work either, was it because the map component took so long to load?

how to handle seperate FormData in the replicated form?

I am trying to creating a dashboard with panels of different sizes and re-arrange able according to the users will also the panel have different formData inside the same panel Form.

Dashboard and panels

Expected : to get the formData from the first panelform and i have stored it in a hidden input element inside the first formData and likewise for n number of panel i want to achieve this, then for saving the panels i want to iterate over the each panels and get the formData that is stored in each panels.

Dashboard 1

  • panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
  • panel 2 {“type”:”2″,”aggregateType”:”count”,”panellogsource”:”19″,”fieldSelected”:[“dst_port”,”dst_tos”],”timeWindow”:”Last 15 Minutes”}

Actual : i am able to set the data for the first panel but after populating the second panel the form is retrieving the previous(first) panel data. i want to separate the panels formData for each panel.

Dashboard 1

  • panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
  • panel 2 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”} (same content for the second panel)
<div class="panel-container col-lg-${layoutSize}">
  <div class="card">
    <div class="panel card-body ibox">
      <div class="panel-heading card-title ibox-title">
        <h5>Drag&amp;Drop ${layoutSize}</h5>
        <div class="ibox-tools d-flex">
          <a class="collapse-link" onclick="return collapseIbox(event, this);">
            <i class="fa fa-chevron-up"></i>
          </a>
          <div class="dropdown options ms-auto">
            <a class="dropdown-toggle" data-bs-toggle="dropdown">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#" onclick="editPanel()" class="dropdown-item"
                  >Edit Content</a
                >
              </li>
              <li>
                <a href="#" class="dropdown-item">
                  Size:
                  <button
                    class="btn btn-l btn-primary"
                    onclick="changeSize(this, 'lg');"
                    title="Full Row"
                  >
                    <i class="fa fa-square-o fs-6"></i>
                  </button>
                  <button
                    class="btn btn-m btn-primary"
                    onclick="changeSize(this, 'md');"
                    title="2 Column Row"
                  >
                    <i class="fa fa-square-o fs-5"></i>
                  </button>
                  <button
                    class="btn btn-s btn-primary"
                    onclick="changeSize(this, 'sm');"
                    title="3 Column Row "
                  >
                    <i class="fa fa-square-o fs-4"></i>
                  </button>
                  <button
                    class="btn btn-xs btn-primary"
                    onclick="changeSize(this, 'xs');"
                    title="4 Column Row"
                  >
                    <i class="fa fa-square-o fs-3"></i>
                  </button>
                </a>
              </li>
            </ul>
          </div>
          <a class="close-link" onclick="return closeIbox(event, this);">
            <i class="fa fa-times"></i>
          </a>
        </div>
      </div>
      <div class="ibox-content">
        <!-- add new content to the panel -->
        <button type="button" class="btn btn-light ms-2" onclick="editPanel()">
          Edit Panel
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Panel Loading Modal -->
<div class="modal fade" id="panelCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Panel Data</h5>
        <button
          id="icon-modal-close"
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <i class="bx bx-x text-white font"></i>
        </button>
      </div>
      <div class="modal-body">
        <%@ include file="../dashboard/panel_create.jsp"%>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

panel_create.jsp

<div class="panel">
    <form class="row g-3" id="PanelCreationForm" onsubmit="return false;">
        <!-- TYPE-> CHART,AGGREGATION -->
        <div class="col-md-6">
            <label for="type" class="form-label">Type<span style="color: red;">*</span></label> <select name="type" id="type" class="form-control" required
                onchange="toggleType(this.value)">
                <option value="select" selected disabled>Select</option>
                <option value="1" ${panel ne null and panel.type eq '1' ? 'selected' : ''}>Chart</option>
                <option value="2" ${panel ne null and panel.type eq '2' ? 'selected' : ''}>Aggregation</option>
            </select>
        </div>
        <!-- CHART OPTION / AGGREGATE OPTION -->
        <div class="col-md-6">
            <label for="type" class="form-label">Chart / Aggregate<span style="color: red;">*</span></label><select name="chartType" id="chartType"
                class="form-control" required>
                <option value="select" selected disabled>Select Chart</option>
                <c:forEach var="option" items="${chartOptions}">
                    <option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
                </c:forEach>
            </select> <select name="aggregateType" id="aggregateType" class="form-control" required>
                <option value="select" selected disabled>Select Aggregate</option>
                <c:forEach var="option" items="${aggregateOptions}">
                    <option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
                </c:forEach>
            </select>
        </div>
        <div class="col-md-2">
            <!-- LogSource -->
            <label for="logsource" class="form-label">Log Source<span style="color: red;">*</span></label> <select name="panellogsource" id="panellogsource"
                class="form-control" required>
                <option value="select" selected disabled>Select</option>
                <c:forEach var="logSource" items="${LogSource.sources()}">
                    <option value="${logSource.logId}" <c:if test="${logSource.logId eq panel.logSource}">selected</c:if>>${logSource.name}</option>
                </c:forEach>
            </select>
        </div>
        <!-- FIELD -->
        <div class="col-md-10">
            <!-- Field Multi Select -->
            <label class="form-label">Field<span style="color: red;">*</span></label>
            <div id="fieldSelectDiv">
                <select multiple name="fieldSelected" class="form-control form-control-cust" id="fieldSelect" required>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <!-- Time Window -->
            <button type="button" style="margin-left: 4px" data-popover-content="#pop-time-window-content" data-toggle="popover" tabindex="0"
                class="btn btn-sm btn-light btn-icon-custom time-window-pop" id="wTimeWindowCalendar" title="Time Window">
                <i class="bx bx-calendar font-20"></i>
            </button>
            <input style="min-width: 300px !important; max-width: 300px !important;" type="text" name="timeWindow" id="timeWindow"
                class="form-control form-control-cust timeWindowInput" placeholder="Time Window" data-time-window="last-1-year"
                value="${panel ne null ? panel.timeWindow: ''}" readonly>
            <!-- Time Window End -->
        </div>
        <div class="col-md-12">
            <!-- Panel Data type="hidden"  -->
            <input type="text" class="form-control" id="panelData" value=" ">
        </div>
        <div class="col-12" style="padding-top: 25px; display: flex; justify-content: center;">
            <c:if test="${page eq 'new'}">
                <button type="submit" onclick="javascript:addPanelData()" class="btn btn-light px-5" id="btnSubmit">Add</button>
            </c:if>
            <c:if test="${page eq 'edit'}">
                <button type="submit" onclick="javascript:updatePanelData()" class="btn btn-light px-5" id="btnSubmit">Update</button>
            </c:if>
        </div>
    </form>
</div>

js function to add the formData to each panel


function addPanelData() {
    console.log("addPanelData");
    // Iterate over each panel container
    $('.panel').each(function(index) {
        var formDataObject = {};
        // Serialize the form data for the current panel
        var formData = $(this).find('form').serializeArray();
        console.log("formData: ", formData);
        $.each(formData, function(i, field) {
            if(field.name==='fieldSelected'){
                if(!formDataObject[field.name]){
                    formDataObject[field.name]=[];  
                }
                formDataObject[field.name].push(field.value);
            }else{
                formDataObject[field.name] = field.value;
            }
        });

        console.log(`Form Data for Panel ${index}:`, formDataObject);

        // Convert formDataObject to JSON string and store it in the hidden input field panelData
        $(this).find('input[id="panelData"]').val(JSON.stringify(formDataObject));
        $(this).find('form')[0].reset();
    });
}

Why callback function showing “Undefined” result?

I have been learning javascript test scripts in Postman.Here I am just learning about callback functions and I wanted to check return value is showing in the last line of print statement but the result shows ‘undefined’. Below is the code:

function add(a,b)
{
    console.log(a+b);
    return a+b;
}
function test(testname,callbackfunction,m,n)
{
    console.log(testname);
    callbackfunction(m,n);
}
console.log
(test("THis is addition",add,12,12));

Console shows:

THis is addition
24
undefined

Why it showing undefined in the last line instead of showing 24 the return value?
Thanks in advance.

I tried to store the return value in a variable but it showing the same ‘unfined’ result.

let stu=test("THis is addition",add,12,12);

Error: Exported bands must have compatible data types; found inconsistent types: Float64 and Float32. (Error code: 3)

#I cant export the layer to my google drive because of this error:Exported bands must have compatible data types; found inconsistent types: Float64 and Float32. (Error code: 3). can anyone help me with this problem.

var band = ['B11','B8', 'B4', 'B3', 'B2'];
var image = ee.ImageCollection("COPERNICUS/S2_SR_HARMONIZED").select(band).filterBounds(table)
            .filterDate('2023-12-01','2023-12-31').filter(ee.Filter.lt("CLOUDY_PIXEL_PERCENTAGE",20)).median()
            .clip(table);
            
var visparams = {min:0.0, max:3000, bands:['B8','B4', 'B3']};
print(image, visparams,'image');

Map.addLayer(image,visparams, 'image');

var nd= function(image){
          
        var ndwi= image.normalizedDifference(['B3','B8']).rename('NDWI');
          return image.addBands(ndwi);
};

var nd1 = nd(image);

Map.addLayer(nd1.select('NDWI'),{palette: ['red', 'yellow', 'green', 'cyan', 'blue']},'nd2');

Export.image.toDrive({
  image: nd1,
  description: "NDWI_2023",
  region: table,
  maxPixels:380681498 ,
  scale: 10, 
})