Category: javascript

Ive been looking around the bitrix24 documentation about the way to embed widgets in all the CRM objects, nevertheless, I have not found anything conclusive. All I want is a way to embed a javascript script, or maybe an HTML page inside the details view of a leads or deals card. All Ive seen there is a way to add a tab inside menus, but is not what I want. I want a way, when A lead is opened, a pop up appears, in case it is dupplicated, I know how would I detect whether a deal or lead is duplicated, but nothing of how can I customize these views.

I’m running supabase database using docker on my pc. I have an organizations table and a memberships table for my platform. My memberships has a foreign key reference to the organizations table via the organization’s id.

CREATE TABLE organizations (
  id SERIAL PRIMARY KEY,
  creator_id INT NOT NULL,
  name VARCHAR(255) UNIQUE NOT NULL,
  url VARCHAR(255) UNIQUE NOT NULL,
  picture VARCHAR(255) NULL,
  mission TEXT NULL,
  purpose TEXT NULL,
  benefit TEXT NULL,
  appointment_procedures TEXT NULL,
  uniqueness TEXT NULL,
  meeting_schedule TEXT NULL,
  meeting_days VARCHAR(255) NULL,
  commitment_level org_commitment DEFAULT 'NONE',
  keywords TEXT NULL,
  tags TEXT NULL,
  is_returning BOOLEAN DEFAULT false,
  returning_info TEXT NULL,
  state org_state DEFAULT 'PENDING',
  joinable BOOLEAN DEFAULT true,
  join_instructions TEXT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE memberships (
  id SERIAL PRIMARY KEY,
  organization_id INT NOT NULL,
  user_id INT NOT NULL,
  role org_role DEFAULT 'MEMBER' NOT NULL,
  role_name VARCHAR(255),
  active BOOLEAN DEFAULT false NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (organization_id) REFERENCES organizations(id) on delete cascade,
  FOREIGN KEY (user_id) REFERENCES users(id) on delete cascade,
  CONSTRAINT no_duplicate_joins UNIQUE(organization_id, user_id)
);

However, I added an additional constraint to try to get an ON DELETE CASCADE to my relationship.

ALTER TABLE memberships
ADD CONSTRAINT delete_cascade FOREIGN KEY (organization_id) REFERENCES organizations(id)
  ON DELETE CASCADE;

Once I added this, I got an ambiguous embedding error when trying this query.

let { data, error } = await supabase
          .from("users")
          .select(
            `
              id,
              first_name,
              last_name,
              email,
              grad_year,
              picture,
              is_faculty,
              active,
              memberships (
                  id,
                  role,
                  role_name,
                  active,
                  organizations (
                      id,
                      name,
                      url,
                      picture,
                      meetings (
                          title,
                          description,
                          start_time,
                          end_time,
                          rooms (
                              name
                          )
                      )
                  )
              )
          `,
          )

I get this error

hint: "Try changing 'organizations' to one of the following: 'organizations!delete_cascade', 'organizations!memberships_organization_id_fkey'. Find the desired relationship in the 'details' key.", message: "Could not embed because more than one relationship was found for 'memberships' and 'organizations'"}
details: [
"delete_cascade using memberships(organization_id) and organizations(id)",
"memberships_organization_id_fkey using memberships(organization_id) and organizations(id)"
]

Which would make sense as there are two duplicate relationships. However, once I deleted the delete_cascade relationship, I still got the ambiguous embedding error stating that the delete_cascade relationship was still there. I tried deleting the whole database (by deleting all the volumes associated with it) and recreating it completely and the problem still persists. I checked every table and schema to see if any remaining data associated with the delete_cascade relationship still exists, but I haven’t found anything.

EDIT:
when I try to specify the relationship by replacing
organization with organizations with organizations!delete_cascade, it says that delete_cascade relation doesn’t exist. Yet, if I don’t specify, it will say that delete_cascade and the foreign key are conflicting relations and I need to specify which one I want.

I am looking for a way to print little sticky labels. My main application for that task is a webapp using html and javascript on a iphone/android. I need a good printer and prefarably connect to it via the mobile phones bluetooth and print via javascript. Any suggestions?

I have a dymo label printer but it only works with a driver installed on windows. It doesn’t work on mobile. Mobile is a requierement.

I have a page with multiple carousel rows, but whenever I click on the button “next” or “prev” to show the other items of the carousel it impacts all carousels, not only the clicked one.

I have tried separating them in partial views so each js is executed only in its context, but it is still the same problem.

I want to be able to see the next item and the previous independently from another

If possible I wanted the js to get only items inside the partial view, but if there’s other solution I am open to hear

js:

