Why won’t API link update when I use angular binding in ngOnInit?

Hey I am trying to bind some data (onclick) .

I can tell the data binding is working because I have placed some interpolation in the HTML to display the new value. My issue is that I am trying to use that same data to update the string of an API.

The binding works but the string to the API never gets updated. Why is that so ?

Here is my Code

This is the component where the data is coming from.

HTML


<nav class="navbar nb" role="navigation" aria-label="main navigation" >
<button  class="nav-button" (click)='myFunction()'>button</button>
</nav>
<app-info [item]="currentItem"></app-info>

TS


import { Component, EventEmitter, Output, Input } from '@angular/core';
import { ValueService } from './value.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

myFunction() {this.currentItem = 'foo'; } 

currentItem = '';
}

This is the component where the data is passed to.


import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list'; 
import { Observable } from 'rxjs';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { size } from 'lodash';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent implements OnInit {
@Input() item = ''; 

linkUrl = 'http//api.data'+this.item+'rest.of.api';

constructor(private http: HttpClient ) { }


ngOnInit(){
this.http.get(this.linkUrl).subscribe(link => {this.linkData = [link as any];});

}

}


The Data Binding works when the link URL in ngOnInit is not a factor. I was expecting the link to be updated one the button was clicked.

How can I fix this issue ?

using a library in javascript file download to browser

I have below code in my javascript file which will be downloaded to browser when user loads a html page. To run this I require CBOR decoder library. How can browser download CBOR library at run time as I am getting CBOR is undefined error. I am new to javascript, looking for help here. Thanks for your time.

// note: a CBOR decoder library is needed here.
const decodedAttestationObj = CBOR.decode(
    credential.response.attestationObject);

console.log(decodedAttestationObject);
{
    authData: Uint8Array(196),
    fmt: "fido-u2f",
    attStmt: {
        sig: Uint8Array(70),
        x5c: Array(1),
    },
}

Adjust appointment slots accoding to time

I am trying to create a appointment slots for 60 min and 90 min. I am able to do for 60 min but for 90 min i am not able to correctly create a slots. I have added a code snippet

Example 1:

  • 60-minute slots: 9–10, 10:30–11:30, 12:00–1:00, 1:30–2:30, and so on.
  • 90-minute slots: 9–10:30, 11:00–12:30, 1:00–2:30, and so on.

If a user picks a slot, let’s say a 60-minute slot from 10:30 to 11:30, the new available slots will be:

  • 60-minute slots: 9–10, 12:00–1:00, 1:30–2:30, and so on.
  • 90-minute slots: 9–10:30, 12:00–1:30, 2:00–3:30, and so on.

Example 2:

  • 60-minute slots: 9–10, 10:30–11:30, 12:00–1:00, 1:30–2:30, and so on.
  • 90-minute slots: 9–10:30, 11:00–12:30, 1:00–2:30, and so on.

