Category: javascript

Category Added in a WPeMatico Campaign

How to output variable values from addeventlistener [duplicate]

let xc = null;
let yc = null;
var el = document.getElementById("canvas");

el.addEventListener('mousemove', function(f) {
  console.log('Coordinates: x=' + f.clientX + ' y=' + f.clientY);
  xc = f.clientX;
  yc = f.clientY;
  return xc;
  return yc;
})

console.log(xc, yc);

As a result, when you touch the screen, the coordinates are shown, but are not updated separately via console.log

Marker custom does not work correctly on the static map of Google Maps

I’m trying to create a static image to replace the dynamic map in Google Maps. I’m having problems when creating the image because the icon I’m using does not recognize it to generate the marker inside the map, in this case this image https://statics.radissonhotels.com/main/img/icons/markers/rdb.png , however if I use another image, like this https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico, it generates the marker correctly.

I also have problems with the signature since it does not recognize my credentials, however, if I generate the image with this app https://staticmapmaker.com/google/, adding my api key and signature, it does not give error, except for the marker image. Any idea what could be happening?

I’m using vue.js 2

I changed the icon size to 48x64px and 2.83KB and it doesn’t work either.

What to do with a 504 Bad Gateway response from 3rd party API using Javascript?

I have a function that calls a 3rd party API (via the function checkPosition) which sometimes fails after a 30 second timeout.

I have the function in a try/catch block, but the 504 crashes the program.

try {
  // Check if position is still open
  if (!(await checkPosition(client, item.dealID))) {
    // If position has been manually closed
    console.log(`Position with period ${key} has been manually removed.`);
    continue;
  }
 
  await closePosition(client, item.epic, item.purchaseAmount, direction);
}
catch (err)
{
  console.error(err);
  res.redirect("/");
}

I tried to catch the 504 but this is not working for me.

Removing shapes in Google Maps with JavaScript

Namely, I’m working on an app that allows users to mark certain parts of the land on the map (by drawing shapes) and then get feedback information about the size of that land. Also, there is an option to exclude certain parts on the marked land (for example if there is a house and they don’t want to calculate it in the total results).

Now, the part where I got stuck is this: I’ve created X buttons that would allow the users to easily remove the whole shapes for the marked land (colored with black) or for the excluded parts (colored with red). Still, clicking on those X buttons triggers no action for some reason.

enter image description here

I believe that the cause lies in the functions, but I cannot confirm that. I can only forward the ones I’ve came up with that doesn’t work:

Here are the functions I’ve tried using for removing the land and exclusion shapes:

function removeLand(landIndex) {
    const land = areas[landIndex];
    // Remove the overlay from the map
    land.overlay.setMap(null);

    // Remove all exclusion overlays from the map
    land.exclusions.forEach(exclusion => exclusion.overlay.setMap(null));

    // Remove the land from the areas array
    areas.splice(landIndex, 1);

    // Update the display
    updateDisplay();
}

function removeExclusion(landIndex, exclusionIndex) {
    const exclusion = areas[landIndex].exclusions[exclusionIndex];
    // Remove the exclusion overlay from the map
    exclusion.overlay.setMap(null);

    // Remove the exclusion from the exclusions array
    areas[landIndex].exclusions.splice(exclusionIndex, 1);

    // Update the display
    updateDisplay();
}

Now, since I cannot guarantee that the issue lies in these functions, maybe it is in some other parts of my code, I will here share the GitHub page where I’ve updated the HTML and JS, and they are currently configured:
https://github.com/NoToolsNoCraft/Google-Map-Land-Size-Calculator/tree/main/Version%20with%20the%20X%20button%20not%20working

Material Table React – Apply To All and Apply To Group BY

I want to Apply, “Apply To All” and “Apply to GroupBy” for the rows I’m using with the use of Material UI.

  1. I want to create a button “Apply to All”. When the user Edit on a row and update all the columns and when we click on “Apply to All” it should apply to all the rows (ex: In the below code, I have two rows, it should update all the 2 rows)

  2. I want to create a button “Apply to Group”. When the user drag a column and get the grouped value (ex: I grouped by Name and it has only one row. When I click on Apply to Groupby it should update only one row)

I want to show one button at a time. If the user start drag, it should show only “Apply to Group” or by default it should show “Apply to All”

