I’ve created a PWA Clock App for work and until recently I could have a single page dynamically load ANY employee clock profile by simply doing the following:

1. Type their unique link in the browser: https://example.com/clock/?id=1001
2. Click Share then click Add To Home Screen.
3. Set a custom name for the icon if I want to.
4. Click Add.

Done. Awesome web app ready to use.

Then one day… this stopped working on everyone’s phone. Meaning…

Forget this:

// https://example.com/clock/?id=1001
const parsedUrl = new URL(window.location.href);
const employeeId = parseInt(parsedUrl.searchParams.get("id")); // "1001"

And also, forget this:

// https://example.com/clock/#1001
// https://example.com/clock#1001
const employeeId = parseInt(window.location.hash.slice(1)); // "1001"

After hours of frustration I’ve decided to do the dumbest thing I could think of which is to create a physical directory for an employee using the same employee id just to say I’ve tried everything I could think of and what do you know… It worked.

Now I have to use this:

// https://example.com/clock/1001
const parsedUrl = new URL(window.location.href);
const pathParts = parsedUrl.pathname.split('/');
const employeeId = parseInt(pathParts[pathParts.length - 1]); // "1001"

Please “…say it ain’t so. This joke is a heart breaker.”

Trying to change action on clicking certain button.

On clicking certain button, I changed Submit button text (submit -> update).

Current action is like

<form method ='POST' action=''>
 // do something
</form>

On changing to update text, I want change this action to url_for using javascript instead ''.

And inside url_for I need to insert variable.

Tried code 1.

• Give url string to action.

<script>
 var sel = 'space';
 var new_url = "{{ url_for('abc', selected='" + sel + "') }}"
</script>

Using console.log(new_url);
I get /abc/%20%29sel%29%20

What I need was /abc/space

The main problem is that jinja does not allow variables in script section. Looked up stack to solve this problem. But cant find a way to solve this problem..

Tried code 2.

• Using $.post()
  This executed on everything. ex) onload window, on click submit button etc.

Could anyone help me with changing action in js using variables?

I want to be able to change order position of a lists table. Each list has it’s own position field. As I update list order I want to save this to the database. So I pass an array with the lists id field in the correct order and use a middly complex query to update the list:

with pos as (
    select 
        id as pos_id,
        row_number() over() as position
    from (
        select unnest(
            array[36, 33, 35, 37, 46, 39, 40, 41, 43, 45, 38, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 58, 59, 60, 61, 62, 65, 66, 67, 68, 78, 79, 82, 83]
        ) as id 
    ) a 
)  
update lists l
    set position = pos.position
from 
    pos
where 
    l.id = pos.pos_id

This works perfectly in pg_admin but when I try to put this in Node it just won’t work.

I’ve tried to send $1 parameter using these forms:

