switch company trigger in odoo 17

suit to my work i need to trigger a method when the user switch company , i tried overrideing the write method in res.user model but i didn’t work i tried with js like this :

/** @odoo-module **/

import { rpc } from "@web/core/network/rpc_service";

document.addEventListener("click", function (event) {
    if (event.target.closest(".o_switch_company_menu .dropdown-item[data-company-id]")) {
        const companyId = event.target.closest(".dropdown-item").dataset.companyId;
        rpc("/dashboard_commission/switch_company", {
            company_id: companyId,
        }).then(function () {
            alert("hello world");
        });
    }
});

but still i didn’t acheive my goal … if any one have an idea how to trigger a method when the user switch company i would be thankful.

Can’t pause audio

I’m working on a project, and I can’t seem to pause the audio once it starts playing. This is the code I’m running right now:

// <<backmus start 01>>
var executeBackgroundMusic = function(action)
{
  var operator = action.options[0]
  var song = music[action.options[1]];
  var audio = new Audio(music[action.options[1]]);
  if (operator == "start"){
    audioPlayer["currentlyPlaying"] = song;
    audio.play();
    audio.loop=true;
  }
  else if (operator == "stop") {
    audio.pause();
    audio.currentTime = 0;
    audioPlayer["currentlyPlaying"] = "";
  }
}

The <<backmus start 01>> is how I am calling the function, and the song’s ID is 01. When I execute the code, the song starts playing when it is supposed to. When I prompt <<backmus stop 01>>, however, the song keeps playing. I know it goes through the code, though, because audioPlayer["currentlyPlaying"] is set to "" in the console. The start operator works properly, so I don’t think that part is the issue. Is there another way to stop audio besides audio.pause()?

How can I animate opacity on a parent container while preserving backdrop-filter: blur() on child elements during the animation?

I’m trying to animate a parent container using a keyframe-based opacity fade-in/out (@keyframes fadeIn and fadeOut). Inside the container, there are child elements with backdrop-filter: blur(…) applied to achieve a frosted-glass effect.

Here’s a simplified version of the setup:

<div id="myContainer" class="container">
    <div class="shape-div"></div>
    <!-- more elements may be added here in the future -->
</div>