function ConditionalActions() {
  return (
    <MaterialTable
      title="Conditional Actions Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
       options={{
        grouping: true
      }}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        },
        
        rowData => ({
          icon: 'delete',
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
          disabled: rowData.birthYear < 2000
        })
      ]}
    />
  )
}

How do I use different config files for environment variables, ensuring that these files are distinct for development and production environments?

I’m currently developing a NestJS application and want to manage environment variables using different configuration files for development and production environments. I understand that it’s common practice to separate configurations to avoid accidentally exposing sensitive information or misconfiguring settings.

I would like to know the best approach to achieve this in a NestJS application. Specifically, I’m looking for guidance on:

How to create and structure separate configuration files (e.g., .env.development and .env.production).
How to load the appropriate configuration file based on the environment (e.g., using NODE_ENV).
Any recommended libraries or modules to facilitate this process (e.g., @nestjs/config).

Audio API Not Playing on Mobile Devices in Next.js Application

I’m working on a Next.js application that includes playing audio using the HTML5 Audio API. It works perfectly on desktop browsers, but I’m encountering issues when trying to play audio on mobile devices (both iOS and Android). The audio does not play, and there are no error messages in the console.

Here’s a simplified version of the code I’m using:

import { useEffect } from "react"

const AudioPlayer = () => {
  useEffect(() => {
    const audio = new Audio("/path/to/audio/file.mp3")
    audio.play().catch(error => {
      console.error("Error playing audio:", error)
    });
  }, []);
  return <div>Audio Player</div>
};

export default AudioPlayer

I’ve tried the following solutions without success:

  • Ensuring the audio file path is correct.
  • Testing different audio formats (MP3, WAV).
  • Using user interaction to trigger the audio play (e.g., button click).
  • Checking for mobile-specific restrictions or permissions.

Has anyone faced a similar issue or have any suggestions on how to resolve this?

Thanks in advance!

Cypress TypeError : Cannot read properties of undefined (reading ‘then’)

I have this function below :- checkStatusCode

I check if a response is OK then I try to return a value and based on that I try to visit the URL (ex:- if response status is 200)

  checkStatusCode(href) {
    cy.request({
      url: href,
      failOnStatusCode: false,
    }).then((response) => {
      expect(response.status).to.eq(200);
      return true;
    });
  }

This is how I call the function, but I am getting following Cypress error

Cannot read properties of undefined (reading ‘then’)

even if the assertion expect(response.status).to.eq(200) passes, what am I doing wrong here?

navigatetoHomepage(url) {
    this.checkStatusCode(url).then((isStatus200) => {
      if (isStatus200) {
        cy.visit(url);
      } else {
        cy.log("Fail");
      }
    });
  }

React ApexCharts Heatmap Can’t display months on x-axis

I am trying to replicate this post using the linked code in the first answer. But I cannot display months in my chart. My goal is to create a a heatmap very similar to Github’s contributions chart. This is the result result Here is my code:

import { useParams } from "react-router-dom/cjs/react-router-dom.min";
import React, { useState, useEffect, useRef } from "react";
import ReactApexChart from "react-apexcharts";

export default function TeamMember() {
  const { TeamId, UserId } = useParams();

  const chartOptions = {
    chart: {
      height: 350,
      type: "heatmap",
    },
    
    colors: ["#008FFB"],
    title: {
      text: "User Contributions",
    },

    xaxis: {
      type: "datetime",
      labels: {
        format: "MMM",
        showDuplicates: false,
      },
    },
  };

  const chartSeries = [
    {
      name: "Sun",
      data: [
        { x: "04-26-2020", y: 0 },
        { x: "05-03-2020", y: 40 },
        { x: "05-10-2020", y: 40 },
        { x: "05-17-2020", y: 40 },
        { x: "05-24-2020", y: 40 },
      ],
    },
    {
      name: "Mon",
      data: [
        { x: "04-27-2020", y: 10 },
        { x: "05-04-2020", y: 40 },
        { x: "05-11-2020", y: 40 },
        { x: "05-18-2020", y: 40 },
        { x: "05-25-2020", y: 40 },
      ],
    },
    {
      name: "Tue",
      data: [
        { x: "04-28-2020", y: 20 },
        { x: "05-05-2020", y: 40 },
        { x: "05-12-2020", y: 40 },
        { x: "05-19-2020", y: 40 },
        { x: "05-26-2020", y: 40 },
      ],
    },
    {
      name: "Wed",
      data: [
        { x: "04-29-2020", y: 40 },
        { x: "05-06-2020", y: 40 },
        { x: "05-13-2020", y: 40 },
        { x: "05-20-2020", y: 40 },
        { x: "05-27-2020", y: 40 },
      ],
    },
    {
      name: "Thu",
      data: [
        { x: "04-30-2020", y: 50 },
        { x: "05-07-2020", y: 40 },
        { x: "05-14-2020", y: 40 },
        { x: "05-21-2020", y: 40 },
        { x: "05-28-2020", y: 40 },
      ],
    },
    {
      name: "Fri",
      data: [
        { x: "05-01-2020", y: 60 },
        { x: "05-08-2020", y: 40 },
        { x: "05-15-2020", y: 40 },
        { x: "05-22-2020", y: 40 },
        { x: "05-29-2020", y: 40 },
      ],
    },
    {
      name: "Sat",
      data: [
        { x: "05-02-2020", y: 70 },
        { x: "05-09-2020", y: 40 },
        { x: "05-16-2020", y: 40 },
        { x: "05-23-2020", y: 40 },
        { x: "05-30-2020", y: 40 },
      ],
    },
  ];

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={chartOptions}
          series={chartSeries}
          type="heatmap"
          height={350}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );
}

