Category: javascript

when i try to connect the Postgres Database i add the DB in the AWS RDS so i cant Connect it with my Node JS how To Solve ? this is the Error when i try to Connect the DataBase.

when i try to connect the Postgres Database NOT CONNECTING

I want to close this Mui dropdown when i clicked an option . Currently I can’t close
Is there any way to close this
<Autocomplete
id=’select-status’
freeSolo
options={[‘Active’, ‘InActive’]}
onInputChange={(e, newValue) =>
setPlateFormData({ …plateFormData,IsActive: newValue })}
value={plateFormData.IsActive}
renderInput={(params) =>
<sdkMui.TextField {…params}
size=’small’label=”Status” name=’IsActive’ />}

/>

I want to close the dropdown when i click an optio

I tried to use the audio tag through the variable, but it didn’t explore. Please help me.

This is in tag script

<script setup>
import { ref } from 'vue'
import data from '../../../data/game3/data2.json'

const music = ref(data.categories[0].units[0].items[0].pronunciation)

console.log(music.value) //when  log it show ../../assets/pronunciation/apple.mp3 which is the right path

</script>

And this is in template tag

<template>
  <div>
    {{ music }}

    <audio controls>
      <source :src="music" type="audio/mp3" />
    </audio>

    <audio controls>
      <source src="../../assets/pronunciation/apple.mp3" type="audio/mp3" />
    </audio>
  </div>

The first one is not working can you guys help me please. (I’ve tried several browsers and they’re all the same.)

chunk-SAKU7T62.js?v=c09a6d03:819 Uncaught Error: Service storage is not available
    at Provider.getImmediate (chunk-SAKU7T62.js?v=c09a6d03:819:15)
    at getStorage (firebase_storage.js?v=c09a6d03:2890:43)
    at firebase.js:32:17

everything is initialized correctly and was working up until last night. I didn’t even change anything related to firebase. and last night boom. I got this error. I tried to roll it back so much further. I tried everything. but it’s still giving me the above error.

I tried rolling it back and tried updating the firebase functions and sdk.

The problem is that the website is laggy, becuase I am rendering thousands of objects. I am trying to solve this problem to get better UX.
I am importing 1 GLTF object (myModel). I also have a json file (myJson), which contains how much object and where should I place them. It also contains if the object needs to be rotated.
I think if i could merge all objects into 1, then the website would be not laggy.
How could I do that?
The whole js code:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import myJson from './output.json';

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(10, 10, 10);
const orbit = new OrbitControls(camera, renderer.domElement);
orbit.update();

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const assetLoader = new GLTFLoader();
let model = null

assetLoader.load("./myModel.gltf", function (gltf) {
    model = gltf.scene;

    let objects = []

    if (model) {
        for (let i = 0; i < myJson.length; i++) {
            let XCoordinate = myJson[i].XCoordinate
            let YCoordinate = myJson[i].YCoordinate

            let myModel = model.clone()
            objects.push(myModel)
            objects[objects.length - 1].position.set(XCoordinate, 0, YCoordinate);
            scene.add(objects[objects.length - 1]);
        }
        for (let i = 0; i < objects.length; i++) {
            if (myJson[i].needRotate) {
                objects[i].rotateX(Math.PI / 2)
            } else {
                objects[i].rotateX(-Math.PI / 2)
            }
        }
    }

}, undefined, function (error) {
    console.error(error);
});



function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};
animate();

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

On our project we use RTK Query and we have the following situation:

On back wed we have endpoints, for simplicity, /api/green/cars/, /api/blue/cars and /api/red/cars that share the same data structure.

My colleagues couldn’t agree whether we should create 3 separate RTK endpoints for them: getGreenCars, getBlueCars, getRedCars with static urls or if we should create one endpoint with a dynamic address:

getCars: build.query({
  query: (color) => ({
    url: `/api/${color}/cars`
    method: 'GET'
  })
})

Those who favor the one endpoint solution say that it will allow us to avoid code duplication.

Those who favor the multiple endpoints solution say that it will keep our code more clear (one rtk endpoint per one back end endpoint) as well as we will be able to implement tags properly (there will be POST, PUT and DELETE too, so we have to keep that in mind).

We are pretty much in a deadlock so I wonder if anyone knows a good piece of theory about this or has experienced something similar so there is an unambiguous decision for this situation.

There is a browser. (js)
There’s a server. (golang)
There is an android smartphone. (c++)
Task: Broadcasting photo-video from a browser to a smartphone without loss of quality and resolution of the image.
I want to know modern methods of realization of this task. How can I realize the broadcast with minimal delay.
At the same time we should take into account that AOSP by standard is limited by the availability of libraries.

Now on the site I have created a canvas within which I am able to scale the image and move it within the canvas. Recursively js function takes the image blob from the canvas and sends it with websocket to the server. The server runs on golang, this language was chosen because of its simplicity and fast speed. The server takes the blob image, converts it to a YUV image, divides the image into 4 parts and sends simultaneously 4 separate threads using tcp to 4 different ports. The smartphone has 4 ports open, 4 independent threads that receive the image, connect the image and the output is a whole image with no loss of quality.
For example I sent a 3000x4000px image from my browser, that’s the image I got on my smartphone.
As a result I have a big delay. I am testing on a local network. And if I test remotely via the Internet, the delay will be even greater. And this is me sending a photo with online editing. And if I send video frame by frame, then the delay will be even greater.
Please point out my mistakes. Perhaps there are ways of better realization of the task.