$(document).ready(function () {
    const multipleItemCarousel = document.querySelector('#carouselExample')
    if (window.matchMedia('(min-width: 576px)').matches) {
        const carousel = new bootstrap.Carousel(multipleItemCarousel, {
            interval: false
        })

        var carouselWidth = $('.carousel-inner')[0].scrollWidth;
        var cardWidth = $('.carousel-item').width();

        var scrollPosition = 0;

        $('.carousel-control-next').click(function () {
            if (scrollPosition < carouselWidth - (cardWidth * 4)) {
                scrollPosition += cardWidth;
                $('.carousel-inner').animate(
                    { scrollLeft: scrollPosition },
                    600
                );
            }
        });

        $('.carousel-control-prev').click(function () {
            if (scrollPosition > 0) {
                scrollPosition -= cardWidth;
                $('.carousel-inner').animate(
                    { scrollLeft: scrollPosition },
                    600
                );
            }
        });
    }
    else {
        $(multipleItemCarousel).addClass('slide');
    }

});

In this code snippet, I have simplified a version of my problem

What I want:

I have a game (represented by the green background). And on top of that game, I want to draw a slightly transparent image that was drawn and fetched with HTML canvas (represented by the opaque blue square)

The Issue:

The image is a slightly transparent blue, however the green background isn’t showing.
I want the background (the game) to show through the image

//Fetch HTML Canvas
var canvas = document.getElementById("context");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var width = canvas.width;
var height = canvas.height;

//draw a rectangle with a 50% transparency
ctx.fillStyle = "rgba(47, 0, 255, 0.5)";
ctx.fillRect(10, 10, 100, 100);

//fetch the image
var a = ctx.getImageData(10, 10, 100, 100);

//background
ctx.fillStyle = "green";
ctx.fillRect(0, 0, width, height)

//lay the image down
ctx.putImageData(a, 150, 150);

<canvas id="context"></canvas>

I have already tried capturing the image on a transparent background, but that doesn’t seem to work. Every transparent image will not allow the backdrop to show through said image.

I also tried using the ctx.globalAlpha = NUM; command, but that doesn’t work in any part of the program either

I declared a variable in the .then of a function calling an api and I was wondering how to make it global.

I tried this:

    var apiResponse;
     function run(){
         var input = document.getElementById("serchbar").value; 
         var firs = input.split(' ')[0]; 
         var seco = input.split(' ')[1]; 
         console.log(firs); 
         console.log(seco); 
         fetch(`https://api.weatherapi.com/v1/current.json?q=${firs}%2C%20${seco}&key=91c2039590b440a28b8203430240503`) 
            .then(response => response.json()) 
            .then(data => { var apiResponse = (data); 
                console.log(apiResponse.current.temp_c); }) 
            .catch(error => console.error(error)); 
         console.log(apiResponse)
    }

But,when I console logged outside of the .then, I got an undefined

I’m new to react and i use vite I want to create web extension with background and content script

the background.jsx is empty for now and here it is the content.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App.jsx"

const root = document.createElement('div')
root.id = "react-root"

document.body.appendChild(root)

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

it just add root div to the host site and render the app component in it

( the App is component for pupop that need to be added to the current visible tab )

the problem is that i can’t access the content.jsx in the manifest.json

if i put the content.jsx in /public after building it remains as .jsx and i can’t use that in web extension

and if i put it in /src it adds it to the index.js with all the App codes so i can’t use it either

my project is a miss because it’s my first project with react & vite i know how to make web extensions but only with vanilla javascript so it might be ease problem to solve but the tutorials i watched only uses the index.html as popup or something else with no background.js or content.js

So basically I wanted to alter the opacity of an element in a grid using an event listener. In this event listener I would get the opacity of the element and increment it by 0.1. I used to do this using the following code

square.addEventListener("mouseover", function (e) {
            let opacity = e.target.style.opacity;
            if (opacity + 0.1 < 1) {
                e.target.style.opacity = opacity + 0.1;
            } else if (opacity + 0.1 >= 1) {
                e.target.style.opacity = 1;
            }
        });

Where square stands for the following

const cont = document.querySelector(".cont");
const square = document.createElement("div");

And then I append the square.

cont.appendChild(square);

Well, the problem I have could be described as follows. The opacity is only incremented to 0.1 and if you hover again over the square element the opacity is 0.1 every time, it will never increase. I have the theory that the opacity of the div element is in each iteration initialized to 0. This suspicion arises when I thought about this problem but it looks confirmed by a very nice solution I came across Reddit

square.addEventListener("mouseover", function (e) {
            let opacity = e.target.style.opacity;
            if (opacity) { 
                e.target.style.opacity = Number(opacity) + 0.1 ;
            } else { 
                e.target.style.opacity = 0.1;
            }});