If a user picks a 90-minute slot from 12:00 to 1:30, the new available slots will be:

  • 60-minute slots: 9–10, 10:30–11:30, 2:00–3:00, and so on.
  • 90-minute slots: 9–10:30, 2:00–3:30, 4:00–5:00, and so on.
       let availableSlots = [
      { start: '9:00', end: '10:00', duration: 60 },
      { start: '10:30', end: '11:30', duration: 60 },
      { start: '12:00', end: '13:00', duration: 60 },
      // ... add more 60-minute slots
      { start: '9:00', end: '10:30', duration: 90 },
      { start: '11:00', end: '12:30', duration: 90 },
      { start: '13:00', end: '14:30', duration: 90 },
    ];
    
    // User selects a 60-minute slot
    let selectedSlot = { start: '9:00', end: '10:30', duration: 90 };
    
    availableSlots = availableSlots.filter(slot => slot.start !== selectedSlot.start || slot.end !== selectedSlot.end || slot.duration !== selectedSlot.duration);
    
    let startTime = selectedSlot.start;
    let endTime = selectedSlot.end;
    
    availableSlots = availableSlots.filter(slot => !(slot.start === endTime && slot.duration === 90));
    
    let newStartTime = startTime;
    let newEndTime = new Date(new Date(`2000-01-01 ${startTime}`).getTime() + 90 * 60000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
    let newSlot = { start: newStartTime, end: newEndTime, duration: 90 };
    availableSlots.push(newSlot);
    
    availableSlots.forEach(slot => {
      console.log(`${slot.start} - ${slot.end} (${slot.duration} minutes)`);
    });

npm run not working on (M2) Apple Silicon | Error -86

enter image description here

Hi, I have npm compilation error (see in attached file), trying to run npm run dev.

Device info:

  • npm -v: 7.13.0
  • node -v: 16.2.0
  • OS: Ventura 13.3.1
  • Device: Macbook Pro M2

I was able to run npm install. Versions of npm and node are correct for project config. Cache is cleared, npm has been reinstalled several times.

I have found on google that error -86 is always system error.

I have tried many versions of npm, node… Then I tried to run Rosetta, but it’s not available on my CPU anymore.

How can we enter time in input field with format HH:MM and also include validation

I used @julianobrasil/timemask’library for formatting the input value in angular 15, when I updated the application into angular 16 the @julianobrasil/timemask’ library is not supporting in the updated application. Is there any other library or any way to enter time in input field with format HH:MM and the validation.

I want to find a new way to enter the time in input field with format HH:MM and also include validation

Why same web address can show a captcha or not depending on the origin site?

The page https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaPublica.aspx when accessed directly will show a captcha and an input field to fill with a receipt key. In the case you have the paper receipt with you it will have a qrcode that you can scan and get, for example, the address https://www.nfce.fazenda.sp.gov.br/qrcode?p=35230547508411150980653010000502991929293282|2|1|1|C34073C1C020480295BCB68D8E4A31C2CA80A1FB. From that address you can click the bottom button named “Visualizar em Abas” and, as far as I can tell, it will trigger a “onclick=javascript:__doPostBack(‘btnVisualizarAbas’,”)” event:

<script type="text/javascript">
var theForm = document.forms['ctl00'];
if (!theForm) {
    theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
</script>

From there I can see that there is a post request with a redirect to first website I mentioned (https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaPublica.aspx). Now, the only difference I could see using chrome dev tools for getting this endpoint is that the redirect has an additional “Referer” header with the value equal to the website address I got from the qrcode. So I tried to use Postman to get this endpoint passing this additional header, but I got the website with the captcha. Why even then I cannot go straight to the page with the info for that specific receipt key? I also tried the post request, in that case I have to get the events for the payload each time I access the qrcode link, since they change each time.

This is the post request info from chrome dev tools:

General

General
Request URL: https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaResponsiva/ConsultaResumidaRJFrame_v400.aspx
Request Method: POST
Status Code: 302
Remote Address: :443
Referrer Policy: strict-origin-when-cross-origin
Request Headers
Request URL: https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaResponsiva/ConsultaResumidaRJFrame_v400.aspx
Authority www.nfce.fazenda.sp.gov.br
Method POST
Path /NFCeConsultaPublica/Paginas/ConsultaResponsiva/ConsultaResumidaRJFrame_v400.aspx
Scheme https
Accept text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.9
Cache-Control max-age=0
Content-Length 550
Content-Type application/x-www-form-urlencoded
Cookie ASP.NET_SessionId=huyyfx13k4u4e0eusb1oabzv; __AntiXsrfToken=abf574e860874c8481457d087d9fc59a; BIGipServer~windows~pl_10.217.38.65_rd2_http=rd2o00000000000000000000ffff0ad92644o80
Origin https://www.nfce.fazenda.sp.gov.br
Referer https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaQRCode.aspx?p=35230547508411150980653010000502991929293282 1 C34073C1C020480295BCB68D8E4A31C2CA80A1FB
Sec-Ch-Ua “Google Chrome”;v=”113″, “Chromium”;v=”113″, “Not-A.Brand”;v=”24″
Sec-Ch-Ua-Mobile ?0
Sec-Ch-Ua-Platform “Linux”
Sec-Fetch-Dest document
Sec-Fetch-Mode navigate
Sec-Fetch-Site same-origin
Sec-Fetch-User ?1
Upgrade-Insecure-Requests 1
User-Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Payload
__EVENTTARGET=btnVisualizarAbas&__EVENTARGUMENT=&__VIEWSTATE=8JaO%2BY7TpqUSSroF4AyA5%2Fsz0CniEFjtGqQqwNx2fgaRP5FF75wQWnb3H8iLF9YUZXcWCFPaxa20dxwFhp9yYLUEbuABQWILh8RyoW1lhyKZKM08bNM18WcLyumVmICUE2%2BonC5CYoXgIbno9gUoZ20HLBx5rCNRtR1cXO3al1zXMOKRmr8y0r7Hy%2F2MYISbHEybwafTDIE144l%2FkWErE5ytwhJya3EhDU1I9q5vhkc%3D&__VIEWSTATEGENERATOR=2CB5E186&__EVENTVALIDATION=LpdqL5Y7SkbYJ2FfNePpztU6hiwY97PzIAPaey%2Fj%2BsVtmcZIfN4lINlfe%2Bhs7%2B%2BnHfaqdp9B3pCPQ7S4JmuBTVTkZFfDEI7ch%2BYbCCNDxwDD%2B6t8Bl4Vlq%2BAOZWBsn%2Bzp7lMhNwHJjanErEkDJ785Tb81hF4DVKIAh0biu30aGw%3D

And this is the redirect:

General

General
Request URL: https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaPublica.aspx
Request Method: GET
Status Code: 200
Remote Address: :443
Referrer Policy: strict-origin-when-cross-origin
Request Headers
Request URL: https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaResponsiva/ConsultaResumidaRJFrame_v400.aspx
Authority www.nfce.fazenda.sp.gov.br
Method GET
Path /NFCeConsultaPublica/Paginas/ConsultaPublica.aspx
Scheme https
Accept text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.9
Cache-Control max-age=0
Content-Length 550
Content-Type application/x-www-form-urlencoded
Cookie ASP.NET_SessionId=huyyfx13k4u4e0eusb1oabzv; __AntiXsrfToken=abf574e860874c8481457d087d9fc59a; BIGipServer~windows~pl_10.217.38.65_rd2_http=rd2o00000000000000000000ffff0ad92644o80
Origin https://www.nfce.fazenda.sp.gov.br
Referer https://www.nfce.fazenda.sp.gov.br/NFCeConsultaPublica/Paginas/ConsultaQRCode.aspx?p=35230547508411150980653010000502991929293282 1 C34073C1C020480295BCB68D8E4A31C2CA80A1FB
Sec-Ch-Ua “Google Chrome”;v=”113″, “Chromium”;v=”113″, “Not-A.Brand”;v=”24″
Sec-Ch-Ua-Mobile ?0
Sec-Ch-Ua-Platform “Linux”
Sec-Fetch-Dest document
Sec-Fetch-Mode navigate
Sec-Fetch-Site same-origin
Sec-Fetch-User ?1
Upgrade-Insecure-Requests 1
User-Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Snowflake Problem: Populate Table with Dates and its Attributes

I have a problem statement:
Write a Stored Procedure that populates a table with certain date attributes. The data would be populated for 1 year. For example the date 14-07-2020 is passed as an input parameter, then the stored procedure will populate those attributes for all the dates present within the year 2020. The primary key for this table would be date column.
Constraint: More than one insert statement cannot be used

enter image description here|

The structure of table is given in the image.

My implementation of snowflake code for the problem statement is:

create or replace table DateTimeDimensions (SKDate varchar(50), KeyDate varchar(50), Date varchar(50), CalendarDay int, CalendarMonth int, CalendarQuarter int, CalendarYear int, DayNameLog varchar(50), DayNameShort varchar(50), DayNumOfWeek int, DayNumofYear int, DaySuffix varchar(10), FiscalWeek int, FiscalPeriod int, FiscalQuarter int, FiscalYear int, FiscalYear_Period int);
select * from DateTimeDimensions
truncate table DateTimeDimensions
drop table DateTimeDimensions

CREATE OR REPLACE PROCEDURE uspPopulateDateTimeTable(startDate TIMESTAMP)
RETURNS STRING
LANGUAGE JAVASCRIPT
AS
$$
{
    var currentDate = startDate;
    var endDate = DATEADD('YEAR', 1, startDate);

    while (currentDate < endDate) {
        var SKDate = currentDate.format('YYYYMMDD');
        var KeyDate = currentDate.format('MM/DD/YYYY');
        var Date = currentDate.format('MM/DD/YYYY');
        var CalendarDay = currentDate.getDate();
        var CalendarMonth = currentDate.getMonth() + 1;
        var CalendarQuarter = Math.ceil(CalendarMonth / 3);
        var CalendarYear = currentDate.getFullYear();
        var DayNameLong = currentDate.toLocaleString('en-US', { weekday: 'long' });
        var DayNameShort = currentDate.toLocaleString('en-US', { weekday: 'short' });
        var DayNumberOfWeek = currentDate.getDay() + 1;
        var DayNumberOfYear = Math.ceil((currentDate - new Date(currentDate.getFullYear(), 0, 1)) / 86400000);
        var DaySuffix = CalendarDay + (CalendarDay % 10 === 1 && CalendarDay !== 11 ? 'st' : (CalendarDay % 10 === 2 && CalendarDay !== 12 ? 'nd' : (CalendarDay % 10 === 3 && CalendarDay !== 13 ? 'rd' : 'th')));
        var FiscalWeek = currentDate.getWeek(5);
        var FiscalPeriod = CalendarMonth;
        var FiscalQuarter = CalendarQuarter;
        var FiscalYear = CalendarYear;
        var FiscalYear_Period = CalendarYear + padLeft(CalendarMonth.toString(), 2, '0');

        var sqlStatement = 'INSERT INTO DateTimeDimensions (SKDate, KeyDate, Date, CalendarDay, CalendarMonth, CalendarQuarter, CalendarYear, DayNameLong, DayNameShort, DayNumberOfWeek, DayNumberOfYear, DaySuffix, FiscalWeek, FiscalPeriod, FiscalQuarter, FiscalYear, FiscalYear_Period) ' +
            'VALUES ('' + SKDate + '', '' + KeyDate + '', '' + Date + '', ' + CalendarDay + ', ' + CalendarMonth + ', ' + CalendarQuarter + ', ' + CalendarYear + ', '' + DayNameLong + '', '' + DayNameShort + '', ' + DayNumberOfWeek + ', ' + DayNumberOfYear + ', '' + DaySuffix + '', ' + FiscalWeek + ', ' + FiscalPeriod + ', ' + FiscalQuarter + ', ' + FiscalYear + ', '' + FiscalYear_Period + '');';

        snowflake.execute({ sqlText: sqlStatement });

        currentDate = DATEADD('DAY', 1, currentDate);
    }

    return 'DateTimeDimensions table populated successfully.';
}
$$;

CALL uspPopulateDateTimeTable('2020-07-14 00:00:00');

But it is giving me error as:

JavaScript execution error: Uncaught ReferenceError: startDate is not defined in USPPOPULATEDATETIMETABLE at ' var currentDate = startDate;' position 22 stackstrace: USPPOPULATEDATETIMETABLE line: 3

Basically the error says that

    var currentDate = startDate;

is not working because startDate is not defined.

I have searched online and read the documentation properly but can’t find out the solution for this error. Help me in solving this.

I tried to search thoroughly through the Snowflake documentation for writing stored procedure using Javascript and SQL but it was of no help.
Again and Again same error was occuring.
I tried to implement using SQL sripting instead of Javascript but it gave even more error for the same logic.

I have not tried it using CTE because I think it will be more complicated.

What’s a video for a CNN? [closed]

I dunno if it’s usual for SO ? I don’t have a code to correct, but a question on concepts. Here is my initial context :
I’m practicing kendo, a japanese martial art using a “sword”, in which we are looking for the precision of the movement. most of these movements are in a unique plan, so you can evaluate them by looking at the kendoka by the side.
For help me practicing out of practice sessions with the “teacher”, I would like to train an AI to catch and evaluate a movement (first : rise the sword over the head, with the tip higher than the hands second : cut vertically with the weapons while moving one step forward… a non precise description.)

I would like to do this in the web browse, so I can share it with training buddies, and also cause it’s a good exercice for web dev, and I can show it easily during job interview.

I already worked on it, I struggled with video treatment, but now I’ve a functional app :
1 – register 3-4 seconds for the movement, without sounds (buttons start and stop recording)
2 – apply an edge detection filter to the video (how hard it was !)
3 – register datas of the filtered video in a json file, with a matrice of 0 (black) and 1 (white) for each frame of the video

So from now on, this is where the fun start and where I go on unknown seas ! It’s time to train an AI, and this is where I need some advice…

I’m a newbe on AI, so I started by trying to understand main concepts.
It seems AI are “things” trained to do some tasks with a model and a datas training set.

The datas training set is the collection of data associated to the waited evaluation, so we take a part of this set to train the AI to recognize “these datas are associate to these evaluations”, then we take the other part of the set to test see if the the AI gives, from datas, the same evaluation as expected. Right ?

The model is the algorithm used to train the AI. So Support Vector Machine (SVM), Generative Pre-trained Transformer (GPT), or Convolutional Neural Network (CNN) are models. Am I wrong ?

GPT is closed adapted for language recognition, so I don’t care today. SVM seems to be adapted to make evaluations on numeric datas ? moreover I gave it a try, and all API’s I was looked to seem to use Node.JS statements as require so I can’t use it.

So I decided to give a try to a CNN. For now, I’m considering using ml5.js, which tutorials are pretty cool to read. Moreover there is a big playlist video about this API. One of these tutorials explain how to train an AI for tasks as “regression”, “classification”, or “image classification”, but nothing about “video classification”. Is it even the good term ? So here is my question : What’s a video for a CNN ?

I would like to use the “image classification” parameter to train my CNN, but I don’t have images, I’ve sequence of images. Moreover, as explained in TensorFlow datasheet, a video have the concept of time, I can’t just give my sequences to my CNN and voilà ! How to explain this to my CNN ? How to use ml5.js for this ?

I thought to use TensorFlow.js, as there is a page about video classification in the datasheet, but even the quick starts pages seems to say me “noo” cause it’s using Node.js and I can’t cause I’m in my browser ! (and I don’t know Node.JS, maybe I’ll learn later, but… Eh, let’s go step by step)

Of course I don’t ask for code here, if you can share ressources, or correct my understanding mistakes, it would be greatly appreciated ! From my side, I’ll watch the full playlist I shared. Even if any video title talk about videos, may I can get an idea by watching all of it ?

Thanks !

Group by and sum on multiple keys maintaining type safety

Given an array of objects, I’d like to group it by an arbitrary number of object keys, and sum the values of a second arbitrary number of keys.

For example, given:

const arr = [
   { shape: "square", color: "red", available: 1, ordered: 1 },
   { shape: "square", color: "red", available: 2, ordered: 1 },
   { shape: "circle", color: "blue", available: 0, ordered: 3 },
   { shape: "square", color: "blue", available: 4, ordered: 4 },
 ];

If I group by both shape and color and want the sum of the values of available and ordered, the result should be:

[
  { shape: "square", color: "red", available: 3, ordered: 2 },
  { shape: "circle", color: "blue", available: 0, ordered: 3 },
  { shape: "square", color: "blue", available: 4, ordered: 4 },
];

I’ve extensively gone through many similar SO threads [1, from which the example above is based on, 2, 3, 4, 5]. The issue is that none of them:

  • Provide a generic, ready-to-use function (they’re based on custom object keys)
  • Are based on Typescript and provide a type-safe implementation
  • Deal adequately with additional keys in the object (e.g., if arr contained another property size not involved in the transformation it shouldn’t contain bogus values)

How can I build a generic, type-safe groupBySum function that accepts multiple grouping and summing keys?

Next js parallel routing ruins all routing when i accept slot as my prop in rootlayout

I have a slot named @auth inside of an app folder. inside of an @auth folder i have a login folder with page.jsx folder contains this code

import LoginPopup from "@/components/Popups/LoginPopup/LoginPopup";

const Login = () => {
  return <LoginPopup />;
};

export default Login;

i have this root layout in my app/layout.jsx

import Header from "@/components/Header/Header";
import Footer from "@/components/Footer/Footer";
import "./globals.css";

export const metadata = {
  title: "SanSearch",
  description: "Сайт по поиску юридических документов",
};

export default function RootLayout({ children, auth }) {

  return (
    <html lang="ru">
      <body className="font-text" suppressHydrationWarning={true}>
        <Header />
        {children}
        {auth}
        <Footer />
      </body>
    </html>
  );
}

When i try to accept auth slot as a prop and render it with children in my layout my routing gets somehow ruined and get 404 page on every route i try to get. but when i remove auth as my prop everything goes back to normal.
i want to achieve that i can make a contextual modal with parallel routing in next js. i dont want to make an interception route because i dont have a page as popup. only popup that can be achieved by routing on /login page and page behing my popup can still be saved.

Calculate years based on months in 17 months graph in TypeScript (Highcharts)

I have an issue I’ve been struggling with.

I have this column chart that spans 17 months – 12 months back and 6 months ahead.

Currently, it’s May, and 12 months back is also May. Additionally, 6 months ahead is November.

In the tooltip, I need to show the specific year for each month.

I have two columns side by side, where one column should display the year prior to that particular year.

Ex. left bar->2022 right bar->2023 and so on.

Image of the graph

My code:

    private getSeriesDataFromGraphData(graphData: GetPreviousYearGraphData[]): Highcharts.PointOptionsObject[] {
        return graphData.map(({y, b2b, b2c, normal}) => ({y, b2b, b2c, normal}));
    }

    // Using the search-filters does not affect this graph. This graph is only affected when filtering between brands.
    private renderOrderAmountCompareOnBrand(
        strCurrencyCode: string,
        arrCategories: string[],
        arrPrevSeriesDataStock: GetPreviousYearGraphData[],
        arrPrevSeriesDataPre: GetPreviousYearGraphData[],
        arrSeriesDataStock: GetPreviousYearGraphData[],
        arrSeriesDataPre: GetPreviousYearGraphData[]
    ) {
        // Get the series data for each set of graph data
        const prevSeriesDataStock = this.getSeriesDataFromGraphData(arrPrevSeriesDataStock);
        const prevSeriesDataPre = this.getSeriesDataFromGraphData(arrPrevSeriesDataPre);
        const seriesDataStock = this.getSeriesDataFromGraphData(arrSeriesDataStock);
        const seriesDataPre = this.getSeriesDataFromGraphData(arrSeriesDataPre);

        this.OrderAmountComparedOnBrandChart = Highcharts.chart('claimsOrderAmountPerSalesChannel', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Order amount compared on brand'
                },
                xAxis: {
                    categories: arrCategories
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Brand order statistics'
                    }
                },
                tooltip: {
                    formatter: function () {
                        let strStyling = "display: flex; justify-content: space-between; gap: 20px;";
                        let startDate: Date = new Date();

                        startDate.setMonth(startDate.getMonth() - 12);

                        let year = startDate.getFullYear();

                        if (!this.series.name.includes('Previous year')) {
                            year += 1;
                        }

                        const GetPreviousYearGraphData = this.point as GetPreviousYearGraphData;

                        return `
                            <b>${this.point.category} | ${this.series.name} | ${year}</b><br><br>
                            <div style="${strStyling}">
                                <span><b>Sales staff:</b></span> ${Highcharts.numberFormat(GetPreviousYearGraphData.normal || 0, 0)} ${strCurrencyCode ?? ''}<br>
                            </div>
                            <div style="${strStyling}">
                                <span><b>B2B:</b></span> ${Highcharts.numberFormat(GetPreviousYearGraphData.b2b || 0, 0)} ${strCurrencyCode ?? ''}<br>
                            </div>
                            <div style="${strStyling}">
                                <span><b>B2C:</b></span> ${Highcharts.numberFormat(GetPreviousYearGraphData.b2c || 0, 0)} ${strCurrencyCode ?? ''}<br>
                            </div>
                            <div style="${strStyling}">
                                <span><b>Total:</b></span> ${Highcharts.numberFormat(this.y || 0, 0)} ${strCurrencyCode ?? ''}
                            </div>
                        `;
                    },
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [
                    {
                        name: 'Stock Previous year',
                        data: prevSeriesDataStock,
                        stack: 'Stock1'
                    },
                    {
                        name: 'Pre Previous year',
                        data: prevSeriesDataPre,
                        stack: 'Stock1'
                    },
                    {
                        name: 'Stock',
                        data: seriesDataStock,
                        stack: 'Stock'
                    },
                    {
                        name: 'Pre',
                        data: seriesDataPre,
                        stack: 'Stock'
                    }
                ] as SeriesOptionsType[]
            } as Options
        );
    }

