Category: javascript

On Firefox for Android / Fennec (newest version) I cannot subscribe to push-notifications.
You can check it out on cleverpush.com.
It’s the same problem as mine.

My script subscribe.js should do the following:

1. Get permissions for sending Notifications – works fine

2. check for an existing subscription of this browser / device (ServiceWorkerRegistration.pushManager.getSubscription();) – this works fine on Safari, Chrome and Firefox for Windows, Linux and macOS. It fails on Firefox for Android / Fennec (F-Droid).
   The error is an AbortError: DOMException: Could not retrieve push subscription.. The same error happens on cleverpush.com with Firefox for Android / Fennec.

3. When the user clicks a Button “Register for Push-Notifications”, it executes const subscription = await ServiceWorkerRegistration.pushManager.subscribe(...);. Same error like in (2.)

Many thanks if someone can tell me “this is a bug from mozilla” or “you made some mistake, here the explanation” or “this question has already answers here: …”!

https://openlayers.org/en/latest/examples/heatmap-earthquakes.html

When I reviewed the API documentation for the HeatmapLayer, I couldn’t find any explanation about the legend. While searching for a solution, I managed to create a gradient legend manually, but it doesn’t seem to accurately represent the values derived from the data. Specifically, the part where ctx.fillText(‘7.0’, 25, 140); is used to display min, median, and max values separately makes me question if it’s a proper representation of the heatmap’s data. Therefore, I am looking for a way to implement a legend that reflects changes well when the data provided by OpenLayers changes while using the HeatmapLayer.

const vector = new HeatmapLayer({
  source: new VectorSource({
    url: 'data/kml/2012_Earthquakes_Mag5.kml',
    format: new KML({
      extractStyles: false,
    }),
  }),
  blur: parseInt(blur.value, 10),
  radius: parseInt(radius.value, 10),
  weight: function (feature) {
    // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
    // standards-violating <magnitude> tag in each Placemark.  We extract it from
    // the Placemark's name instead.
    const name = feature.get('name');
    const magnitude = parseFloat(name.substr(2));
    return magnitude - 5;
  },
});


const updateLegend = function () {
  const canvas = document.getElementById('legend');
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, 0, 150);

  // Example color stops for the legend
  gradient.addColorStop(0, 'rgba(0, 0, 255, 1)');
  gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)');
  gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 20, 150);

  // Add labels for magnitude values
  ctx.fillStyle = '#000';
  ctx.font = '12px Arial';
  ctx.fillText('5.0', 25, 10);
  ctx.fillText('9.0', 25, 75);
  ctx.fillText('7.0', 25, 140);
};


    <div id="legend-container">
      <canvas id="legend" width="150" height="150"></canvas>
    </div>

here’s what i tried.

https://codesandbox.io/s/heatmap-earthquakes-forked-p6tx9x?file=/main.js:2561-2591

manually drawn gradient legend

There was a project that required me to calculate months, so I used setInterval to update it every month, but there was something abnormal, as it did not count it as a month, but rather counted it as if it were less than seconds. Here is the code.

setInterval(function(){}, (1000 * 60 * 60 * 24 * 30));

I tried to change the number, but the account remains the same and the problem is not solved

While creating an award in the Manage Award Module, the date field is accepting past years without any restrictions. Users are able to select dates that are significantly far in the past, which is not a desired behavior for this module.

I want to make a function of checking if we write a string so it is anagrams of each other or not?

I am expecting a solution or a approach to solve this problem. I have tried but I am not uderstaning that how it will check the string as it is anagram or not.

I’m learning React.js and I’m creating a demo.

I have created a Login page. Now I want to develop the functionality that if I’m using admin’s credentials then I should change the current page layout to listing of employees. And if I’m using the employee’s credentials then I should change page to show the details of that employee.

Currently it’s not able to print content after proper login.

App.js

import { useState } from 'react';

import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';