throw new ApiError(500,”something went wrong while generating refresh and access token”)
^

ApiError: something went wrong while generating refresh and access token

i want the user to login
and it is throwing the error that something went wrong while generating refresh and access token

i attached image of my code below

enter image description hereenter image description hereenter image description hereenter image description hereenter image description hereenter image description hereenter image description here

I’m currently working on a project that involves a Three.js canvas with OrbitControls for interactive 3D visualization. However, I’m facing difficulty in synchronizing scrolling between the Three.js canvas and the rest of the page content.

The issue is that while I can scroll through the page content outside the canvas, scrolling inside the canvas using OrbitControls only affects the zooming along the z-axis of the 3D scene, but it doesn’t scroll the entire page. What I want to achieve is synchronized scrolling between the canvas and the page content, so that when I scroll inside the canvas, it also scrolls the entire page content, and vice versa.

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer( { alpha: true } );
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor( 0x000000, 0 );
  document.body.appendChild(renderer.domElement);
  scene.background = null;
    document.getElementById('canvas').appendChild(renderer.domElement);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableZoom = true;

    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

 body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    #container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow-y: auto;
      perspective: 1000px;
    }
    canvas {
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 999999;
      width: 100vw;
      height: 100vh;
    }
    .content {
      padding: 20px;
    }

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrolling Example</title>
</head>
<body>
  <div id="container">
    <canvas id="canvas"></canvas>
  </div>
  <div class="content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
    <!-- Add more content here -->
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</body>
</html>

My first attempt at getting text from the clipboard resulted in the ‘document not focused’ error (not using DevTools) – then managed to get to it returning ‘[Object Promise]’ and now it returns ‘2’ (which is not the text on the clipboard). I have tried every which way but drunk to get this to work and it’s probably a combination of some of the failed attempts. Any pointer will be appreciated.

I have noticed that using setTimeout stops the ‘document not focused’ problem, but there is not a three second delay.

async function readClipboard() {
try {
     const myText = setTimeout(async()=>(await navigator.clipboard.readText()), 3000); 
     alert(myText); 
          } catch(err) {
     alert(err); 
         } 
 }
readClipboard(); 

This returns ‘undefined’ and if I give the variable a text value (xxx) it just returns that not the clipboard text!

async function readClipboard() {
var myText // = 'xxx';

try {
    setTimeout(async()=>(myText = await navigator.clipboard.readText()), 3000); 
    alert(myText); 
    
} catch(err) {

    alert(err); 

}

}


readClipboard(); 

Whenever I try to access /contact/product it works perfectly fine. But when I try to access it directly or I refresh whilst I’m on the page the page just becomes empty.

My routing:

<Router>
      <ScrollToTop />
      <Nav></Nav>
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/contact/:product" element={<Contact />} />
        <Route path="/privacy-policy" element={<Privacy />} />
        <Route path="/cookie-policy" element={<Cookies />} />
        <Route path="/pricing" element={<Pricing />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
      <Footer></Footer>
    </Router>

The contact component:

import React from "react";
import ContactForm from "../components/Contact/ContactForm";
import "../style/Contact/Contact.scss"
import "../style/Contact/Breakpoints.scss"
import useDocumentTitle from "../lib/useDocumentTitle";

function Contact() {
  useDocumentTitle("Contact")
  return (
    <div id="contact">
      <div className="container">
        <div className="row">
          <div className="contact--left left">
            <h1 className="contact--title title">
              Let&#x2019;s build something great together
            </h1>
          </div>
          <div className="contact--right right">
            <ContactForm />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Contact;

I’ve tried making /product go to another component but it still doesnt work.

I’m building a PWA that I want to work fully offline after visiting the root ‘/’ page of the site. There are three pages that I want to have access to offline (including all their dependencies).

I’ve set up preCacheAndRoute and it seems to add the pages to the cache (I can see them) and the header seems to be OK:

When I switch the server to offline mode and then visit /audit/edit (via an A tag click from ‘/’) workbox says it cant find the file in cache, then tries the network, fails.. and then errors out.

service_worker.js.erb (JS with a small amount of ruby to get the path to fingerprinted files)

self.addEventListener('activate', event => {
    event.waitUntil(self.clients.claim());
});

importScripts("https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js")

const {CacheFirst, NetworkFirst, StaleWhileRevalidate, CacheOnly} = workbox.strategies;
const {registerRoute, setCatchHandler} = workbox.routing;
const {warmStrategyCache} = workbox.recipes;
const {precacheAndRoute} = workbox.precaching;
const {CacheableResponsePlugin} = workbox.cacheableResponse;

<% controllers = Dir.glob('app/javascript/controllers/**/*.js') %>
precacheAndRoute([
        {url: '/', revision: null},
        {url: '/audits/edit', revision: null},
        {url: '/templates/list-detail-index', revision: null},
        {url: '/templates/list-detail-pdf', revision: null},
        {url: '/templates/defect-card-edit', revision: null},
        {url: '/templates/defect-card-pdf', revision: null},
        {url: '/templates/defect-staged-image', revision: null},
        {url: '<%= asset_path('application.js') %>', revision: null},
        {url: '<%= asset_path('application.css') %>', revision: null},
        {url: '/assets/utils/indexedDB', revision: null},
        {url: '/assets/services/TemplateService', revision: null},
        {url: '/assets/gateways/ClixifixAPI', revision: null},
        {url: '/assets/utils/FileUtils', revision: null},
        {url: '/assets/services/PDFService', revision: null},
        {url: '<%= asset_path("exifr.js") %>', revision: null },
        {url: '/assets/services/ExifService', revision: null},
        {url: '/manifest.json', revision: null},
  ],
    {
        // Ignore all URL parameters.
        ignoreURLParametersMatching: [/.*/],
        directoryIndex: null,
    }
);

 registerRoute(
     ({url}) => ['/', '/audits/edit',].includes(url.pathname),
     new NetworkFirst({
         cacheName: 'forms-home'
     })
 );


registerRoute(
    ({request}) => ['script', 'style', 'manifest', 'font'].includes(request.destination),
    new NetworkFirst({
        cacheName: 'assets-styles-scripts',
    })
);

registerRoute(
    ({request}) => request.destination === 'image',
    new NetworkFirst({
        cacheName: 'assets-images'
    })
);

registerRoute(
    ({request, url}) => !['/audits/edit', '/audits/edit/'].includes(url) && request.destination === "document" ||
        request.destination === "",
    new NetworkFirst({
        cacheName: 'documents',
    })
)

The service worker is loaded by a companion/js file

if (navigator.serviceWorker) {
    navigator.serviceWorker.register("/service-worker.js", { scope: "/" })
        .then(() => navigator.serviceWorker.ready)
        .then(() => console.log("[Companion]", "Service worker registered!"));
}

The templates that are precached are requested via the same mechanism and seem to work OK (accessed via ‘/’).

Ive gone round in circles with this for days now so I’d appreciate any help

I am using RecordRTC library in my project in nextjs, but it is showing error node_modules/recordrtc/RecordRTC.js (1586:0) @ eval

TypeError: Cannot set property navigator of #<Object> which has only a getter

My code is

 navigator.mediaDevices.getUserMedia(mediaConstraints).then((stream)=>{
          var options:{
            mimeType:"audio/wav",
            numberOfAudioChannels:1|2,
          } = {
            mimeType: "audio/wav",
            numberOfAudioChannels: 1,
            };
            let record = new RecordRTC(stream,options);
            record.startRecording();
            setRecordRtc(record);
        });

where mediaConstraints is

 let mediaConstraints = {
      video: false,
      audio: true
      };

I went to RecordRTC.js at 1586 line and i got

 global.navigator = {
        userAgent: browserFakeUserAgent,
        getUserMedia: function() {}
    };

I don’t know what wrong i am doing, please help me.
Also i am doing client render in nextjs to render this component to use navigator, still i am getting this error.

I have tried looking for solution on its github lib . Also tried to see if there is error in this library with nextjs but no luck so far.

I’m using react to send date to server but there is an error

{message: ‘Invalid date format. Date should be in the format YYYY-MM-DD.’, field: ‘from’}

I’m completely sure the data is valid and here is the code

   const handleFilter = async (e) => {
    e.preventDefault();
    console.log(fromDate);
    console.log(toDate);
    try {
      const date = {
        from: dayjs(fromDate).format("YYYY-MM-DD"),
        to: dayjs(toDate).format("YYYY-MM-DD"),
      };
      console.log(date);
      const res = await newRequest.get("/analysis", date);
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

and there is the console

I’m tried a lot of answers like
JSON.stringify(date);
before sending
nothing work !!!

I have a multiple choice question, where the respondent can choose between two images, which are next to each other. On the next page the answer choices should show in the exact same way, preferably with the selected radio button (where they can not change it anymore) as I want the respondents to ask further questions about their choice. The multiple choice question, and the next page with the answer choices and further questions are in the same block.

I already tried to pipe it from the previous question, but this way the answer choices (images) are comma seperated and below each other.

Thus I want to store the respondents’ responses in an embedded data variable and then display the same answer choices with their responses remaining selected again.

I tried to do it with Javascript but I could not figure it out as I am new to it:

• First I created an embedded data variable at the very top of the survey flow called “choice”.

• Then I added this code to the question (Q1):

   Qualtrics.SurveyEngine.addOnPageSubmit(function(){
  
   var answer = this.questionContainer.querySelector(".q-checked")
  
   Qualtrics.SurveyEngine.setEmbeddedData("choice", answer);
   });
  

• and then I just inserted the embedded data “choice” as piped text in Q2, but it shows nothing in the survey, it is just a blank space.

Note: I am using the ‘simple’ layout.