I tried a whole bunch of things, but i cant get it to calculate correctly.

Notifcation Web-push withSpring boot y vaadin

I’m making a push notification system with spring boot back-end, this is my whole code: https://github.com/jaa-bot/vaadin-flow-web-push-notifications.git , it’s a code that I found on the internet and what I try in my application is to save the token (endpint, auth and p256dh) in a database, which I do successfully. My application consists of a check box that makes the user receive or stop receiving notifications depending on whether it is activated or not enter image description here as seen in the image if the button is active I collect the token and save it in the database and when you deactivate it, I delete it from the database and if you activate it again, it generates another new token and I save it, below I have a text box and a button, before pressing the button I collect all the tokens from the database And when I click on the button, it sends the message to all the browsers that are saved in the database.This is the problem:

java.lang.IllegalArgumentException: Invalid point encoding 0x-21 at org.bouncycastle.math.ec.ECCurve.decodePoint(ECCurve.java:443) ~[ bcprov-jdk15on-1.70.jar:1.70.0] en nl.martijndwars.webpush.Utils.loadPublicKey(Utils.java:61) ~[web-push-5.1.1.jar:na] en nl.martijndwars.webpush. Utils.loadPublicKey(Utils.java:49) ~[web-push-5.1.1.jar:na] en nl.martijndwars.webpush.Notification.(Notification.java:86) ~[web-push-5.1.1. jar:na] en nl.martijndwars.webpush.Notification.(Notification.java:95) ~[web-push-5.1.1.jar:na] en org.vaadin.marcus.webpush.WebPushService.sendNotification(WebPushService.java :76) ~[clases/:na] en org.vaadin.marcus.webpush.WebPushService.notifyAll(WebPushService.java:138) ~[clases/:na] en org.vaadin.marcus.views.PushView.lambda$2( PushView.java:47) ~[clases/:na] 