This seems to look for a truthy value in the content of the opacity.

Thanks in advance for your interest to everybody.

I am using axios to run get and post methods for my web app. However, I am running into the issue of posting order information to my ‘ordered’ table. I have a function that submits the data through axios but it doesn’t get added to my table for some reason.

Here is the function for the front end:

const [order, setOrder] = useState({
    specBurger: "test",
    protein: "test",
    bread: "test",
    toppings: "test",
    sides: "test",
    drinks: "test",
    price: 20.00
})
const navigate = useNavigate();
const processOrder = async e =>{
    e.preventDefault();
    try{
        await axios.post("http://localhost:8800/ordered", order);
        navigate("/pages/Confirmation");
    }catch(err){
        console.log(err);
    }
}

Here’s the backend:

app.get("/ordered", (req, res)=>{
const q = "SELECT * FROM ordered";
db.query(q,(err,data)=>{
    if(err) return res.send(err)
    return res.json(data)
})

})

app.post("/ordered", (req,res)=>{
const q = "INSERT INTO ordered(`OrderID`,`SpecBurger,`Protein`,`Bread`,`Toppings`,`Sides`,`Drinks`,`Price`) VALUES (?)";
const values = [
    req.body.specBurger,
    req.body.protein,
    req.body.bread,
    req.body.toppings,
    req.body.sides,
    req.body.drinks,
    req.body.price,
];

db.query(q, [values], (err,data)=>{
    if(err) return res.send(err)
    return res.json(data)
})

})

Also here is my tables definition in MySQL:

CREATE TABLE `DSBurgers`.`ordered` (
`OrderID` int NOT NULL AUTO_INCREMENT,
`SpecBurger` varchar(100),
`Protein` varchar(20),
`Bread` varchar(20),
`Toppings` varchar(100),
`Sides` varchar(100),
`Drinks` varchar(100),
`Price` decimal(5,2) DEFAULT NULL,
PRIMARY KEY (`OrderID`)

);

For a Vue project I’m working on, I need to display an image, zoom/pan on it and place/move markers on it (while noting the exact position of the marker on the image).
here is an similar example on what it should look like (without the outline)

I haven’t found a library doing this so I’m searching the best way to resolve this problem.
As I am not a pro in frontend (prefer coding backend), I need a little bit of guidance. After that I can find the specifics later.

I’ve seen here that using canvas should be better for image manipulation but canvas2D doesn’t suit my requirements as I need to be able to drag elements (markers) on my image.

Should I try it Webgl or stick with DOM elements??

Also are scrollbar necessary on the viewport or using “transform: translate()” should be enough???

I am creating a random color generator and I am making it in such a way that you can select general colors for it to generate (that is the reason for the redLowerLimit, greenUpperLimit, etc…)

The issue that I am having is simply taking the random RGB color that is generated in the getColor() function and applying it to the colorBox background-color. I have it set to run on a button click event and it does generate a new random color every time it is clicked, it simply won’t apply that random color to the background color.

I know that the issue lies in the colorChange() function and/or the #colorBox in css. I have tried various mutations all with zero success, even ChatGPT says that my code should be running properly.

I have tried using the setProperty() method in the changeColor() function but it seems to only work with specific color strings, for example .style.setProperty(‘background-color’, ‘blue’) works but .style.setProperty(‘background-color’, variable) does not work.

below is relevent css code.

#colorBox {
    /*--color: red;
    background-color: var(--color);*/

    height: 300px;
    width: 300px;
    z-index: 5;
}

below is relevent js code.

let redUpperLimit = 255;
let greenUpperLimit = 255;
let blueUpperLimit = 255;

let redLowerLimit = 0;
let greenLowerLimit = 0;
let blueLowerLimit = 0;

let randomRed = 0;
let randomGreen = 0;
let randomBlue = 0;



const newColorBtn = document.getElementById('newColorBtn');
newColorBtn.addEventListener("click", changeColor);





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

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

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




function getColor() {
    randomRed = getRed(redLowerLimit, redUpperLimit);
    randomGreen = getGreen(greenLowerLimit, greenUpperLimit);
    randomBlue = getBlue(blueLowerLimit, blueUpperLimit);
    
    return `rgb(${randomRed},${randomGreen},${randomBlue});`;
};


function changeColor() {
    const changeColorBox = document.getElementById('colorBox');

    const randomRGB = getColor(); // Get a new random RGB color

    console.log("New color:", randomRGB); // Log the new color value
    
    changeColorBox.style.backgroundColor = randomRGB; // Set the background color of the colorBox
    
    console.log("Background color:", changeColorBox.style.backgroundColor); // Log the background color of the element
    
    console.log("Computed color:", getComputedStyle(changeColorBox).backgroundColor);
}