function App() {
  let [userEmail, setEmail] = useState('[email protected]'),
    [userPassword, setPassword] = useState('password');

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    for (let user of USER_DATA) {
      if (user.userEmail === email) {
        if (user.password === password) {
          if (user.isAdmin) return <AdminPage />;
          else return <EmployeePage />;
        } else {
          console.log('Password not matched ..... ');
        }
      } else {
        console.log('Email not matched ..... ');
      }
    }
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <p className='P'>Welcome there!</p>
        <div
          id='input-div'
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '20px',
            alignContent: 'left',
          }}
        >
          <label>Email</label>
          <input
            type='email'
            id='email'
            onChange={handleEmail}
            placeholder={userEmail}
            // value={userEmail}
            required
          />
          <label>Password</label>
          <input
            type='password'
            id='password'
            onChange={handlePassword}
            // value={userPassword}
            placeholder={userPassword}
            required
          />
        </div>

        <div style={{ display: 'flex', margin: '10px' }}>
          <button
            className='Button'
            onClick={() => handleLogin(userEmail, userPassword)}
          >
            Login
          </button>
          <button className='Button'>Registration</button>
        </div>
      </header>
    </div>
  );
}

export default App;

userData.js

const userData = [
  {
    userId: 1,
    userEmail: '[email protected]',
    password: 'password',
    isAdmin: true,
  },
];

export default userData;

Admin.jsx

export default function AdminPage() {
  return (
    <>
      <p>Admin Login</p>
    </>
  );
}

Thank for in advance.

I have a Vue.js application and I need to create a progress bar. I’m using SVG because other options won’t work. How can I divide an SVG semicircle into equal parts? I get a solid line. I tried to manipulate the stroke-dasharray attribute, but it didn’t work.

I need to get this look:

I have achieved this so far

I am constructing a dialog in pdf javascript, which contains multiple groups of radio buttons.
What i don’t get is how to set a default selection for any one group.
The example i have attached below is shortened to only one radio button group.
I do believe that using a check box for this task would probably be better it is not my decision to make.

var oDlg = {
        result: "cancel",
        DoDialog: function() { return app.execDialog(this); },
       
        complete: false,

        commit: function(dialog) {
            var result = dialog.store();

            this.complete = result["completeTrue"];
        },

        description: {
            name: "ADialog", 
            elements: 
            [ 
                {
                    type: "view",
                    elements:
                    [
                        {
                            type: "view",
                            align_children: "align_row",
                            elements:
                            [
                                {
                                    name: "Is complete?", 
                                    type: "static_text",
                                    char_width: 15,
                                },
                                {
                                    item_id: "completeTrue", 
                                    group_id: "complete", 
                                    type: "radio", char_width: 15,
                                    name: "Yes" 
                                },
                                {
                                    item_id: "completeFalse",
                                    group_id: "complete",
                                    type: "radio",
                                    char_width: 15,
                                    name: "No" },
                            ]
                        },
                    ]
                },
                { type: "ok_cancel", },
            ]
        }
    };

I tried checked and selected in various different ways, and couldn’t get that to work. Googling resulted in me trying this.getField("completed").value = someIndex; which also did nothing.
The expected result is that instead of the “Yes” radio button being selected when the dialog opens, the “No” button is selected.

I have a problem requiring the account_id field when mode_of_payment has a value.

My code below still doesn’t make the account_id required when mode_of_payment has been filled out. mode_of_payment isn’t a required field but when you fill it out, the account_id should become required

import { array, boolean, object, string } from 'yup';

const validationSchema = object().shape({
  remarks: string().nullable(''),
  remittance_items: array().of(
    object().shape({
      id: string().nullable(),
      mode_of_payment_id: object().shape({
        id: string().nullable(),
        name: string().nullable(),
        with_bank_details: boolean(),
      }),
      account_id: object().shape({
        id: string().when('mode_of_payment_id.id', {
          is: (id) => !!id,
          then: string().required('Select an account'),
          otherwise: string().nullable(),
        }),
        name: string().when('mode_of_payment_id.id', {
          is: (id) => !!id,
          then: string().required(''),
          otherwise: string().nullable(),
        }),
      }),
    })
  ),
});

I want to show a tooltip of MUI’s ToggleButton when it is disabled
howerver tooltip works fine when ToggleBUtton is not disabled