and I thought that it may be when collecting the data from the database that it has been collected in another format or something similar, but I can’t find the error, in my code I have the error, it appears in the sendNotification method on the line: HttpResponse response = pushService.send(notification); My entire code is in the git hub link in case you have to look at something else, The database is simple, they are an endpoint field such as primary key, auth, p256dh and another called id_user that is to be able to send a notification to a specific user

import java.io.InputStream;
import java.security.GeneralSecurityException;
import java.security.Security;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ExecutionException;

import java.nio.charset.StandardCharsets;
import java.util.Base64;

import org.apache.commons.io.IOUtils;
import org.apache.http.HttpResponse;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.jose4j.lang.JoseException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.vaadin.marcus.controller.TokenController;
import org.vaadin.marcus.entity.Token;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import jakarta.annotation.PostConstruct;
import nl.martijndwars.webpush.Notification;
import nl.martijndwars.webpush.PushService;
import nl.martijndwars.webpush.Subscription;
import nl.martijndwars.webpush.Subscription.Keys;

@Service
public class WebPushService {

    @Value("${vapid.public.key}")
    private String publicKey;
    @Value("${vapid.private.key}")
    private String privateKey;
    @Value("${vapid.subject}")
    private String subject;

    private PushService pushService;

    @Autowired
    private TokenController tokenController;

