Category: javascript

Category Added in a WPeMatico Campaign

Have issues loading the Leaflet Library on safari

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/leaflet.css">
    <link rel="stylesheet" href="css/toastify.min.css">
    <link rel="stylesheet" href="css/MarkerCluster.Default.min.css">
    <link rel="stylesheet" href="css/MarkerCluster.min.css">
    <link rel="stylesheet" href="css/leaflet.extra-markers.min.css">

    <link rel="stylesheet" href="css/fontawesome-free-6.4.2-web/css/all.css">

    <link rel="stylesheet" href="css/fontawesome.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/easy-button.min.css">
    <link rel="stylesheet" href="css/mystyle.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/easy-button.min.css">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <link rel="icon" href="flight.ico" type="image/x-icon">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easy-button.css" />
</head>

I developed an app using leaflet library, the website has no error on chrome/firefox or other browsers but there are errors when i am using the safari.

The code above was in grey color in the element tab of console.

The attached are the errors i encountered.

enter image description here

Can anyone please advise?

Not allowed to navigate top frame to data URL ‘data:text/csv;charset=utf-8,practice_id,doctor_id’

This is my JavaScript code for the “Download Sample” button.

When I click on the “Download Sample” button in my staging environment, it works fine in both Chrome and Brave browsers.

enter image description here

enter image description here

Even in incognito mode, it is working fine. After clicking on the “Sample Download” button, files are getting downloaded.

However, in the Safari Browser, it is not working. After clicking on the “Sample Download” button, I am getting the following error in the console:

Not allowed to navigate top frame to data URL 'data:text/csv;charset=utf-8,practice_id,doctor_id'.

This is my Js Code:

    $("#download-sample-button").click(function (e) {
        e.preventDefault();
        var uploadType = $('#uploadtype').val();
        var csvHeader = $("section[data-importer=" + uploadType + "] .checkbox input:checked")
            .map(function () {
                return this.value;
            })
            .get()
            .join(",");
        var csvContent = "data:text/csv;charset=utf-8," + csvHeader;
        window.location.href = encodeURI(csvContent);
    });

what are the possible problems for this issue, please help.

is this browser, cache related issue or something else ?? like Old code or other??

Unable to resize to the right if there is a block there with height and width set

When setting a fixed width and height for two squares within a containing square, the resize functionality from the css tag ‘resize’: ‘both’; is able to resize fine to the left but slows down when the left box is dragged larger to the right.

For demonstration purposes I have put a code snippet below. If the left square is dragged to the left, then the box resizes with ease. But if the left square is dragged to the right and encroaches on the right square the drag slows down and the right block does not get smaller.

I want the functionality to be that if the left block is dragged bigger to the right, that the right block will get smaller.

/* style.css */
.resizable-square {
    resize: both;
    overflow: auto;
    border: 2px solid #000;
    box-sizing: border-box;
}

.container-square {
    width: 300px; /* Initial width of the container */
    height: 300px; /* Initial height of the container */
    display: flex; /* Use Flexbox for inner squares */
    align-items: center; /* Center inner squares vertically */
    justify-content: space-around; /* Space out inner squares */
    background-color: #90EE90; /* Light green background for container */
}