/*
function changeColor() {
    let newColor = `${randomRGB}`;

    const changeColorBox = document.getElementById('colorBox');
    
    changeColorBox.style.setProperty('background-color', newColor);

    console.log(newColor);
}
*/

I want to extract the following string:

/e670d0d1-bcf2-47f7-879b-64ab40600ff8-u1/mask_00005.png

from this test string:

https://s3.us-east-005.backblazeb2.com/ph/e670d0d1-bcf2-47f7-879b-64ab40600ff8-u1/mask_00005.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=005dc68faa31bb70000000004%2F20240417%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240417T092401Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a82f66f63086597ab49651ba91edb31133875d64415ecb54317c8766df0b0950

(?<=https://s3.us-east-005.backblazeb2.com/ph)(.*)(?=?X-Amz-Algorithm)

Tried on https://regex101.com/ but it doesn’t return anything and I don’t understand why.

Upon npm start, I am running into this error:
Module not found: Can’t resolve ‘@vercel/analytics/react’ in ‘C:path-to-react-apptrivia-appsrc’
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat ‘C:DumpStack.log.tmp’

As per instructions in https://vercel.com/docs/analytics/quickstart, I ran npm i @vercel/analytics and added import { Analytics } from "@vercel/analytics/react"; in my App.js file.

I have tried all of this so far:

• delete package-lock.json and rerun npm install.
• tried import { Analytics } from "@vercel/analytics"; instead

These are the packages in my package-lock.json:

  "packages": {
    "": {
      "name": "trivia-app",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@vercel/analytics": "^1.2.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.22.3",
        "react-scripts": "^3.0.1",
        "web-vitals": "^2.1.4"
      }
    },

This is how my App.js is organised:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import WelcomePage from './components/WelcomePage';
import QuizPage from './components/QuizPage';
import ResultsPage from './components/ResultsPage';
import { Analytics } from "@vercel/analytics/react";

function App() {

  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<WelcomePage />} />
          <Route path="/quiz" element={<QuizPage />} />
          <Route path='/results' element={<ResultsPage />} />
        </Routes>
      </Router>
      <Analytics />
    </>
  );
}

export default App;

I have an enum:

export enum Language {
  enUS = 1,
  zhHant = 2
};

I want a function that can efficiently get me the key based on the value passed:

export enum Language {
  enUS = 1,
  zhHant = 2
};

const languageMap = new Map<number, Language>(
  Object.entries(Language).map(([key, value]) => [parseInt(key), value as Language])
);

const mapLanguage = (languageCode = 1): Language | null => {
  return languageMap.get(languageCode) || null;
};

What is the most performant way because imagine this method is used against a million entries? Is it to use Map and Map.get()?

I have made a menu where by clicking one icon, the rest become visible. However, it only becomes visible for a second then disappears.
When I press the menu icon, I want the rest to be visible for the whole time, so to permanently change the visibility. For some reason this doesn’t work.

function showMenu() {
  var len = document.getElementsByClassName("button");
  for (var i = 0; i < len.length; i++) {
    len[i].style.visibility = "visible";
  }
}

.topnav {
  position: fixed;
  width: 98%;
  height: 60px;
  overflow: hidden;
  top: 0;
  border: 2px solid black;
  border-radius: 10px;
  padding: 5px;
  background-color: white;
  opacity: 0.5;
}

.topnav:hover {
  opacity: 1.0;
}

.material-symbols-outlined {
  transform: scale(2);
}

#welcome {
  margin-top: 80px;
}

.button {
  float: left;
  color: #000000;
  text-align: center;
  padding-top: 12px;
  text-decoration: none;
  height: 50px;
  width: 130px;
  margin-right: 5px;
  visibility: hidden;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

.topnav a#active {
  background-color: #4bc497;
}

.topnav-right {
  float: right;
}

<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="topnav">
  <a href="" style="visibility: visible;" onclick="showMenu()" class="button"><span class="material-symbols-outlined">menu</span></a>
  <a href="home.html" id="active" class="button">Home</a>
  <a href="aboutme.html" class="button">About Me</a>
  <a href="projects.html" class="button">Projects</a>
  <a href="contact.html" class="button">Contact Me</a>
  <div class="topnav-right">
    <a href="home.html" class="button"><span class="material-symbols-outlined">home</span></a>
    <a href="aboutme.html" class="button"><span class="material-symbols-outlined">person</span></a>
    <a href="projects.html" class="button"><span class="material-symbols-outlined">workspaces</span></a>
    <a href="contact.html" class="button"><span class="material-symbols-outlined">contact_mail</span></a>
  </div>
</div>