    // almacena los endpoints de las suscripciones
    private final List<Token> endpointToSubscription = new ArrayList<>();

    // metodo para inicializar el pushService
    @PostConstruct
    private void init() throws GeneralSecurityException {
        Security.addProvider(new BouncyCastleProvider());
        //publicKey = Base64.getEncoder().encodeToString(publicKey.getBytes(StandardCharsets.UTF_8));
        //privateKey = Base64.getEncoder().encodeToString(privateKey.getBytes(StandardCharsets.UTF_8));
        pushService = new PushService(publicKey, privateKey, subject);
        this.endpointToSubscription.addAll(tokenController.list());
    }

    public String getPublicKey() {
        return publicKey;
    }

    // metodo que envia las notificaiones, que recibe el mansaje que tiene que
    // enviarle y el objeto tipo Subscription
    public void sendNotification(Token subscription, String messageJson) {
        try {
            System.out.println("EN EL METODO SEND NOTIFICATION: " + subscription.getEndpoint());
            System.out.println(" auth: " + subscription.getAuth() + " p256dh: " + subscription.getP256dh());

            

            Keys keys = new Keys(String.valueOf(subscription.getAuth()), String.valueOf(subscription.getP256dh()));
            Subscription subs = new Subscription(String.valueOf(subscription.getEndpoint()), keys);
            Notification notification = new Notification(subs, messageJson);

            HttpResponse response = pushService.send(notification);

                    System.out.println("holaaaaaaaaa");

                    

            int statusCode = response.getStatusLine().getStatusCode();
            if (statusCode != 201) {
                System.out.println("Error del servidor, codigo del error:" + statusCode);
                InputStream content = response.getEntity().getContent();
                List<String> strings = IOUtils.readLines(content, "UTF-8");
                System.out.println(strings);
            }
        } catch (GeneralSecurityException | IOException | JoseException | ExecutionException
                | InterruptedException e) {
                    System.out.println("YEEEAAAAH BUDDY");
            e.printStackTrace();
        }
    }