Any help on this issue or anything else related to creating this chart would be really helpful.

Google Analytics JavaScript not executed by CefSharp of PupeeterSharp

1.Background

The code snippets in sections 2.1 and 2.2 below aim at executing Google Analytics JavaScript from a C# console application that uses a headless web browser to load the following HTML page hosted on a web server (let’s say https://my.server.com/index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title Placeholder</title>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag()
        {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());
        gtag('config', 'G-**********');
    </script>
</head>
<body>Body Placeholder
</body>
</html>

When the above mentioned HTML page is loaded from a web browser such as Google Chrome, its Google Analytics JavaScript gets executed as expected (Google Analytics server reports that this web page was loaded).

2. C# Code snippets

2.1. Using Puppeteer Sharp

using System.Threading.Tasks;
using PuppeteerSharp;

class Program {
    static async Task Main(string[] args) {        
        await new BrowserFetcher().DownloadAsync();
        var browser = await Puppeteer.LaunchAsync(new LaunchOptions {Headless = true});
        var page = await browser.NewPageAsync();
        page.DefaultNavigationTimeout = 0;
        page.DefaultTimeout = 0;
        var navigation = new NavigationOptions {
            Timeout = 0,
            WaitUntil = new[] {
                WaitUntilNavigation.DOMContentLoaded,
                WaitUntilNavigation.Networkidle0
            }
        };
        await page.GoToAsync("https://my.server.com/", navigation);
        await browser.CloseAsync();
    }
}

2.2 Using CefSharp

using CefSharp;
using CefSharp.WinForms;

class Program {
    static void Main(string[] args) {
        var settings = new CefSettings();
        Cef.Initialize(settings);
        var browser = new ChromiumWebBrowser("https://my.server.com/");
        Cef.Shutdown();
    }
}

3. Question

Why is the Google Analytics JavaScript of the https://my.server.com/index.html page not executed (i.e. Google Analytics server does not report that this web page was loaded) when running the Main methods in sections 2.1 or 2.2
?

Programmatically add label with URL

I am currently adding a label with URL called UAT Template based on the dropdown item select. The label should not be created if already exist.

  • the link is not open in the new tab

  • The label for some reason not created

      function AddURL(){

  let lblTemplate = document.getElementsByClassName("ard-FormField-description")[8];
  //Check if the lblTemplate contain word 'UAT Template location'
  if(lblTemplate.innerHTML !== '' && lblTemplate.innerHTML.toLowerCase().indexOf('UAT Template Location') > -1){
      if (lblTemplate.indexOf(lblTemplate) == -1) {
          // create anchor link element
          let link = document.createElement("a")

          // Create txt
          let txt = document.createTextNode("UAT Template Location")

          //append txt to anchor element
          link.appendChild(txt)

          // set the title
          link.title =" Click to UAT Template Location";

          // set the href property
          link.href = "https://gampoendev.com/:w:/r/teams/teamcollab/Shared%20Documents/Templates/";
          link.setAttribute('target','_blank');

          // get text to add link to

          lblTemplate.appendChild(link)
      }
      else {
          return;
      }
  }

    }