.inner-square {
    width: 100px; /* Initial width of inner squares */
    height: 100px; /* Initial height of inner squares */
    background-color: #6495ED; /* Light blue background for inner squares */
    margin: 10px; /* Space between inner squares and container border */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Squares</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="resizable-square container-square">
        <div class="resizable-square inner-square"></div>
        <div class="resizable-square inner-square"></div>
    </div>
</body>
</html>

Error: Invalid `prisma.server.findUnique()` invocation: when trying to create constant for locating server

I might not be asking this correctly I’m still very new to this;

I’m attempting to create a const that checks to see whether the user is a valid member of the server being loaded.

within my layout.tsx in my main routes folder I have the following (extract not the full code)

const ServerIdLayout = async ({
    children,
    params,
}: {
    children: React.ReactNode;
    params: { serverId: string };
}) => {
    const profile = await currentProfile();

    if (!profile) {
        return redirectToSignIn();
    }

    const server = await db.server.findUnique({
        where: {
            id: params.serverId,
            members: {
                some: {
                    profileId: profile.id
                }
            }
        }
    });

The error is stating that the where function requires an ‘id’ or ‘id’ argument and I’m not sure where I’m going wrong. The code works fine if I use findFirst(); but not findUnique();

for reference my schema.prisma looks like this:

model Server {
  id         String @id @unique @default(uuid()) @db.VarChar(255)
  name       String
  imageUrl   String @db.Text
  inviteCode String @db.Text

  profileId String
  profile   Profile @relation(fields: [profileId], references: [id], onDelete: Cascade)

  members  Member[]
  channels Channel[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([profileId])
}

and in my .env my DATABASE_URL ends with sslaccept=strict

I have attempted multiple variants within my schema.prisma file and each time ran npx prisma generate && npx prisma db push in my terminal before re-loading my npm run dev

React – prevent simultanous data fetching by independent components

I have a large application, where I use redux to store my fetched data. Each component that needs data ensures it will get what it needs by running request and waits for the data to appear in
useSelector(state => state.dataReducer.data)
In most simple use it is ok, but when two components on the same page require same data, they both run fetching

My solution is (code simplified, I tried many ways of accessing store)

if(store.getState().requests.hasOwnProperty(url)) {
   return false
}

store.dispatch(setRequest(url));

get(url).finally(() => {
   store.dispatch(unsetRequest(dataKey));});
})

unfortunatelly, async store update do not perform its operations when I need them to be performed, and when 2 symultanous requests run, state has not been updated yet.
For testing purposes, i run the other request with timeout of 200ms and it is OK, but in normal application context, it’s not possible.
How to prevent

How do I sort specific elements in list in java?

Please help me.. In javascript, I want to sort specific elements which are represented by variables in list in automatic way.

const PHQ = [
  {
    q: '1',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '2',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '3',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  }]

const GAD = [
  {
    q: '1',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '2',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '3',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  }]
const RSES = [
  {
    q: '1',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '2',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  },
  {
    q: '3',
    a: [
      { answer: '1', type: ['a']},
      { answer: '2', type: ['b']},
      { answer: '3', type: ['c']},
      { answer: '4', type: ['d']}
    ]
  }]

const qnaList = [
    PHQ[0], GAD[0], RSES[0],
    PHQ[1], GAD[1], RSES[1],
    PHQ[2], GAD[2], RSES[2],
  ]

const select = [3,2,1,0,1,2,3,2,1];

each element of 'select' is selected answer in 'qnaList'.

ex) 3 = selected answer of PHQ[0]
    2 = selected answer of GAD[0]
    1 = selected answer of RSES[0]

I want to make lists that represent selected answers of each group of elements in 'qnaList'.

ex) selectedPHQ = [3,0,3]
    selectedGAD = [2,1,2]
    selectedRSES = [1,2,1]

Please help me.. In javascript, I want to sort specific elements which are represented by variables in list in automatic way.

I want to make lists that represent selected answers of each group of elements(PHQ, GAD, RSES) in ‘qnaList’.

ex) selectedPHQ = [3,0,3]
    selectedGAD = [2,1,2]
    selectedRSES = [1,2,1]

Cannot GET /ok error when using .get in express/nodejs

I’m trying to use .get so I can fetch from it from an html file but it just has not found error.

<script> 
document.getElementById("runCliTool").addEventListener("click", function() {
  fetch('/ok', {
        method: 'GET' 
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        const displayBox = document.getElementById("dataDisplayBox");
        displayBox.innerHTML = JSON.stringify(data, null, 2);
    })
    
});

map.html file,

require('dotenv').config({ path: 'sensitive.env' });
const { exec } = require('child_process');
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

app.use(express.json()); 

app.listen(PORT);

app.get('/ok', (req, res) => {
    exec('node cli-tool.js', (error, stdout, stderr) => {
        if (error) {
            console.error(`exec error: ${error}`);
            return res.status(500).send({ message: 'Failed to execute CLI tool', error: error.toString() });
        }
        console.log(`stdout: ${stdout}`);
        if (stderr) console.error(`stderr: ${stderr}`);
        res.send({ message: 'CLI tool executed successfully', output: stdout });
    });
});

server.js file