    // metodo para agregar al usuario a la memoria y enviarle notificaciones
    public void subscribe(Token subscription) {
        System.out.println("Endpoint: " + subscription.getEndpoint() + " auth: " + subscription.getAuth() + " p256dh: "
                + subscription.getP256dh());

                System.out.println("ID DEL SUBCRIBE: " + subscription.getEndpoint());

                guardarToken(new Token(subscription.getEndpoint(), subscription.getAuth(), subscription.getP256dh(), "JUAN"));


        // solo usaremos la URL del punto final como clave para almacenar suscripciones
        // en la memoria.
        // objetivo es guardar id del usuario y lo que necesita para enviar
        // notificaciones que son el endpoint, auth, p256dh
        endpointToSubscription.add(subscription);
    }

    // metodo que elimina el endpoint del mapa de las suscripciones
    public void unsubscribe(Token subscription) {
        System.out.println("Se fue:  " + subscription.getEndpoint());

        System.out.println("ID DEL UNSUBCRIBE: " + subscription.getEndpoint());

        eliminarToken(subscription.getEndpoint());
        endpointToSubscription.remove(subscription);
    }

    public record Message(String title, String body) {
    }

    ObjectMapper mapper = new ObjectMapper();

    // enviar notificacion a todos los usuarios que se han suscrito
    public void notifyAll(String title, String body) {
        try {
            // crea un mensaje y envia la notificacion a todos los usuarios que se encuentan
            // en el mapa, con el metodo sendNotification
            String msg = mapper.writeValueAsString(new Message(title, body));

            for(int i = 0; i < endpointToSubscription.size(); i++){
                sendNotification(endpointToSubscription.get(i), msg);
            }
            (endpointToSubscription).forEach(subscription -> {
                System.out.println("QUEEEE PASAAA??   " + subscription);
                sendNotification(subscription, msg);
            });
        } catch (JsonProcessingException e) {
            throw new RuntimeException(e);
        }
    }