for disabled it breaks

 <ToggleButton value={item?.key} aria-label="left aligned" key={item?.key} disabled={true} >
             <Tooltip title="Data Not Available" >
                       <span>{item?.value}</span>
             </Tooltip>
  </ToggleButton> 

I am using MUI- both Tooltip and ToggleBUtton are MUI components
and my project is a react project.

I am importing both components as follows-

import ToggleButton from '@mui/material/ToggleButton';
import Tooltip from '@mui/material/Tooltip';

I have a reviews swiper which appears like a deck of cards for which I need custom transformations.

I am using following code, the styles are being calculated properly but they do not get applied to the swiper slides.

const reviewSwiper = new Swiper('.reviews-swiper', {
slidesPerView: 1,
spaceBetween: 0,
oneWayMovement: true,
rewind: true,
on: {
    init: function(s) {
        let rotate = -8;
        const width = s.slides[0].clientWidth;
        s.slides.forEach((slide, i) => {
            slide.style.transform = `translate3d(calc(${-width*i}px), calc(0px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(${rotate}deg) scale(1);`;
            console.log(slide.style.transform);
            rotate += 8;
        });
    }
}

});

There is an application Fast Report Online Designer, I would like to recreate a publicly available free version of this product with open source for all users, as this is a quite useful tool that would simplify the work of many workers
Question: What ways can you recommend for developing a module with drag-and-drop objects (databands) for a web application?

I’m working on Python, planning to use Django for web development
I’ve already tried to figure out dragg and drow in JS, the concept looks similar to the truth, but it’s too complicated to implement (I’m not strong in JS knowledge)
Please suggest some options for implementation
Thank you!

PS:
Fast Report example:
https://www.fast-report.com:2015/razor/Home/Designer
example screenshot:
enter image description here

I am currently developing a Win32 C++ based WebView2 program.

I am writing this post because I have a question regarding WebView2.

I know that Webview2 API provides a callback that can be handled when calling window.open.
(add_NewWindowRequested and ICoreWebView2NewWindowRequestedEventHandler)

By setting put_Handled(true) in ICoreWebView2NewWindowRequestedEventArgs obtained within the callback, or using put_NewWindow, you can open the WebView2 window that you newly create.

Alternatively, I understand that if the request is not handled, a popup created by the Edge engine itself will be displayed.
(In this case, if you enter window.chrome.webview into that window through developer tools, it will be displayed as undefined.)

Question)
About this question, popups generated by the Edge engine (NewWindowRequested not handled) window.resizeTo works fine.
window.resizeTo does not work on newly created WebView2 windows via NewWindowRequested.

Q1) Is there a way to handle that event?
(Even if I checked with Spy++, no special events(window messsge) are received in the WebView 2 popup I created.)
(It seems that windows created in the Edge engine internally receive events through some means and adjust the window through SetWindowPos.)

Q2) According to Mozilla MDN, for window.resizeTo to work, the window must be opened as a popup(not tab) and as window.open. Is the window opened with NewWindowRequested recognized as a ‘tab’? In this case, is resizeTo not working due to policy?

If there is no other way, try to handle resize natively by calling postMessage in javascript.I’ve been struggling for a long time to find a solution to this problem.

help 🙁

For pop-ups that open from the Edge engine itself
(e.g. if NewWindowRequested is not handled in WebView2 or window.open is done in Edge browser developer tools) Events like WM_WINDOWPOSCHANGING are raised.
If a pop-up is opened by directly handling NewWindowRequested in WebView2, no special window event occurs.

I am trying to read a .xlsx file in my SAPUI5 application using FileReader api.
My requirement is to read the content of the Excel. For this, I have used xlsx library to read the Excel file content.

Here I already added the library in my project and file is also getting loaded and can be seen in my project structure also available in Networks tab as I checked, before usage of the XLSX object, here is my code. Getting error at line oWorkbook = XLSX.read(aData, { type: ‘array’ })