If I set the path of the fetch in map.html to server.js, it detects the file but for some reason doing app.get(‘ok’, does not create a pathway to that and it returns not found in the fetch from my html file.

How do I access these array keys?

I have 5 indexed arrays in an object and I want to access these array keys to display them.

I understand that the last two lines are causing issues. I’ve searched for an hour and haven’t found why it doesnt work.

var quotes = {
  karamazov: [{
    "Serge Karamazov": "Barrez vous **** de mimes."
  }],
  abitbol: [{
    name: "Georges Abitbol",
    quote: "Le train de tes injures roule sur le rail de mon indifférence.",
  }, ],
  bath: [{
    name: "Hubert Bonisseur de la Bath",
    quote: "Ça ne prenait pas beaucoup plus de temps.",
  }, ],
  moulinier: [{
    name: "Moulinier ",
    quote: "L'habit ne fait pas le moine, mais il fait l'agent... Même non titularisé.",
  }, ],
  welles: [{
    name: "Orson Welles",
    quote: "C'est du vol et du plagiat. j'aime pas trop les voleurs et...",
  }, ],
};

const quotesWrap = document.querySelector('#quotes-wrap');

Object.keys(quotes).forEach(function(writer) {
  const citationWrap = document.createElement("div");
  quotesWrap.appendChild(citationWrap);
  const citation = document.createElement("p");
  const auteur = document.createElement("p");
  citationWrap.appendChild(citation);
  citationWrap.appendChild(auteur);

  citationWrap.classList.add("quote");
  citation.classList.add("citation");
  auteur.classList.add("auteur");

  citation.innerHTML = '"' + writer.quote + '"';
  auteur.innerHTML = writer.name;
});
<div id="quotes-wrap"></div>

I perform google app script to generate PDF centification but got stuck to create PDF file

I am performing google app script to generate PDF certification and send to participants passing quiz score as desired criteria, but in the Process 4 I cannot still create PDF file because getAS() method does not work at the end of replace name of participant in google slide template.

Here is my google app script

//Process 1 Specify the source of data, template and folder
var ss = SpreadsheetApp.openById('1KXhXgRYN2-cgxeeHdNT8425gemAwtWYQABPfMlYp_Kc');
var sh = ss.getSheetByName('Form Responses 1')
var folderID = '1fv2sHqG8Su7Qt4njTv3qcIllhLct4d--'
var TemplateID = '1yAO4Q4AKZjP_5v9lta5qvxtk2bBJnZWYLVMt68at5RQ'
function myFunction() {
  var rngData = sh.getDataRange().getValues();
  //Iterate to all data in google sheet and filter score base on desire criteria
  for (i = 1; i < rngData.length; i++) {
    var score = rngData[i][1];
    if (score >= 14) {
      var fullname = rngData[i][3] + "" + rngData[i][20];
      var email = rngData[i][4];
      
      //Process 2 Access to Slide Template
      var temp = DriveApp.getFileById(TemplateID);
      var folder = DriveApp.getFolderById(folderID);
      
      //Process 3 Copy Template to destination folder
        var SlideCopy = temp.makeCopy(folder);
        var newSlideID = SlideCopy.getId();
        var newCert = SlidesApp.openById(newSlideID);
        var slides = newCert.getSlides();
        var slideContent = slides[0].getShapes();
    
      //Process 4. Loop to replace name of participants in all copied slides at placeholder
      for(j = 0 ; j < slideContent.length ; j++){
              //Replace the name of participant in placeholder
               slideContent[j].getText().replaceAllText('{fullname}',fullname);
               //rename the file of slide by participant name
               newCert.setName(fullname);
                  

      } 
    
    }
    


  }
}

My result is created PDF file generating from that script.your text

How to assert Bad syntax(400) in Jest

I was trying to validate the test case with the try catch block. It is expected to throw error while it hit the api. So it will navigate to the error block. Assertion in there will ensure there is error defined. However in case if it doesn’t throw error it will capture the value in putdeployment try block and assert with the status code 200 again that is navigating to catch block.

test('Validate deployment with removed binding',async()=>{
  const deploymentEntity: ondemandApi.HubArtifactDeployment = {
    _type: ondemandApi.DeploymentType.HubArtifact,
    ...coords,
    path: "example-programs",
    namespace: defaultNamespaceId,
    executionProfileId: executionProfileId
  }
  try{ 
    let putDeployment=(await ondemandService.putDeployment({
    deploymentId,
    deploymentEntity
  }))
  expect(putDeployment.status).not.toBe(200)
}
  catch(error){
    expect(error).toBeDefined()
  }
 
})

I have tried the alternatives of asserting the error like the below but it doesn’t worked. I was expected to assert the error status code 400 in my test.

Alternative 1:

        let putDeployment =async()=>{(await ondemandService.putDeployment({
            deploymentId,
            deploymentEntity
        })).status}
        expect(putDeployment).toBe(400)

ALternative 2:

        let putDeployment =async()=>{(await ondemandService.putDeployment({
            deploymentId,
            deploymentEntity
        })).status}
        expect(putDeployment).rejects.toBe(400)

Automatically Append Decimals in Ant Design InputNumber Component

I’m using Ant Design’s InputNumber component in a React project to create a custom money input field. The component formats input values with a thousand separator (e.g., “1.234” for one thousand two hundred thirty-four) and a comma as the decimal separator (e.g., “1.234,23”). The formatting works well when a user enters both integer and decimal values. However, I’ve encountered a challenge: when a user inputs a number without specifying any decimal digits (e.g., entering “1234” instead of “1234,00”), I want the component to automatically append “,00” to the input value once the user has finished typing, indicating zero cents in a user-friendly way.

import React from 'react';
import { InputNumber, Input } from 'antd';
import { TextInput } from '../input/TextInput';
import { formatMoney } from './MoneyFormatter';
import './MoneyInput.scss';

type MoneyInputProps = {
  value?: number;
  readOnly?: boolean;
  onChange?: (value?: number) => void;
};

export const MoneyInput = ({ value, readOnly = false, onChange, ...rest }: MoneyInputProps) => {
  const handleNumberChange = (newValue: string | number | null | undefined) => {
    if (onChange) {
      const value = Number.isFinite(newValue) ? newValue as number : undefined;
      onChange(value);
    }
  };
  if (readOnly) return <TextInput readOnly value={formatMoney(value)} {...rest} />;
  return (
    <Input.Group className='MoneyInput'>
      <InputNumber
        className='money-value'
        min={0}
        precision={2}
        value={value}
        decimalSeparator=','
        formatter={value => {
          const valueString = `${value}`;
          const [integer, decimal] = valueString.split('.');
          const formattedInteger = integer.replace(/B(?=(d{3})+(?!d))/g, '.');
          return decimal ? `${formattedInteger},${decimal}` : formattedInteger;
        }}
        parser={value => value ? parseFloat(value.replace(/./g, '').replace(/,/, '.')) : 0}
        onChange={handleNumberChange}
        {...rest}
      />
      <span className='ant-input-group-addon'>€</span>
    </Input.Group>
  );
};


My question is, how can I modify the formatter function (or perhaps use another approach) to automatically append ",00" to the input value if the user enters a number without decimals? I'd like this to happen once the user has finished typing, to ensure the displayed value always represents a complete monetary amount, including cents, in a format like "1.234,00" for consistency.

Note: I'm looking for a solution that integrates smoothly with the existing InputNumber component and its formatting capabilities, without introducing significant complexity or external dependencies.


I've tried adjusting the formatter function within the InputNumber component to include a check for the presence of decimal points in the user's input. My initial approach was to split the input value by the decimal separator and check if the decimal part exists. If not, I attempted to append ",00" to the string. Here's a simplified version of what I attempted:

dataTransfer.dropEffect doesn’t work in dragenter event handler

I want to figure out whether dataTransfer.dropEffect should work both in dragover and dragenter event handlers, and why it doesn’t work in dragenter.

In this example I set e.dataTransfer.dropEffect to “none” both in dragover and in dragenter event handlers one by one. In case of dragover it works and doesn’t allow drop, but when I comment it in dragover and set dropEffect in dragenter, it doesn’t work and allows drop.

Although HTML Drag and Drop API documentations states that this can be configured in either of them.

For the dragenter and dragover events, dropEffect will be initialized based on what action the user is requesting. How this is determined is platform specific, but typically the user can press modifier keys such as the alt key to adjust the desired action. Within event handlers for dragenter and dragover events, dropEffect should be modified if a different action is desired than the action that the user is requesting.

The thing is that dragover event fires incomparably more often, so I am thinking the function is better to be called in dragenter event handler rather than in dragover.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla JS Drag and Drop</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <style>
        .dropTarget {
            width: 400px;
            aspect-ratio: 1;
            background-color: teal;
            margin: 10px 0;
        }
        .draggable {
            width: 400px;
            height: 40px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <main class="dropTarget"></main>
    <div class="draggable" draggable="true"></div>
    <script>
        const target = document.querySelector("main")
        target.addEventListener("dragenter", e => {
            e.dataTransfer.dropEffect = "none"
        })
        target.addEventListener("dragover", e => {
            e.preventDefault()
            // e.dataTransfer.dropEffect = "none"
        })
    </script>
</body>
</html>

I tried to call the same operation in both dragover and dragenter event handlers, to understand the issue. And HTML Drag and Drop API documentation didn’t help.

Thank you in advance for your ideas!