Category: javascript

A web page made of JSP was run by Tomcat.

What I’m curious about is…

Can Javscript output log files (tomcat/logs/*.log) in real time?

“console.log” as a file or… is there any other way?

I’m using FeathersJS and want to export an Excel chart using exceljs, but it gives an error ‘worksheet.addChart is not a function.’ What should I do?
This is my code, which receives JSON to create an Excel file and includes style settings.

async create(data, params) {
    console.log(data);
    const { filename } = data;

    const workbook = new ExcelJS.Workbook();

    // Iterate over each sheet in the data object
    for (const sheetName in data) {
      if (sheetName !== 'filename') {
        const sheetData = data[sheetName];
        const worksheet = workbook.addWorksheet(sheetName);

        // Add chart if specified
        if (sheetData.chart) {
          const chartSheet = workbook.addWorksheet('Chart');
          const chart = chartSheet.addChart({
            name: sheetName,
            title: sheetData.chart.title,
            ref: 'A1:B4', 
            rows: [
              { cell: 'A1', label: 'Name' },
              { cell: 'B1', label: 'Value' },
              ...sheetData.chart.map((item, index) => ({ cell: `A${index + 2}`, label: item.name })),
              ...sheetData.chart.map((item, index) => ({ cell: `B${index + 2}`, label: item.value })),
            ],
            chart: 'bar',
          });

          // Set the size and position of the chart
          chartSheet.addImage(chart, {
            tl: { col: 5, row: 1 },
            br: { col: 15, row: 20 },
          });
        }
      }
    }

    // Save the Excel file
    const filePath = `./public/${filename}.xlsx`;
    await workbook.xlsx.writeFile(filePath);

    // Return the file path
    return { path: filePath };
  }

//1st Selector
cy.get('div.d-flex.justify-content-between.undefined > button.button.button-filled').contains('Yes, delete user');

//2nd selector
cy.get('div.modal.fade.show > div > div > div > div:nth-child(3) > button.button.button-filled').contains('Delete User');

So i got 2 selector, can you help me to make if/else condition, if the 1st condition not working then run the 2nd selector?

thank you!

As we all know that linked list item insertion takes O(1) time irrespective of position while that of array is O(n) depending on position for which worst case is O(n), first position and best case is O(1), last position.

I have checked this in VS Code and surprised to find that insertion in linked list turned out to be 3 times slower that that for array even when placing the item in starting positions. Why is this so?

class Linkedlist{
    constructor(){
        this.head = null;
        this.size = 0;
    }
    add(d){
        this.head = new Node(d, this.head);
        ++this.size;
    }
    displace(){
        let d = this.head;
        this.head = d.next;
        --this.size;
        return d.data;
    }
    place(d){
        if(this.head){
            if((this.head).data >= 14)
                this.add(d);
            else{
                let pre = this.head;
                let cur = pre.next;
                while(cur && (cur.data<14)){
                    pre = cur;
                    cur = cur.next;
                }
                pre.next = new Node(d,cur);
                ++this.size;
            }
        }else
            this.add(d);
    }
}

class Node{
    constructor(data, next=null){
        this.data = data;
        this.next = next;
    }
}

let A = new Linkedlist();
A.add(29);
A.add(28);
A.add(27);
A.add(26);
A.add(25);
A.add(24);
A.add(23);
A.add(22);
A.add(21);
A.add(20);
A.add(19);
A.add(18);
A.add(17);
A.add(16);
A.add(15);
A.add(14);
A.add(13);
A.add(12);
A.add(11);
A.add(10);
const start = performance.now();
A.place(13.5);
const end = performance.now();
console.log(end-start);

So, here I have implemented a linked list using classes concept and added all elements at beginning before starting timer. And the place function is used to interate the list till either it reaches the last node or find the data value to be equal to or greater than 14, there it places 13.5.

let A = [10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29];
let j;
const start = performance.now();
for(j=0; j<A.length; j++){
    if(A[j]>=14)
        break;
}
A.splice(j,0,13.5);
const end = performance.now();
console.log(end-start);

Similarly, I have done this for array.

Time for Linked List

Time for Array

I have my graph working, my problem is that I have a cutout: 120, that measurement is global,

I need to add a different cutout number on a tablet, for example:
if it is mobile, it is: cutout: 120
and on a tablet: cutout: 40.

This is part of the code that I need to improve so that it works as required:

`const options = {

      type: chartType,
      data: {
        labels: data.labels,
        datasets: [
          {
            fill: false,
            backgroundColor: data.colors,
            borderColor: data.colors,
            data: data.values,
            borderWidth: 0,
            responsive: true,
            maintainAspectRatio: true, 
            cutout: 120, 
          },
        ],
      },
      options: {
        responsive: true,
        // Maintain the original canvas aspect ratio (width / height) when resizing.
        maintainAspectRatio: true,
        plugins: {
          tooltip: {
            enabled: false, //hover 
            displayColors: false,
          },
          legend: {
            display: false,
          },
        },
      },
    }`

thank you very much if someone can please help me.

I want to have a website to give distance training, so I’m considering that and for quite a few days I’ve had this error, I searched a lot on several forums but the solutions are not adapted to my reality .
I just asked you to help me to have the site live on vercel.

First of all, I would like to thank you for each response.

locally everything works very well but I always got this message during deployment on vercel, look at my package.json file.

    {
  "name": "elearniv",
  "version": "1.4.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "model:generate": "env-cmd sequelize-cli model:generate",
    "seed:generate": "env-cmd sequelize-cli seed:generate",
    "seed": "env-cmd sequelize-cli db:seed:all",
    "migrate": "env-cmd sequelize-cli db:migrate",
    "migrate:rollback": "env-cmd sequelize-cli db:migrate:undo",
    "migrate:rollback:all": "env-cmd sequelize-cli db:migrate:undo:all"
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@etchteam/next-pagination": "^3.5.4",
    "@mantine/core": "^6.0.0",
    "@mantine/hooks": "^6.0.0",
    "@mantine/rte": "^5.10.5",
    "axios": "^1.6.7",
    "bcrypt": "^5.0.1",
    "framer-motion": "^7.3.4",
    "fslightbox-react": "^1.6.2-2",
    "html-to-image": "^1.10.8",
    "js-cookie": "^3.0.1",
    "jsonwebtoken": "^9.0.2",
    "jspdf": "^2.5.1",
    "mysql2": "^2.3.3",
    "next": "^14.1.0",
    "nodemailer": "^6.7.7",
    "nookies": "^2.5.2",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-accessible-accordion": "^5.0.0",
    "react-confirm-alert": "^3.0.6",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.3.0",
    "react-jutsu": "^3.0.3",
    "react-loading-skeleton": "^3.1.0",
    "react-redux": "^8.0.2",
    "react-sticky-box": "^1.0.2",
    "react-stripe-checkout": "^2.6.3",
    "react-tabs": "^6.0.0",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "sass": "^1.54.0",
    "save": "^2.9.0",
    "sequelize": "^6.21.3",
    "stripe": "^10.2.0",
    "swiper": "^9.1.1",
    "uuid": "^8.3.2",
    "uuid-validate": "^0.0.3"
  }
  
}

I am very new to TypeScript development, I wanted to achieve the following make hasRoleName function available globally, not locally with my variable businessAdvisorRole
passed in as parameter, if not passing the variable in the value of it "Business Advisor role" in the function, I want to achieve best practice and clean code. Please advise, below is my code. This is for Dynamics 365.

export function checkBusinessAdvisorRole() {

    var businessAdvisorRole = "Business Advisor role";
    isBusinessAdvisorRole = false;

    //Store Security Roles
    var userRoles = Xrm.Utility.getGlobalContext().userSettings.roles;
    var hasRole = false;

    //seperate the function
    userRoles.forEach(function hasRoleName(item, index) {
        //Check passed in value for role[].name match 
        if (item.name === businessAdvisorRole) {
            //match found set return value to true
            isBusinessAdvisorRole = true;
            hasRole = true;

            formContext.getControl<Xrm.Controls.StringControl>("kc_name").setDisabled(false);
        };
    });

}

I need help with getting these two things working. I want the snake to collide with the walls and itself. I also want the snake to have a gradient that goes from light green to dark green based on how long the snake is.

here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Test 1</title>
</head>
<body>
    <canvas id="canvas" width="540" height="540" style="border: 1px solid black;"></canvas>
</body>
<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    var x = 0;
    var y = 0;
    let w = canvas.width;
    let h = canvas.height;
    let size = 30;
    let foodX = Math.floor(Math.random() * w/size);
    let foodY = Math.floor(Math.random() * h/size);
    foodX *= size;
    foodY *= size;
    let vx = 0; //velocity x
    let vy = 0; //velocity y
    var updateRate = 300;
    var snakeBody = [];

    function update() {

        x += vx;
        y += vy;

    ctx.clearRect(0, 0, w, h);
    //draw the food
    ctx.fillStyle = "red";
    ctx.fillRect(foodX, foodY, size, size);
    //draw the snake
    ctx.fillStyle = "green";
    ctx.fillRect(x, y, size, size);
    for (let i = 0; i < snakeBody.length; i++) {
        ctx.fillRect(snakeBody[i][0], snakeBody[i][1], size, size);
    }
    //move body of snake
    for (let i = snakeBody.length-1; i > 0; i--) {
        snakeBody[i] = snakeBody[i-1];
    }
    if (snakeBody.length) {
        snakeBody[0] = [x, y];
    }

        //collision with food
        if(foodX == x && foodY == y) {
        //add snake body
        snakeBody.push([foodX, foodY]);

        //move the food
        foodX = Math.floor(Math.random() * w/size);
        foodY = Math.floor(Math.random() * h/size);
        foodX *= size;
        foodY *= size;
        }

        //next frame
    setTimeout(function(){
        requestAnimationFrame(update);
    }, updateRate);
    };

    //controls
    addEventListener("keydown", function(e) {
        if (e.code == "ArrowRight" && vx != -size) {
            vx = size;
            vy = 0;
        }
        if (e.code == "ArrowLeft" && vx != size) {
            vx = -size;
            vy = 0;
        }
        if (e.code == "ArrowUp" && vy != size) {
            vx = 0;
            vy = -size;
        }
        if (e.code == "ArrowDown" && vy != -size) {
            vx = 0;
            vy = size;
        }
    }); 

    //initialize game
    update();
</script>
</html>

I have tried to implement a few of these but nothing seems to be working for me.

I’m currently facing an issue while attempting to sort a list of items based on a custom priority order in JavaScript. Here is a simplified version of the code:

const items = [
    {
        "label": "Some Help",
        "type": "Help",
    },
    {
        "label": "Some Group",
        "type": "Group",
    },
    {
        "label": "Some Page",
        "type": "Page",
    },
    {
        "label": "Some Tweet",
        "type": "Tweet",
    },
];

const PRIORITY_ORDER = [
    { category: 'Tweet', priority: 1 },
    { category: 'Page', priority: 2 },
    { category: 'Group', priority: 3 },
    { category: 'Help', priority: 4 },
];

const priorityMap = new Map(PRIORITY_ORDER.map(({category, priority}) => [category, priority]));

items.sort((a, b) => {
    const priorityA = priorityMap.get(a.type) || 0;
    const priorityB = priorityMap.get(b.type) || 0;
    return priorityA - priorityB;
});

console.log(items);

I’ve created a custom priority order defined by the PRIORITY_ORDER array, and I’m attempting to sort the items array accordingly. However, the current implementation doesn’t seem to be producing the expected output.

const expectedOrder = [
    {
        "label": "Some Tweet",
        "type": "Tweet",
    },
    {
        "label": "Some Page",
        "type": "Page",
    },
    {
        "label": "Some Group",
        "type": "Group",
    },
    {
        "label": "Some Help",
        "type": "Help",
    },
];

Goodnight,

I made a responsive website, it turned out very good.

My problem is with the cell phone.

When I click on an image with my finger in the photo gallery, it opens completely on the screen, but when I zoom in to look at the details it goes to the next photo or previous photo.

How do I not go to the next or previous photos with my finger?

I want the previous or next functions only through the buttons.

When I open the photo, I want it locked to look and zoom with my finger. I don’t want it to be sensitive going or returning to the next photos.

How do I make this change in the code?

Would it be through my “swipebox.css” file or the “jquery.swipebox.min.js” file??

Thank you very much for the help.

I have no idea where to start to resolve this issue.

I am trying to get the endpoint from a page in my Next.js application using the url parameters, but it keeps coming back undefined even though I can see the endpoint in the browser.

I have tried using usePathname from next/navigation, and that works but this requires usage in a Client Component, which I can’t do because I need to use async/await for the component because it is fetching data from a database.

In app/category/[id]/page.tsx:

const CategoryPage = async (props: Props, { params }) => {
  ...
  let notes = await getNotes(params.id);
}

The getNotes function is a request function in a utils folder which fetches my api route at app/api/[id]/route.ts.

I have also tried changing the file structure for the api route to include “category” like this: app/api/category/[id]/route.ts, but this had no effect.

I start the app with npm run dev. When I try to access the category page, the expected path shows in the browser, but it instead loads the error page that says params is undefined.

Electron apps were historically hard to package in Nix (see this cool meme), but apparently it is not true anymore.

How can I package an electron application in nix, and quickly develop npm-related things in NixOs?

I am encountering an issue with a Node.js script that uses the ftp library to upload a file to an FTP server. The script should close the connection and terminate once the file upload reaches 100%, but it’s not happening as expected. Below is the relevant portion of my code where I believe the issue might be occurring:

async function uploadToFTP() {
  const client = new ftp.Client();
  client.ftp.verbose = false;

  try {
    console.log("Connecting to FTP...");
    await client.access({
      host: process.env.FTP_HOST,
      user: process.env.FTP_USER,
      password: process.env.FTP_PASSWORD,
      secure: process.env.FTP_SECURE === "true",
    });
    console.log("Connected to FTP.");

    const remoteDir = process.env.REMOTE_DIR || "/DataBackup";
    console.log(`Ensuring directory ${remoteDir} exists on FTP...`);
    await client.ensureDir(remoteDir);
    await client.clearWorkingDir();

    const fileSize = fs.statSync(zipPath).size;
    const uploadBar = new ProgressBar("Uploading [:bar] :percent :etas", {
      complete: "=",
      incomplete: " ",
      width: 40,
      total: fileSize,
    });

    client.trackProgress((info) => {
      uploadBar.tick(info.bytes);
    });

    console.log(`Starting upload of ${zipPath} to FTP...`);
    await client.uploadFrom(zipPath, path.basename(zipPath));
    console.log("Upload completed.");
  } catch (err) {
    console.error("Failed to upload zip to FTP server:", err);
  } finally {
    console.log("Closing FTP connection...");
    client.trackProgress(() => {});
    try {
      await client.close();
      console.log("FTP connection closed.");
    } catch (closeError) {
      console.error("Error closing FTP connection:", closeError);
    }
    console.log("uploadToFTP completed.");
  }
}

The uploadFrom method is used to upload the file, and I’m using client.trackProgress to update a progress bar which indicates the upload progress. The promise returned by uploadFrom should resolve after the file is fully uploaded, allowing the script to proceed to log “Upload completed” and then close the connection.

However, even after the progress bar hits 100% and “Upload completed” is logged, the script does not terminate as it should, indicating that the connection might not be closing properly.

I am creating a flask web app. My javascript code is supposed to send data and fetch a response from my Flask server and adjust the innerHTML of the current page with the response data. Currently upon response from the web server the entire page gets replaced with the following:
{‘curr_size’: ‘1’, ‘max_size’: ‘5’, ‘recurring’: ‘on’}
So it is missing the field ‘dateStr’ I have tried setting it as a ‘global variable’ but it is still not appearing, how can I fix this?

Here is my code:

<!--flatpickr date picker-->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  let globalVariable = null


  config = {
    enableTime: true,
    dateFormat: "H:i d-m-Y",
    altInput: true,
    altFormat: "F j, Y h:i K",
    minDate: "2024-01",
    onValueUpdate: function (selectedDates, dateStr, instance) {
      globalVariable = dateStr
      document.getElementById('current_availability').innerHTML = `<h3> Select class information:</h3>
        <div id='new_container'>
            <form>
                    <input type='text' id='curr_size'>Current class size</input>
                    <input type='text' id='max_size'>Maximum class size</input>
                    <input type='checkbox' id='recurring'>Recurring</input>
                    <button id='new-form-button' onclick="takeValues(${dateStr})"">
            </form>
        </div>`;

  document.getElementById("new-form-button").addEventListener("click", function (event) {
    event.preventDefault()
  });
 }
}
flatpickr("input[type=datetime-local]", config);

function takeValues(globalVariable) {
    var send_data = {
      curr_size: document.getElementById('curr_size').value,
      max_size: document.getElementById('max_size').value,
      recurring: document.getElementById('recurring').value,
      dateStr: globalVariable,
    }
const url = "{{ url_for('views.fetch_schedule') }}"
fetch(url, {
  cache: "no-cache",
  method: "POST",
  headers: new Headers({
    "Content-Type": "application/json"
  }),
  credentials: "include",
  body: JSON.stringify(send_data),
})


  .then((resp) => {
    // console.log(resp);
    //error checking
    //200-299
    if (!resp.ok) throw new Error('was not a valid response');
    return resp.text(); //method to extract JSON string and convert it to an Object
  })
  .then((dataobj) => {
    document.getElementById('current_availability').innerHTML = `<h3>${dataobj}</h3>`;

  })
  .catch((err) => {
    console.warn(err.message);
  });
}

</script>

{% endblock %}

I am trying to make the navigation work on first click of the button. But for some reason the button won’t work on first click and works fine on second click

function authenticate() {
  let x = document.getElementById('aut').value;
  if (x == 'code') {
    document.getElementById('myButton').onclick = function() {
      window.location.href = 'https://www.google.com';
    };
  } else {
    alert('Please check your password')
  }
  console.log('If this message appears in the console, JavaScript is running.');
}

<div>
  <label for="auth">Password:</label>
  <input type="password" name="auth" id="aut">
  <button id="myButton" onclick="authenticate()">Authenticate</button>
</div>