if (sFile && window.FileReader) {
                let oReader = new FileReader();
                oReader.onload = function (e) {
                    let oArrayBuffer = e.target.result,
                        aData = new Uint8Array(oArrayBuffer),
                        oWorkbook = XLSX.read(aData, { type: 'array' }),
                        sSheetName = oWorkbook.SheetNames[0],
                        sSheet = oWorkbook.Sheets[sSheetName],
                        oExcelData = XLSX.utils.sheet_to_json(sSheet, { header: 1 });
                    if (oExcelData.length < 2) {
                        MessageBox.show(oResourceModel.getText("customerData.upload.emptyMsg"), {
                            icon: MessageBox.Icon.ERROR,
                            title: oResourceModel.getText("messageBox.title.error")
                        });
                    } else if (!this._validateColumns(oExcelData[0])) {
                        MessageBox.show(oResourceModel.getText("customerData.upload.columnsError"), {
                            icon: MessageBox.Icon.ERROR,
                            title: oResourceModel.getText("messageBox.title.error")
                        });
                    } else if (this._validateData(oExcelData)) {
                        this._uploadCustomerData(oExcelData);
                    }
                }.bind(this);
                oReader.readAsArrayBuffer(sFile);
            }

The feature works perfectly on my local system, but when I deploy it to the Development system,
the XLSX object is getting initialized as an empty object, causing the functionality to fail.

I am using “xlsx”: “0.15.1” version

I’m not sure which dependency I might be missing or if there’s a different approach I should consider.

Or is there any other way of initializing the XLSX object as it is not getting self-executed.

I already tried with latest version 0.18.5 still the same issue.
Till xlsx version 0.12.13 the functinality is working fine on both Local and Development system but after this version XLSX object is not getting initialized properly on Dev system but working perfectly on Local system.

I have a Vue application and I make requests using axios to a back end. On some pages the base url as specified in the main.js file is added to image urls but on some pages the base url is not added. It’s got nothing to do with the backend as the backend is returning the same data no matter what. So on some pages I have to manually add the base URL which is a problem. Why would axios add the base URL to some requests and others not?

As an example here are two functions that fetch data from a backend:

With this function the base URL is added

const getUserPosts = async () => {
  ready.value = false;
  try {
    const response = await axios.get(`/api/v1/posts/user/${account.id}/`);
    if (response.status == 200) {
      userPosts.value = response.data;
      ready.value = true;
    }
  } catch (error) {
    if (error) {
      console.error(error);
    }
  }
};

here is that data:

images: Array(3) [ {…}, {…}, {…} ]
​​​​​
0: Object { id: 32, image: "/storage/posts/post_22/images/CijVJgTl_400x400.png" }
​​​​​
1: Object { id: 33, image: "/storage/posts/post_22/images/2006030f6a214f3f7b546843e3d9e042.jpg" }
​​​​​
2: Object { id: 34, image: "/storage/posts/post_22/images/2498932a-fbf7-4fbf-a020-26843998a92c-original.png" }
​​​​​
length: 3

With this function the base URL is not added

const getPostsByType = (data, type) => {
  const typeObject = data.find((item) => item.type === type);
  return typeObject ? typeObject.posts : [];
};

const getConnectionPosts = async () => {
  ready.value = false;
  try {
    const response = await axios.get(`/api/v1/posts/user/${account.id}/connections/`);
    if (response.status == 200) {
      friendsPosts.value = getPostsByType(response.data, "friends");
      familyPosts.value = getPostsByType(response.data, "family");
      colleaguePosts.value = getPostsByType(response.data, "colleague");
      ready.value = true;
    }
  } catch (error) {
    if (error) {
      console.error(error);
    }
  }
};

here is that data

images: Array(3) [ {…}, {…}, {…} ]
​​​
0: Object { id: 29, image: "http://localhost:8000/storage/posts/post_16/images/167236-004-AE764A76.jpg" }
​​​
1: Object { id: 30, image: "http://localhost:8000/storage/posts/post_16/images/538376_10151400786633552_91901036_n.jpg" }
​​​
2: Object { id: 31, image: "http://localhost:8000/storage/posts/post_16/images/1898031_10152302839588708_776652840_n.jpg" }
​​​
length: 3

I just console logging the response.data so there is no manipulation of data that comes from the back end.

Any help is appreciated