1. unnest($1)
2. unnest($1::bigint[])
3. unnest($1:list)
4. unnest(ARRAY[$1])
5. unnest(ARRAY[$1::bigint[])
6. unnest(ARRAY[$1::list)
7. unnest(ARRAY[$1::bigint[])
8. unnest(ARRAY[‘ + positions.join(‘, ‘) + ‘])
9. unnest(‘{‘ + positions.join(‘, ‘) + ‘}’)
10. unnest(‘{‘ + positions.join(‘, ‘) + ‘}’::bigint[])

None worked. Some of them return a parse error, some a “need to add explicit type casts” error. How do I pass an array to pool.query in this case ?

I am using html5 drag and drop functionality in a project. I am trying to alter the position of the drag image relative to the position of the input (mouse or finger). The following code works fine on a desktop when using a mouse, however when using a touch panel on a phone screen, the image is never offset.

I originally thought it might be a screen pixel-density issue, but even when I replace the offset with much bigger numbers, nothing happens.

    function dragStart(ev)
    {
        console.log("dragging");
        console.log(ev);

        // Place the drag image offset to the mouse cursor location
        ev.dataTransfer.setDragImage(ev.target, 50, 50);

        ev.dataTransfer.setData("text", ev.target.dataset.tileIndex);
    }

So every time I try to click the “im feeling lucky button, it works for a second, then it decides to go back to the original number but adds a click from the autoclicker part of the code. Here is the code (also ignore the cooldown that was just for testing to make sure it works):

gambling.js:

function initClickerGame() {
  // Obtain references to counter, button, and message elements
  const counterEl = document.getElementById('counter');
  const luckyBtn = document.getElementById('luckyBtn');
  const messageEl = document.getElementById('message');
  let isCooldown = false;

  luckyBtn.addEventListener('click', () => {
    if (isCooldown) {
      messageEl.textContent = 'Cooldown in effect. Please wait 30 seconds.';
      messageEl.style.display = 'block';
      return;
    }

    const gamble = Math.random();
    let points = parseInt(counterEl.textContent) || 0; // Retrieve current points and convert to integer

    if (points < 100) {
      messageEl.textContent = 'You need at least 100 points to gamble.';
    } else {
      if (gamble < 0.4) {
        const pointsWon = Math.floor(points / 2);
        points += pointsWon;
        counterEl.textContent = points;
        messageEl.textContent = `You won ${pointsWon} points!`;
      } else if (gamble >= 0.4 && gamble < 0.7) {
        const pointsLost = Math.floor(points / 3);
        if (pointsLost >= points) {
          points = 0;
          counterEl.textContent = points;
          messageEl.textContent = 'You lost all your points!';
        } else {
          points -= pointsLost;
          counterEl.textContent = points;
          messageEl.textContent = `You lost ${pointsLost} points!`;
        }
      } else if (gamble >= 0.7 && gamble < 0.9) {
        points *= 2;
        counterEl.textContent = points;
        messageEl.textContent = `Congratulations! Your points have been doubled!`;
      } else {
        points = 0;
        counterEl.textContent = points;
        messageEl.textContent = 'Bad luck! You lost all points!';
      }
    }

    messageEl.style.display = 'block';
    isCooldown = true;

    setTimeout(() => {
      isCooldown = false;
      messageEl.style.display = 'none';
    }, 3); // 30 seconds cooldown
  });
}

window.onload = initClickerGame;

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <div class="container">
        <h1 id="counter" class="counter">0</h1>
        <br>
        <button class="clicker" id="clickerBtn">Click Me!</button><br><br>
        <button class="clicker" id="upgradeBtn">Buy Upgrader (Cost: 10)</button><br><br>
        <button class="clicker" id="luckyBtn">I'm Feeling Lucky</button><br><br>
        <button class="clicker" id="saveBtn" onclick="saveProgress()">Save Game</button><br><br>
        <button class="clicker" id="loadBtn" onclick="loadProgress()">Load Game</button><br><br>
        <button class="clicker" id="resetBtn" onclick="confirmReset()">Reset Game</button><br>
    </div>

    <div class="message" id="message"></div>

    <script src="anticheat.js"></script>
    <script src="gambling.js"></script>
    <script src="save.js"></script>

    <script>
        const counterEl = document.querySelector('.counter');
        let count = 0;
        let clickValue = 1;
        let upgradeCost = 10;
        let upgradeMultiplier = 2;
        let upgradeLevel = 1;
        let isCooldown = false;

        const clickerBtn = document.getElementById('clickerBtn');
        const upgradeBtn = document.getElementById('upgradeBtn');
        const luckyBtn = document.getElementById('luckyBtn');
        const messageEl = document.getElementById('message');

        clickerBtn.addEventListener('click', () => {
            count += clickValue;
            counterEl.textContent = count;
        });

        upgradeBtn.addEventListener('click', () => {
            if (count >= upgradeCost) {
                count -= upgradeCost;
                counterEl.textContent = count;
                clickValue *= upgradeMultiplier;
                upgradeLevel++;
                upgradeCost = upgradeCost * upgradeMultiplier;

                upgradeBtn.textContent = `Buy Upgrader (Cost: ${upgradeCost})`;

                if (upgradeLevel === 500) {
                    upgradeBtn.disabled = true;
                    upgradeBtn.textContent = `Upgrader Maxed!`;
                }
            } else {
                showMessage("Insufficient funds!");
            }
        });

        function updateCounter() {
            count += clickValue;
            counterEl.textContent = count;
        }

        function showMessage(text) {
            messageEl.textContent = text;
            messageEl.style.display = 'block';
            setTimeout(() => {
                messageEl.style.display = 'none';
            }, 5000);
        }

        function confirmReset() {
            const answer = prompt("WARNING: THIS WILL DELETE YOUR SAVE FILE AND START OVER!! To confirm the reset, what is the result of 100 + 5?");
            if (answer === "105") {
                resetGame();
            } else {
                showMessage("Incorrect answer. Reset not confirmed.");
            }
        }

        function resetGame() {
            count = 0;
            upgradeCost = 10;
            upgradeLevel = 1;
            clickValue = 1;

            counterEl.textContent = count;
            upgradeBtn.textContent = `Buy Upgrader (Cost: ${upgradeCost})`;

            showMessage("Game reset successfully!");
        }

        setInterval(updateCounter, 1000);
    </script>
</body>
</html>

I have tried rewriting the code with a new structure but it broke it more, so I just reverted the code.

The starting and ending points of the drawing do not coincide with the mouse click.
The inclined plane is not doing any favors and the closest I’ve managed to get to success is in the code below.
The shared code snippet contains adjustments to offset calculations to take plane tilt into account. They may be adjusting the coordinates of the mouse click according to the position and rotation of the .floor element, thus ensuring that the start and end points of the drawing align correctly with the click position, but they are not perfect.

.container {
  height: 100%;
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.floor {
  top: 80%;
  width: 85%;
  height: 300px;
  background-color: #e0e0e0;
  position: relative; 
  bottom: 0;
  transform-style: preserve-3d;
  transform: rotateX(70deg) translateZ(0px);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.colored-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}

.grey-point {
  background-color: grey;
}

.blue-point {
  background-color: blue;
}

.yellow-point {
  background-color: yellow;
}

.green-point {
  background-color: green;
}

    const [closestGreyPoint, setClosestGreyPoint] = useState<{ x: number; y: number; distance: number } | null>(null);

    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    const [isDrawing, setIsDrawing] = React.useState(false);

    const [greyPoints, setGreyPoints] = useState<{ x: number; y: number }[]>([]);
    const [greenPoints, setGreenPoints] = useState<{ x: number; y: number }[]>([]);


    const handleMouseMove: MouseEventHandler<HTMLCanvasElement> & TouchEventHandler<HTMLCanvasElement> = (event) => {
        if (!isDrawing) {
            return;
        }

        let offsetX;
        let offsetY;

        if ('touches' in event) {
            // É um evento de toque
            const touch = event.touches[0];
            const rect = event.currentTarget.getBoundingClientRect();
            offsetX = touch.clientX - rect.left;
            offsetY = touch.clientY - rect.top;
        } else {
            // É um evento de mouse
            const rect = event.currentTarget.getBoundingClientRect();
            offsetX = event.clientX - rect.left;
            offsetY = event.clientY - rect.top;
        }

        const canvas = canvasRef.current;
        if (canvas) {
            const ctx = canvas.getContext("2d");
            if (ctx) {
                ctx.beginPath();
                ctx.lineTo(offsetX, offsetY);
                ctx.strokeStyle = "black";
                ctx.lineWidth = 3;
                ctx.lineCap = "round";
                ctx.lineJoin = "round";
                ctx.stroke();
            }
        }
    };

    // Função auxiliar para adicionar pontos coloridos
    const addPoint = (parent: HTMLElement, color: string, x: number, y: number) => {
        const point = document.createElement('div');
        point.classList.add(`${color}-point`);
        point.classList.add('colored-point');
        point.style.left = `${x}px`;
        point.style.top = `${y}px`;
        parent.appendChild(point);
    };

    useEffect(() => {
        const floor = document.getElementById('floor');
        if (floor) {
            const pontos = document.getElementsByClassName('colored-point');
            while (pontos.length > 0) {
                const ponto = pontos[0];
                if (ponto.parentNode) {
                    ponto.parentNode.removeChild(ponto);
                }
            }

            const floorWidth = floor.offsetWidth;
            const floorHeight = floor.offsetHeight;

            addPoint(floor, 'blue', floorWidth * (0.1 + Math.random() * 0.1), floorHeight * (0.1 + Math.random() * 0.1));
            addPoint(floor, 'yellow', floorWidth * (0.9 - Math.random() * 0.1), floorHeight * (0.1 + Math.random() * 0.1));
            addPoint(floor, 'green', floorWidth * (0.1 + Math.random() * 0.1), floorHeight * (0.9 - Math.random() * 0.1));

            const centralX = floorWidth / 2;
            const centralY = floorHeight / 2;
            const separationFactor = 100;
            const greyPointsProv: { x: number; y: number }[] = [];

            for (let i = 0; i < 3; i++) {
                let randomX: number, randomY: number;
                do {
                    randomX = centralX + (Math.random() * separationFactor * 2 - separationFactor);
                    randomY = centralY + (Math.random() * separationFactor * 2 - separationFactor);
                } while (
                    (randomX < floorWidth * 0.2 && randomY < floorHeight * 0.2) ||
                    (randomX > floorWidth * 0.8 && randomY < floorHeight * 0.2) ||
                    (randomX < floorWidth * 0.2 && randomY > floorHeight * 0.8) ||
                    Math.sqrt((randomX - centralX) ** 2 + (randomY - centralY) ** 2) > separationFactor ||
                    greyPointsProv.some(point => Math.sqrt((randomX - point.x) ** 2 + (randomY - point.y) ** 2) < separationFactor)
                );

                addPoint(floor, 'grey', randomX, randomY);
                greyPointsProv.push({ x: randomX, y: randomY });
                setGreyPoints(greyPointsProv);
            }

            const greenPoint = document.querySelector('.green-point') as HTMLElement;
            if (greenPoint) {
                const greenX = parseFloat(greenPoint.style.left || '0');
                const greenY = parseFloat(greenPoint.style.top || '0');

                greyPointsProv.forEach(point => {
                    const distance = Math.sqrt((greenX - point.x) ** 2 + (greenY - point.y) ** 2);
                    if (!closestGreyPoint || distance < closestGreyPoint.distance) {
                        setClosestGreyPoint({ ...point, distance });
                    }
                });

                if (closestGreyPoint) {
                    const yellowPoint = document.querySelector('.yellow-point') as HTMLElement;
                    const bluePoint = document.querySelector('.blue-point') as HTMLElement;
                    const closestYellowDistance = yellowPoint ? Math.sqrt((closestGreyPoint.x - parseFloat(yellowPoint.style.left || '0')) ** 2 + (closestGreyPoint.y - parseFloat(yellowPoint.style.top || '0'))) : Infinity;
                    const closestBlueDistance = bluePoint ? Math.sqrt((closestGreyPoint.x - parseFloat(bluePoint.style.left || '0')) ** 2 + (closestGreyPoint.y - parseFloat(bluePoint.style.top || '0'))) : Infinity;

                    if (closestGreyPoint.distance > 1.5 * Math.min(closestYellowDistance, closestBlueDistance)) {
                        addPoint(floor, 'green', floorWidth * (0.9 - Math.random() * 0.1), floorHeight * (0.9 - Math.random() * 0.1));
                    }
                }
            }
        }

        const greyPointsProv: { x: number; y: number }[] = [];
        const greenPointsProv: { x: number; y: number }[] = [];

        const greyElements = document.querySelectorAll('.grey-point');
        greyElements.forEach(element => {
            const rect = element.getBoundingClientRect();
            greyPointsProv.push({ x: rect.left + window.scrollX, y: rect.top + window.scrollY });
            setGreyPoints(greyPointsProv);
        });

        const greenElements = document.querySelectorAll('.green-point');
        greenElements.forEach(element => {
            const rect = element.getBoundingClientRect();
            greenPointsProv.push({ x: rect.left + window.scrollX, y: rect.top + window.scrollY });
            setGreenPoints(greenPointsProv);
        });


    }, []);


    useEffect(() => {
        console.log(greyPoints)
        console.log(greenPoints)
        const floor = document.getElementById('floor');

        if (floor) {
            const canvas = canvasRef.current;
            if (canvas) {
                canvas.width = floor.offsetWidth;
                canvas.height = floor.offsetHeight;
            }
        }
    }, [greyPoints, greenPoints]);

        <div className="container">
            <div id="floor" className="floor"
            // onClick={handleFloorClick}
            >
                <canvas
                    onMouseDown={() => setIsDrawing(true)}
                    onMouseUp={() => setIsDrawing(false)}
                    onMouseMove={handleMouseMove}
                    onTouchStart={() => setIsDrawing(true)}
                    onTouchEnd={() => setIsDrawing(false)}
                    onTouchMove={handleMouseMove}
                    ref={canvasRef}
                ></canvas>
            </div>
        </div>

Hi I ran into a problem,

using Matomo for analytics and in app.module.ts configuration it needs like below –

MatomoModule.forRoot(
{

peop1: value1,
peop1: value2,
peop1: value3,
})

Also I am fetching config.json from assest before angular application starts up.

Now the problem is value1, value2 and value3 should be coming from config.json but before the promise get resolve app.module external module get initialized.

How to pass dynamic value to forRoot method in this case.

Tried APP_INIT provider but imports modules are initialized before APP_INIT promise is resolved.

I am trying to make discoverig instances from hhtps request. I have json like this:

{ "count": 2002, "next": "http://netbox.fusetelecom.com/api/circuits/circuits/?format=json&limit=50&offset=50", "previous": null, "results": [ { "id": 2620, "url": "http://netbox.fusetelecom.com/api/circuits/circuits/2620/?format=json", "display": "29278", "cid": "29278", "provider": { "id": 14, "url": "http://netbox.fusetelecom.com/api/circuits/providers/14/?format=json", "display": "AeroNet", "name": "AeroNet", "slug": "aeronet" }, "provider_account": null, "type": { "id": 2, "url": "http://netbox.fusetelecom.com/api/circuits/circuit-types/2/?format=json", "display": "Wireless", "name": "Wireless", "slug": "wireless" }, "status": { "value": "active", "label": "Active" }, "tenant": { "id": 1003, "url": "http://netbox.fusetelecom.com/api/tenancy/tenants/1003/?format=json", "display": "FS297 Puerto Rico Wireless Inc", "name": "FS297 Puerto Rico Wireless Inc", "slug": "fs_custnum-297"

And I want to create discovered items with name of tenant and id, can someone help me with the javascript code, i cant parse it correctly

I’m loading data from my database as follows:

export const getBook = (id: string) =>
  axios
    .get<Book>(
      `${process.env.NEXT_PUBLIC_API_URL}/book/${id}`
    )
    .then((res: AxiosResponse<Book>) => res.data);

Where

export type Book = {
  type: BookType;
};

export enum BookType {
  COURSEBOOK = 'Podręcznik',
  WORKBOOK = 'Zbiór zadań',
}

Unfortunately, when loading data from db, type property is COURSEBOOK (string) instead of corresponding CORSEBOOK enum value. Because of that when I use book.type I get COURSEBOOK instead of Podręcznik. How to fix that?

I’m trying to QRcode made from json string(ex, {“url”:”https:://stackoverflow.com”, “class”: “a”, “type”: “b”}).
And I made QRcode using qr-generator(https://github.com/kazuhikoarase/qrcode-generator).
I tried to scan on aos and ios. But Only Ios camera can read url and i can move to link.
Aos camera cannot scan the QR code or recognize the URL in the QR code, so the link does not open and appears to connect or share with the Notes app.

I want it work on aos like ios.
Does anyone know anything about this issue?

Recently my colleague gave me a effect video and ask me to render it on website as an effect.
My solution is to render it on a canvas. But I cannot seperate the effect with the black background, because the pixels whitch have alpha channel before, have already blended with the background pixels now.

Is it possible? What algorithm should I use to achieve such goal?

I am trying to build a simple Node.js app which would be using express.js as a server and MongoDB as the database.

I am using WebPack with following configuration to compile a file called index.js. This file in calls a method which uses the following import import { MongoClient } from 'mongodb';.

Webpack Config File

const path = require('path');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    target: "node",
    entry: './index.js',
    output: {
      filename: isProduction ? 'server.min.js' : 'server.js',
      path: path.resolve( './', 'dist'),
      clean: true, 
    },
    
    module: {
      // https://webpack.js.org/loaders/babel-loader/#root
     rules: [
         {
             test: /.m?js$/,
             loader: 'babel-loader',
             options:{
              presets:[
                "@babel/preset-env",
              ]
             },
             exclude: [
              /node_modules/,
            ]
         }
     ],
    },
    
  };
};

Package.json

{
  "name": "test-server",
  "version": "1.0.0",
  "main": "./index.js",
  "scripts": {
    "build:dev": "webpack --config .configs/webpack.config.js --mode development"
  },
  "dependencies": {
    "@babel/cli": "^7.24.1",
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "babel-jest": "^29.7.0",
    "babel-loader": "^9.1.3",
    "express": "^4.17.1",
    "jest": "^29.7.0",
    "mongodb": "^6.5.0",
    "webpack": "latest",
    "webpack-cli": "^5.1.4"
  }
}

Screenshot of files which are getting generated

I have tried commenting all the code, but when I comment import { MongoClient } from 'mongodb';, build stops generating AWS files.

Cannot find any documentation which would suggest its a required dependency.

I’ve been working on a script where when someone clicks on the image it will bring up a random image. For the purpose of explanation, I have a very basic example I put in codepen with some door images with numbers on them.

I have been able to get everything to work to randomize the images with the onclick, but sometimes images repeat back to back so you have to click the button a couple times for a new image to pop up.

For example, when someone clicks the picture, the randomized picture that shows up can be in the order of image 1, image 4, image 4, image 3. Just as a general example.

What do I need to do in order to stop showing pictures back to back? I don’t mind if the pics show up again, just not directly back to back as it makes the user have to click the button multiple times for the image to change.

I’ve tried looking through different threads but nothing I found seemed to work on my end.

HTML

<body>
       <div onLoad="pickimg2">
 
    <img src="https://websitetestsone.neocities.org/images/door-test-default.png" name="randimg" border=0 usemap="#image_map">
<map name="image_map">
  <area alt="" title="" href="" coords="180,378,335,407" shape="rect" onClick="pickimg2();return false;">
</map>
</div>

Javascript

var myImages1 = new Array();
myImages1.push("https://websitetestsone.neocities.org/images/door-test-1.png");
myImages1.push("https://websitetestsone.neocities.org/images/door-test-2.png");
myImages1.push("https://websitetestsone.neocities.org/images/door-test-3.png");
myImages1.push("https://websitetestsone.neocities.org/images/door-test-4.png");
myImages1.push("https://websitetestsone.neocities.org/images/door-test-5.png");

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2() {
  document.randimg.src = myImages1[getRandomInt(0, myImages1.length - 1)];
}

Codepen link
https://codepen.io/hrussio/pen/PogdPom

Thanks!

I have problem making string with url_for inside javascript.

So here is my code in javascript.

const selected_id = 'here';
new url = "{{ url_for('abc', sel_id='" + selected_id + "' }}";

while doing console.log

I get /abc/%22%20%28selected_id%28%20@22

I need to get /abc/here

Can anyone help me with making string inside jinja&javascript?

I have developed a website using AJAX for navigation between pages. While navigation works fine during the session, every time I refresh the page, it automatically redirects to the homepage instead of staying on the current page. The URL in the address bar does not change as I navigate, which I suspect is part of the problem. I am looking for a way to maintain the current page state even after a refresh.

Here are the key points about the site’s behavior:

1. The site uses AJAX to load content without reloading the page.
2. The URL in the address bar remains the same regardless of the content displayed.
3. Refreshing the page always leads back to the homepage.
4. The backend is written in C#
   I would appreciate any suggestions on how to modify my AJAX calls or configure my server to handle page refreshes correctly and maintain the state or page position after a refresh.

Thank you in advance for your help!

I tried to handle this problem with a script in javascript that saves the pageId and when load the homepage as it usually does, it checks this pageId and redirects to it. it didn’t worked fine and it doesn’t seem the best solution. I tried already to change to routing configuration in C# config file but it always load the homepage after refresh.