    /*
     * public void notifyOneUser(String title, String body, int userId) {
     * try {
     * String msg = mapper.writeValueAsString(new Message(title, body));
     * (endpointToSubscription).forEach(subscription -> {
     * //aqui un if que compare si existe en la base de datos un usuario con ese id
     * if (existeUser(userId)) {
     * sendNotification(subscription, msg);
     * }
     * else{
     * System.out.println("No existe el usuario con id: " + userId);
     * }
     * });
     * } catch (JsonProcessingException e) {
     * e.printStackTrace();
     * throw new RuntimeException(e);
     * }
     * }
     */

     //tengo que mirar esto bien
    public void guardarToken(Token token) {
        String endpoint = token.getEndpoint();
        String auth =token.getAuth();
        String p256dh = token.getP256dh();

        tokenController.añadirToken(new Token(endpoint, auth, p256dh, "JUAN"));
    }

    public void eliminarToken(String endpoint) {
        endpoint = base64UrlEncode(endpoint);

        tokenController.eliminarToken(endpoint);
    }

    public static String base64UrlEncode(String input) {
        byte[] encodedBytes = Base64.getUrlEncoder().encode(input.getBytes(StandardCharsets.UTF_8));
        return new String(encodedBytes, StandardCharsets.UTF_8)
                .replace("+", "-")
                .replace("/", "_")
                .replaceAll("=+$", "");
    }