.shape-div {
    width: 400px;
    height: 400px;
    border-radius: 12px;
    background-color: rgba(0, 128, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.fade-in {
    animation: fadeIn 2s forwards;
}
.fade-out {
    animation: fadeOut 2s forwards;
}

The issue:
When I animate the parent container (#myContainer) using a fade-in/out animation on its opacity, the backdrop-filter on the .shape-div breaks or disappears during the animation, especially in Chrome and others. The blur only works when not nested inside an element with an animated opacity.

I understand that animating opacity on the same element as backdrop-filter works fine, but:

•   I have (or will have) many children in the container.

•   I want to keep the animation logic at the container level to avoid applying animation to each child individually.

•   I want to avoid complex JS-based fade management per child, for maintainability.

What I’m looking for:

How can I:

•   Animate the parent container’s opacity using CSS keyframes,

•   And still have the blur effect on child elements render properly throughout the animation?

Any workaround that maintains clean structure and future extensibility is welcome — whether it involves z-index layering, stacking context tricks, or best practices for isolating backdrop-filter from animation impact.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Toggle Container with Keyframe Fade</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            font-family: sans-serif;
            background-image: url('https://picsum.photos/1200/800');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        
        .container {
            display: inline-block;
            position: relative;
        }
        
        .shape-div {
            width: 400px;
            height: 400px;
            
            border-radius: 12px;
            background-color: rgba(0, 128, 0, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to   { opacity: 0; }
        }
        
        .fade-in {
            animation-name: fadeIn;
            animation-duration: 2s;
            animation-fill-mode: forwards;
        }
        
        .fade-out {
            animation-name: fadeOut;
            animation-duration: 2s;
            animation-fill-mode: forwards;
        }
        
    </style>
</head>
<body>
    
    <div id="myContainer" class="container">
        <div id="myShape" class="shape-div"></div>
    </div>
    
    <button onclick="toggleContainer()">Toggle Container</button>

    <script>
        let isVisible = true;
        const container = document.getElementById('myContainer');
        
        function toggleContainer() {
            
            if (isVisible) {
                container.classList.remove('fade-in');
                container.classList.add('fade-out');
            } else {
                container.classList.remove('fade-out');
                container.classList.add('fade-in');
            }
            
            isVisible = !isVisible;
            
        }
    </script>
    
</body>
</html>

Meta Tags Not Displaying Properly?

I have a self-image host I made with Amazon S3 and a Cloudflare worker, mainly for Discord. When I send links to images, it does not show my image at all, but it does show some of the other meta tags I have put in. The code is below:

async function handleRequest(request) {
  const userAgent = request.headers.get("user-agent");
  if (userAgent && userAgent.includes("Discord")) {
    const response = await fetch(request);
    if (response.status == 200) {
      const contentType = response.headers.get("content-type");
      if (contentType && contentType.startsWith("image/")) {
        const url = new URL(request.url);
        var date2 = new Date().toLocaleString("en-US", {timeZone: "America/Vancouver"});
        const filename = decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf("/") + 1));
        const title = "spheu.ca";
    //  const description = `File ID: ${filename}`;
        var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
        const color = `${randomColor}`;
    
        return new Response(`<html>

<head>
  <title>${title}</title>
  <meta charset="utf-8"></meta>
  <meta property="og:site_name" content="Random Hex Code: ${color}">
  <meta name="robots" content="noindex">
  <meta name="theme-color" content="${color}">
  <meta name="og:title" content="${title}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="${url.toString()}" />
<body>
  <img src="${url.toString()}">
</body>
</html>`, {
          headers: {
            "Content-Type": "text/html; charset=UTF-8"
          }
        });
      }
    }
    return response;
  }
  return fetch(request);
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

Instead of populating with the image that was uploaded with the twitter:card and twitter:image tags, it appears like this. Any help would be appreciated, TIA 🙂

Can two equivalent JavaScript generators be derived from each other?

I have two JavaScript generator functions for permutations and I would like to understand their relative merits.

From Robert Sedgewick‘s paper, Permutation Generation Methods (1977), we obtain the basic recursive algorithm on page 140:

To generate all permutations of P[1], • • •, P[N], we repeat N times the step: “first generate all permutations of P[1], •••, P[N-1], then exchange P[N] with one of the elements P[1], •••, P[N-1].”

A first JavaScript generator function can be derived like this:

function* permutations(n) {
    if (n == 1) yield P;
    else {
        for (let i = 1; i <= n; i++) {
            yield* permutations(n - 1);
            if (i < n) swap(n, heap(n, i));
        }
    }
}

Note that I have added the obvious recursion base case n==1 and a routinely chosen position of the yield statement. Also, to avoid “unnecessary” swaps during the last iteration of the for loop, there is the guard if (i < n). In this way, it seems to be equivalent to Heap‘s recursive algorithm given in Wikipedia. In any case, when called for N = 4 it reproduces Heap‘s enumeration as given in Sedgewick’s paper.

The following code is needed to run the generator:

var P = [], N, count; 

function swap(x, y) { let t = P[x]; P[x] = P[y]; P[y] = t }
function heap(n, i) { return (n % 2) || i }

N = 4;
for (let i = 1; i <= N; i++) P[i] = i;
count = 1;
for (p of permutations(N)) console.log(count++, ":", p.slice(1));

The other generator is this one:

function* permutations(n) {
    if (n > 1) {
        for (let i = 1; i <= n; i++) {
            yield* permutations(n - 1);
            if (i < n) { swap(n, heap(n, i)); yield P }
        }
    }
}

The main difference is the position of the yield statement, which was found “by inspection” (hard thinking), and the (apparently) missing base case, because it simply returns and does nothing.

This generator returns the same sequence of permutations as the first one, with one exception: the initially given permutation is not yielded, but must be treated on its own.

Is there one rigorous way to formally “deduce” or “derive” one generator from the other? This is in view of the fact that they are both “the same” (more or less). Is one of them to be preferred over the other?

Cookies set in one page but cant retrive in the other

I am building a Login/Signup page and am trying to set a cookie called “username” and it is being set as well but when i try to actuallly use it in the other it doesnot work.

these are my settings of the cookie

res.cookie(“otpToken”, otpToken, {
httpOnly: true,

  secure: false,
  maxAge: 60 * 60 * 1000
});

res.cookie("username", username, {
  httpOnly: true,

  secure: true,
  maxAge: 60 * 60 * 1000
});

its sets as i tested in post man but i am having really hard time retriving it as its undefiend evertime

I want to retrive the cookie from
const username = req.cookies.username;
const otpToken = req.cookies.otpToken;

but i cant in next page

How can I build a dynamic BMI calculator using JavaScript that gives color-coded feedback based on health categories? [closed]

I’m building a fitness web app (as part of a student project) where I want to include a BMI calculator. I want the result to dynamically show color-coded health categories — for example, red for underweight or obese, green for normal, and yellow for overweight — directly below the input form after calculation.

So far, I’ve created a form with inputs for height and weight and a button to calculate BMI using JavaScript. The BMI result shows correctly, but I’m struggling with how to dynamically style the feedback text and make it update with each new calculation.

I used JavaScript DOM manipulation to display the result using innerHTML, and tried applying CSS classes conditionally based on BMI values. However, the color updates don’t consistently apply, or sometimes the previous class styling remains.

How to set up a cluster in Yandex Maps to display the sum of the values ​from the labels, and not the number of labels themselves?

I use Yandex Maps and the ObjectManager library to display markers and cluster them. Each marker contains information about the number of employees, and I need the clustering to display not just the sum of the markers, but the sum of all employees from the markers combined into a cluster.

When clustering, I only get the number of markers in the cluster, but I need the sum of the number of employees at all markers in the cluster to be displayed. How can I set up clustering correctly to show the sum of people from the markers in the cluster?

Thanks in advance for your help!

ymaps.ready(function () {
    myMap = new ymaps.Map("map", {
        center: [55.778487, 37.672379],
        zoom: 4,
        controls: ['zoomControl']
    });

    // Create ObjectManager for manage tags
    objectManager = new ymaps.ObjectManager({
        clusterize: true,
        gridSize: 32,
        clusterDisableClickZoom: false,
        clusterIconLayout: 'default#pieChart',
        clusterIconSize: [40, 40],
    });

    myMap.geoObjects.add(objectManager);

    loadInitialMapData();
});

function addMarkerToMap(city, coordinates, employees) {
    const iconContent = employees.length.toString();
    const feature = {
        type: 'Feature',
        id: city,
        geometry: {
            type: 'Point',
            coordinates: coordinates
        },
        properties: {
            hintContent: `${city} - ${employees.length} employees`,
            balloonContent: generateBalloonContent(city, employees),
            iconContent: iconContent,
            employees: employees,
        },
        options: {
            iconSize: [80, 80],
            iconColor: '#1e98ff',
            hideIconOnBalloonOpen: false,
        }
    };
    objectManager.add(feature);
}

function loadInitialMapData() {
    const response = await fetch('/map_data');
    const markers = await response.json();
    markers.forEach(marker => {
        addMarkerToMap(marker.city, marker.coordinates, marker.employees);
    });
}

Embedded website with auto translate and currency exchange [closed]

I have been helping friends and family to buy products from Chinese apps such as Alibaba, Pinduoduo and Taoboa for a small fee. This is because I have been to China and I had access to some of their local payment systems such as Wechat pay which allows me to shop at their local market remotely.

The products I buy gets shipped directly to the local address of my shipping agent which I registered as my receiving address in China. Once the item is received, my agent sends me a message and then informs me of the date of shipment to my Country. The buyer then receives his or her item in a week’s time. Many people in my country have started showing interest in this service because it helps them to buy products not available locally at an affordable price. However, since the demand is getting higher, I want to look at the possibilities of automating the system so that I don’t need to be contacted whenever somebody wants me to order something for them online.

Here is what I have in mind. I want to build a website that can display the contents from the Chinese website translated in English and the prices changed from RMB to my local currency with the addition of the service fee, let’s say 1 – 2 % of the item cost. Once the buyer chooses a product to buy, they get referred to my own payment link that accepts local payment systems in my local currency. When the payment is completed, I received a notification to place an order with the product link. Then I click on the link, pay for the product in Chinese currency using local Chinese payment methods and then have it shipped to my country through my shipping agent.

I know this sounds like it’s impossible or very hard to do but I just want to explore my possibilities.

why spawnSync give different result than the actual command

when we have a file structure like that

/foo
  /bar
    a.json
    /baz
      b.json

and then you run git ls-files foo/bar/**/* it return both a.json and b.json

but if you write a script to do that

import { spawnSync } from 'node:child_process';

const pattern = 'foo/bar/**/*';

const lsFiles = spawnSync(
    `git`,
    ['ls-files', pattern],
    {
        encoding: 'utf8',
    },
).stdout;

console.log(lsFiles);

it only return b.json but not a.json

you can test it here https://github.com/robertIsaac/spawn-reprod

Why is Safari iOS rendering this Astro page scrolled down on navigation?

The demo can be found here:
https://astro-nano-demo.vercel.app/blog

Source code is here:
https://github.com/markhorn-dev/astro-nano

I’ve been trying to adopt this theme for my usage, but without a fixed header. However, I noticed that Safari on iOS sometimes renders pages on this site so that they are scrolled down a tad bit. This usually happens if the page is navigated to after having scrolled down. For example, go to blog on the demo site, click on the link “Markdown Syntax Guide”, and then notice that you can scroll a bit to the top. Notice there’s extra space between the fixed header and the “Back to Blog” button that is seemingly “hidden” because Safari has scrolled down a bit. If you scroll up, the space is bigger than what it is on first load.

Try as I may, I can’t really figure out what is going on here. Is it CSS? Astro navigation? Or Safari’s scroll restoration? I’ve tried several things in order to resolve this without success. I suspect it’s may be something in the Head component: https://github.com/markhorn-dev/astro-nano/blob/main/src/components/Head.astro but I couldn’t put my finger on what exactly.

3D Rotating Cube with Transparent Window to Background Video (Only Visible Through Cube)

I’m trying to build a 3D rotating cube with a smooth animation, where a single video plays in the background — but the video should only be visible through the cube’s faces, like looking through a window. The goal is to create the illusion that the video exists only behind the cube and is not visible anywhere else on the screen.

I’ve tried several approaches using CSS clip-path, mask, and even WebGL, but I keep facing issues like:

The video appears outside the cube area.

The video is duplicated on all cube faces instead of staying in the background.

I can’t make the cube act like a window while hiding everything else.

What I want:

A 3D cube with a smooth continuous rotation.

One video positioned behind the cube.

The video should only be seen through the cube (not outside it).

The cube should not have the video mapped on all six faces — just act as a viewing window.

Any suggestions, code samples, or best practices would be appreciated! I’m open to using CSS, Three.js, or a combination. Thanks in advance! here is my jsx –

import '../../styles/Cube3D.css';

const Cube3D = () => {
  return (
    <div className="scene">
      <div className="cube">
        <div className="face-wrapper front">
          <div className="face-blur">
          </div>
          <div className="face-content">Front Face</div>
        </div>
        <div className="face-wrapper back">
          <div className="face-blur"></div>
        </div>
        <div className="face-wrapper right">
          <div className="face-blur"></div>
        </div>
        <div className="face-wrapper left">
          <div className="face-blur"></div>
        </div>
        <div className="face-wrapper top">
          <div className="face-blur"></div>
        </div>
        <div className="face-wrapper bottom">
          <div className="face-blur"></div>
        </div>
      </div>
    </div>
  );
};

export default Cube3D;

and here is my css –

.scene {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  background-color: rgb(0, 0, 0);
  /* background-image: url('../../assets/image1.png'); */
  /* overflow: hidden; */
}
.cube {
  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  animation: spinCube 5s linear infinite;
  animation-delay: 3s;
  z-index: 1;
}

.front .face-content {
  animation: fadeOutText 5s linear infinite;
  animation-delay: 3s;
}

@keyframes spinCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
  }
  10% {
    transform: rotateX(-7deg) rotateY(-25deg) rotateZ(4deg)
      scale3d(1.1, 1.1, 1.1);
  }
  25% {
    transform: rotateX(-14deg) rotateY(-51deg) rotateZ(10deg)
      scale3d(1.3, 1.3, 1.3);
  }
  45% {
    transform: rotateX(-21deg) rotateY(-76deg) rotateZ(12deg)
      scale3d(1.5, 1.5, 1.5);
  }
  60% {
    transform: rotateX(-25deg) rotateY(-120deg) rotateZ(12deg)
      scale3d(1.6, 1.6, 1.6);
  }
  75% {
    transform: rotateX(-21deg) rotateY(-240deg) rotateZ(10deg)
      scale3d(1.75, 1.75, 1.75);
  }
  90% {
    transform: rotateX(-14deg) rotateY(-300deg) rotateZ(4deg)
      scale3d(2.5, 2.5, 2.5);
  }
  100% {
    transform: rotateX(-7deg) rotateY(-360deg) rotateZ(0deg) scale3d(3, 3, 3);
  }
}

@keyframes fadeOutText {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

/* Cube Faces */
.face-wrapper {
  position: absolute;
  width: 250px;
  height: 250px;
  clip-path: polygon(
    5% 0%,
    95% 0%,
    100% 5%,
    100% 95%,
    95% 100%,
    5% 100%,
    0% 95%,
    0% 5%
  );
  /* overflow: hidden; */
}

.face-blur {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
  /* background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.1)
  ); */
  backdrop-filter: blur(6px) brightness(1.1);
  -webkit-backdrop-filter: blur(6px) brightness(1.1);
  z-index: 0;
}

.face-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  text-align: center;
  font-size: 2.2rem;
  font-weight: bolder;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(0, 255, 255, 0.2), 0 0 40px rgba(0, 255, 255, 0.15);
}

/* Cube Faces Positions */
.front {
  transform: translateZ(125px);
}
.back {
  transform: rotateY(180deg) translateZ(125px);
}
.right {
  transform: rotateY(90deg) translateZ(125px);
}
.left {
  transform: rotateY(-90deg) translateZ(125px);
}
.top {
  transform: rotateX(90deg) translateZ(125px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(125px);
}