    public static String base64UrlDecode(String input) {
        input = input.replace("-", "+").replace("_", "/");
        int padding = 4 - (input.length() % 4);
        input += "=".repeat(padding);

        byte[] decodedBytes = Base64.getUrlDecoder().decode(input.getBytes(StandardCharsets.UTF_8));
        return new String(decodedBytes, StandardCharsets.UTF_8);
    }

}```

ajax call request and response is not working below ios 11

I have a ajax call using javascript the ajax call is working fine for android and desktop. But in iOS below iphone 11 the ajax call is not working but above iphone 11 it’s working fine. I have attached the ajax call below.

var inputText = $(this).val();
document.getElementById('suggestions').style.display = 'block';
var xhr = new XMLHttpRequest();
xhr.open('GET', 'suggestions.php?input='+inputText, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    if(xhr.responseText != '') {
      document.getElementById('suggestions').style.height = '150px';
      document.getElementById('suggestions').style.overflowX = 'auto';
    } else {
      document.getElementById('suggestions').style.height = '0';
      document.getElementById('suggestions').style.overflowx = 'none';
    }
    $("#suggestions").html(xhr.responseText);
    console.log(xhr.responseText);
  }
};
xhr.send();

The above code is the ajax call. Where I have ajax call to suggestion.php page with input data.