Category: javascript

I have a sticky header in a FlatList that scales and translates Y property on scroll. I want to have a component inside and on top of the image, however, I want this component to be at the bottom of the animated image at all times. (absolute position). I’ve tried the below however, the scale of my AnimatedImage is being applied to the inside component. How can I have it not scale?

Heres the code;

<AnimatedImageBackground
  source={{ uri: venue.image_URL }}
  style={{
    flex: 1,
    height: HEADER_IMAGE_HEIGHT,
    resizeMode: "cover",
    transform: [translateYStyle, scaleStyle],
  }}>
    <View
      style={{
        position: "absolute",
        bottom: 0,
        zIndex: 9999,
        alignSelf: "center",
        marginBottom: 10,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 5,
        opacity: 0.5,
      }}>
      <Text style={{ fontSize: 17 }}>Photos</Text>
    </View>
</AnimatedImageBackground>

I have used Jasper Report in my project for creating pdf. But every time I hit the api I got this warning
WARNING: An illegal reflective access operation has occurred WARNING: Illegal reflective access by net.sf.jasperreports.engine.util.ClassUtils (file:/C:/Users/LenY1X1/.m2/repository/net/sf/jasperreports/jasperreports/6.21.0/jasperreports-6.21.0.jar) to constructor com.sun.org.apache.xerces.internal.util.XMLGrammarPoolImpl() WARNING: Please consider reporting this to the maintainers of net.sf.jasperreports.engine.util.ClassUtils WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations WARNING: All illegal access operations will be denied in a future release

my jdk version is 11,I’m using Spring boot 2.7.1 and my jasper report dependency version is 6.21.0
How can I fix this??

I try to solve my problem and getting the suggestion from expert

I am trying to download a file from a server. I can download most files, but when I try to download a file with the prefix ‘.’ (dot) on the name, it removes the ‘.’ and adds ‘.text’ as a postfix to the file name. For example, when downloading a ‘.bashrc’ file, the filename is changed to ‘bashrc.txt’.

here is response from servre

Below is my code; do you have any idea what is wrong?

await downloadFileFromServerAPI({
  ...details,
  connectionId: connectionId
}).then((res) => {
  debugger;
  const downloadFileURL = window.URL.createObjectURL(new Blob([res]));
  const downloadFileLink = document.createElement('a');
  downloadFileLink.href = downloadFileURL;
  downloadFileLink.setAttribute('download', details.name);
  downloadFileLink.click();
  setTimeout(() => {
    document.body.removeChild(downloadFileLink);
  }, 2000);
});

I use dropzone to upload my files.

these files are usually downloaded from my web application, modified and later uploaded to the same web application.

1. Downloaded the file from my web appln.(to downloads folder)
2. made modifications and kept the file open and dropped it in the dropzone to upload.
3. the above works fine.
4. Copied this downloaded file(step1) to another location(to my desktop)
5. repeated step2
6. here i get ‘Server responded with code 0’ error.

Why the dropzone throws this error only when leaving the copied files open and dropping in.

I have a client-side React component with an explicit use client declared in it:

"use client"

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { useState, useTransition } from "react"
import { useSearchParams } from "next/navigation"
import { LoginSchema } from "@/schemas"
import login from "@/app/actions/login"

export default function LoginForm() {
  const currentURL = `/${window.location.href.split("/").slice(3).join("/")}`
  const searchParams = useSearchParams()
  const callbackUrl = searchParams.get("callback") || currentURL

  const [isPending, startTransition] = useTransition()

  const form = useForm<z.infer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  })

  const onSubmit = (values: z.infer<typeof LoginSchema>) => {
    startTransition(() => {
      login(values, callbackUrl)
        .then((data) => {
          if (data?.error) {
            form.reset()
            setError(data.error)
          }
          if (data?.success) {
            form.reset()
            setSuccess(data.success)
          }
          if (data?.twoFactor) {
            setShowTwoFactor(true)
          }
        })
        .catch(() => setError("Something went wrong"))
    })
  }

  return (
    <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

I am getting the following error when trying to access the URL via window.location.href:

ReferenceError: window is not defined at LoginForm (./src/components/auth/LoginForm.tsx:40:28)

My understanding is that the window object is only available on the client so this should have worked. What am I doing wrong?

What I tried
I added a console.log() inside the function to print out the evaluated value of currentURL like so:

const currentURL = `/${window.location.href.split("/").slice(3).join("/")}`
console.log(currentURL)

And this worked just fine. So the component is clearly able to access the window object. But the server is still throwing the error mentioned above. In fact, I don’t understand why the server is even giving the error considering the component is being rendered on the client!

I have a point (1,0) in screen coordinates then rotate 90/180/270 drgress clockwise around the origin point(1,2) across the rotate I get a new point (3,2) So I want to use javascript function to achieve it
like

function rotatePoint(x,y,originX,origin){
….
}

How to do?

I’m working on a Nuxt.js project with TypeScript and I’m facing an issue with route query parameters. Specifically, I’m struggling with TypeScript errors related to the type of a route query parameter.

Here’s the scenario:

I have a function getSignedUpAs that returns a string, which I’m using to set a route query parameter named userType. This function is guaranteed to return a string:

const getSignedUpAs = (): string => {
    return formData.signed_up_as.split('--')[0];
};

I use this function to navigate to a new route:

const userType = getSignedUpAs();

router.push({
    name: 'account-instagram-approval',
    query: { userType: userType },
});

In the account-instagram-approval component, I’m trying to retrieve userType from the route query. However, TypeScript is giving me an error: “Type ‘unknown’ is not assignable to type ‘string | (string | null)[] | null | undefined’.”

Here’s how I’m retrieving the userType in the component:

<script lang="ts">
import { defineComponent, ref, useRoute } from '@nuxtjs/composition-api';

export default defineComponent({
    name: 'account-instagram-approval',
    setup() {
        const route = useRoute();
        const userType = ref('');

        if (typeof route.value.query.userType === 'string') {
            userType.value = route.value.query.userType;
        }

        return { userType };
    },
});
</script>

I’ve tried multiple solutions, including:

1. Explicit type casting using as string.
2. Initializing userType with an empty string and then conditionally assigning it based
   on the route query.
3. Using a computed property to return the route query parameter as a string.

Despite these attempts, I’m still facing the same TypeScript error. I need to ensure that userType is treated as a string within the component. Could someone help me understand why I’m getting this TypeScript error and how to resolve it? Any insights or alternative approaches to handle route query parameters with TypeScript in Nuxt/Vue would be greatly appreciated.

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')

const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
    userChoice = e.target.id
    userChoiceDisplay.innerHTML = userChoice
    generateComputerChoice()
}))

so buttons are suppposed to work but are not working because of the error

error : Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)
at HTMLButtonElement.

In Node.js I want to link my application with my Pay pal account no need of payment and all just need to link after linking I need to show Pay pal account’s email id in my application, I tried multiple ways but not its getting

I tried this:

`const axios = require(‘axios’);

‘A21AAJGW3oouvCLFdMI7U9m820Fh6c9JaFwxa8qT3RC3bvCHH0Cem79hjr4-kvc2mSMbVUD_n-zMtahnHtw_xpSJOQYzIGkBQ'(TOKEN);

const scopes = ‘Openid profile email’
const userInfoUrl = https://api-m.sandbox.paypal.com/v1/identity/oauth2/userinfo?schema=paypalv1.1;

const headers = {
‘Authorization’: Bearer ${accessToken},
‘Content-Type’: ‘application/x-www-form-urlencoded’
};

axios.get(userInfoUrl, { headers })
.then(response => {
const userInfo = response;
console.log(‘User Info:’, userInfo);
})
.catch(error => {

});
`
the response I got :
data: {
user_id: ‘https://www.paypal.com/webapps/auth/identity/user/m8c24nMzyNMU2xOGRtYshnfOkmcDAQv-Hy3x3m4uqoU’,
sub: ‘https://www.paypal.com/webapps/auth/identity/user/m8c24nMzyNMU2xOGRtYshnfOkmcDAQv-Hy3x3m4uqoU’
}

in data object
but I need the email id of the Pay pal account

and then I tried something with redirect Uri but then its showing and error #incorrect_redirect_uri or #invalid_client_id”

I tried using
https://api-m.sandbox.paypal.com/v1/identity/openidconnect/userinfo?schema=openid in userInfoUrl
but same result

I am getting an error while installing npm related files or others such as vite, react. I am downloading vs code.

I have recently downloaded vs code, node js and added node js as an environmental user variable
I have also installed npm grobally through the terminal of vs code but when i install vite it is not working or also npm install it can’t work.i entered node path

i’m getting this error

I am trying to use ag grid to show data in my component. I am making an API call and then dynamically extracting the data column name from response and passing this information to the child component to display. But it not showing the data.

When I don’t use dynamic behaviour and get the static configuration from variable it is working.

Static Column Config =>

export let DETIALCONFIG= {
    columnDefs: [
        {
            headerName: 'VT Name',
            field: 'vtName',
            hide: false,
            minWidth: 235,
            serverFlag: true,
            tooltipFields: 'veName'
        },
        {
            headerName: 'Key',
            field: 'KEY',
            hide: false,
            serverFlag: true,
        },
        {
            headerName: 'ID',
            field: 'ID',
            hide: true,
            serverFlag: true,

        },
        {
            headerName: 'APP Name',
            field: 'APP_NAME',
            hide: true,
            minWidth: 140,
            serverFlag: true,

        },
        {
            headerName: 'Status ',
            field: 'Status',
            hide: true,
            minWidth: 200,
            serverFlag: true,
        },
        {
            headerName: 'Version',
            field: 'VERSION',
            hide: true,
            minWidth: 235,
            serverFlag: true,
        },
        {
            headerName: 'Details',
            field: 'DETAILS',
            hide: true,
            minWidth: 235,
            serverFlag: true,
        },
        {
            headerName: 'Json',
            field: 'JSON',
            hide: true,
            minWidth: 235,
            serverFlag: true,
        },
    ],
    gridOptions: {
        domLayout: 'autoHeight',
        pagination: false,
        paginationPageSize: 6,
        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        suppressPropertyNamesCheck: true,
        enableBrowserTooltips: true,
        suppressAutoSize: true
    }
}

Dynamic Logic

  private run = async (veName: string) => {
    let response: any
    try {
      response = await apiCall(veName, [], true)
      this.veTableData = [...response.data]
      const keys = Object.keys(this.veTableData[0])
      this.columnConfig = this.veDetailsGridConfig
      this.columnConfig.columnDefs.map((item: any) => {
        if(keys.includes(item.field)) {
          item.hide = false
          return item
        }
      })
      console.log(this.columnConfig)
      this.tableHeader = veName.toUpperCase()
    } catch (err) {
      this.veTableData = []
      this.columnConfig = this.veDetailsGridConfig
    }

with dynamic logic when I try to display this columnConfig in templete inside gripOptions property another columnDefs is getting added every time. It is not happening with static behaviour, and I suppose this is the issue. Can you guys please looks what I am doing wrong here. Thanks

Hi I fixed xAxis using tickPositions as follows, but I’m in trouble because the gap changes fluidly from data to data.

as follows
tickPositions: [0, 0.5, 1, 3, 5,20,50,100,200,400,800]

Can I change the line chart made using the as follows?

I want to make the graph implemented with hicharts in photo 1 constant as in photo 2.

Help me. I can’t find it

photo1

photo2

my xAxis option

      xAxis: {
          title: {
              text: '(m)',
              style: {
                  color: '#0a0a0a',
                  fontWeight: 'bold',
                  fontSize:'15px'
              }
          },
          tickPositions: [0, 0.5, 1, 3, 5,20,50,100,200,400,800],
          lineColor: '#000000',
          gridLineColor: '#807f7f',
          labels: {
              style: {
                  color : '#0a0a0a',
                  fontWeight: 'bold',
                  fontSize:'13px'
              },
          },
      },

ex) Data x,y

var legendData = [[0, 5], [0.5, 6], [1, 7], [3, 13], [5, 22],[100, 5],[200, 6], [400, 7] [800, 22]];

`I’m using react big calendar and i’m using custom component to show the monthly data in different format. But In day and week wise i’m getting the events. In month wise i have to showcase the total count of those events. I’m getting many cards on month wise view which is unnecessary. I have tried React.memo, useMemo everything but nothing works. The cards are getting recreated based on the dummy events which i’m using on Big calendar.

Calendar Component

`return (
    <div>
      <h2>React Big Calendar</h2>
      <Calendar
        localizer={localizer}
        events={dummyEvents}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 900 }}
        defaultView="month"
        eventPropGetter={() => ({
          className: 'custom-event-class',
        })}


        components={{
            month: {
        
              event: MonthEventRender,
            // event: "Walk"
            },
          }}
        
        //   views={{
        //     month: MonthEventRender,
        //     week: false,
        //     myweek: false,
        //   }}
          
        views={['week', 'month', 'day']}
        
        // views={{ week:true, month: MonthEventRender, day: true}}
        
      />
    </div>
  );
};

export default BigCalendar;
`

Custom View Component

`// src/components/EventRenderer.js
import React, { useEffect, useState } from 'react';
import moment from 'moment';


const MonthEventRender = ({ events }) => {

  // const getWalkInAndVirtualCounts = (events) => {
  //   let walkInCount = 0;
  //   let virtualCount = 0;

  //   events.forEach((event) => {
  //     // Check if the event title contains the keywords
  //     if (event.title.includes('Walk-in')) {
  //       walkInCount++;
  //     } else if (event.title.includes('Virtual')) {
  //       virtualCount++;
  //     }
  //   });

  //   return { walkInCount, virtualCount };
  // };

  // const { walkInCount, virtualCount } = getWalkInAndVirtualCounts(events);

  console.log('Virtual')

  return (
    <div>
    {/* <strong>Events</strong>
    <h1>Here we go</h1> */}
    <p>{`Walk-in Appointments - ${4}`}</p>
    <p>{`Virtual Appointments - ${5}`}</p>
  </div>
  );
};


MonthEventRender.title = ()=>("Events")

export default MonthEventRender
`

In month wise i have to showcase the total count of those events. I’m getting many cards on month wise view which is unnecessary. I have tried React.memo, useMemo everything but nothing works. The cards are getting recreated based on the dummy events which i’m using on Big calendar.`

First of all the "Outer tab 1" and "Outer tab 2" are under "Main tab 1" and "Outer tab 3" and "Outer tab 4" are under "Main tab 2".

Have patience with me, here is what I want. On page load/refresh the "Main tab 1" and "Outer tab 1" by default are active, and if I click the "Main tab 2" the "Outer tab 3" became the active tab.

Basically the only missing in my code are the active class on "Outer..." tabs when clicking its corresponding "Main..." tabs.

To better understand check the code below. Also here is the codepen https://codepen.io/.

const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");

const childTabsBtn = document.querySelectorAll('[data-tab-value]');
const childTabsContent = document.querySelectorAll('[data-tab-info]')
    
function SetContent(tabIdx)
{
   // reset all contents
   contents.forEach(content => {
      content.classList.remove("active");
   });
   const content = document.getElementById(tabIdx);
   content.classList.add("active");
}

function ResetButtons(){
   buttons.forEach(btn=> {
     btn.classList.remove("active");
   });
}

// add eventlisteners to all the maintab buttons
mainTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     e.target.classList.add("active");
  });
});

// add eventlisteners to all the childtabs button
childTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     const button = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
      button.classList.add("active");
      e.target.classList.add("active");
  })
})

//outer tab child button and outer content
childTabsBtn.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = document
    .querySelector(tab.dataset.tabValue);
    childTabsContent.forEach(tabInfo => {
      tabInfo.classList.remove('active')
    })
    target.classList.add('active');
  })
})

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');

body {
  font-family: 'Jost', sans-serif;
  background-color: #f0f5ff;
}

h1 {
  font-size: 48px;
  color: #232c3d;
  text-align:center;
}

.wrapper {
  width: 590px;
  margin: auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}

.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: green;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: none;
}

button.active {
  background-color: orange;
  pointer-events: none
}

.contentWrapper .content {
  display: none;
  padding: 1rem 2rem;
}

.contentWrapper .content.active {
  display: block;
  background-color: white;
}

[data-tab-info] {
  display: none;
}

.outer-content .active[data-tab-info] {
  display: block;
  padding: 1rem 2rem;
}

<h1>TOGGLE TABS</h1>
  
  <div class="wrapper">
    
    <div class="buttonWrapper">
      <button class="tab-button main-tab-btn active" data-id="maintab1">Main tab 1</button>
      <button class="tab-button main-tab-btn" data-id="maintab2">Main tab 2</button>
    </div>
    
    <div class="contentWrapper">
      <div class="content active" id="maintab1">
        Main Tab 1 Content
      </div>
      <div class="content" id="maintab2">
        Main Tab 2 Content
      </div>
    </div>
    
    <div class="outer-tab">
      <button class="child-tab-btn active" data-id="maintab1" data-tab-value="#child-tab-content-1">Outer tab 1</button>
      <button class="child-tab-btn" data-id="maintab1" data-tab-value="#child-tab-content-2">Outer tab 2</button>
      <button class="child-tab-btn" data-id="maintab2" data-tab-value="#child-tab-content-3">Outer tab 3</button>
      <button class="child-tab-btn" data-id="maintab2" data-tab-value="#child-tab-content-4">Outer tab 4</button>
    </div>
    
    <div class="outer-content">
      <div class="active" id="child-tab-content-1" data-tab-info>Outer tab 1 content</div>
      <div id="child-tab-content-2" data-tab-info>Outer tab 2 content</div>
      <div id="child-tab-content-3" data-tab-info>Outer tab 3 content</div>
      <div id="child-tab-content-4" data-tab-info>Outer tab 4 content</div>
    </div>
    
  </div>

I’m working on redesigning the UI of a tech tree creator tool for a game. I’m trying to make it so upon click, the text will scroll from right to left but stay within the confines of the overflow bounadaries. I want it to scroll only if the text is longer than the overflow.

For example:

This image would not scroll upon being hovered upon

This image would scroll upon being hovered upon

For the second image, instead of going to the next line, it would just be cut off. The whitespace and overflow properties in the CSS do this already but were commented out to create this image. When it is hovered upon, it will start scrolling from right to left but always stay within the overflow. As new text scrolls in from the right, text is cut off on the left once it fills up the overflow. The second the mouse is no longer over it, it returns to its original position. I want this to happen any time the vehicleBadge, the rectangle that contains the vehicleName and vehicleBr, is hovered upon.

Truthfully, I have no idea what to do but the “solutions” I’ve found so far have not worked. Everything I care about is related to vehicleName. I know the code is absolutely rancid, I did not write this. It is a fork of someone else’s tool. I am simply rewriting the UI.

style.css (excerpt)

.vehicleName {
    z-index: 1;
    text-shadow: 0px 0px 11px #000000;
    max-width: 140px;
    position: absolute;
    top: 3px;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
}

.faithful .vehicleName {
    left: initial;
    right: 7px;
    text-align: right;
}

.vehicleBr {
    z-index: 1;
    text-shadow: 0px 0px 11px #000000;
    position: absolute;
    bottom: 6px;
    right: 2px;
    color: #c0c0c0;
}

.faithful .vehicleBr {
    right: 21px;
}

.folderNumber {
    position: absolute;
    top: -3px;
    right: 0px;
    border: none;
    background: url("https://i.imgur.com/pqSKFUk.png");
    background-size: contain;
    background-repeat: no-repeat;
    text-align: right;
    width: 152px;
    height: 6px;
}

.faithful .folderNumber {
    left: 0px;
    top: -3px;
    width: 152px;
    height: 6px;
    background: url("https://i.imgur.com/pqSKFUk.png");
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 0px;
    text-align: left;
    padding-left: 0px;
}

.vehicleBadge {
    width: 150px;
    height: 50px;
}

.vehicleBadge svg {
    position: absolute;
    bottom: 19px;
    right: 3px;
    z-index: 1;
    /* -webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
    filter: drop-shadow(0px 0px 5px rgb(0, 0, 0)); */
}

.faithful .vehicleBadge svg {
    bottom: 4px;
}

index.html (excerpt)

<div class="modal-body">
                <form id="newForm">
                    <div id="nameInputDiv">
                        <label for="vehicleName">Name:</label>
                        <input type="text" name="vehicleName" id="vehicleName" maxlength="50" />
                        <div class="tooltip">

script.js (excerpt)

<tbody>
<tr>
<td rowspan="3" class="badgeSide"></td>
<td class="badgeLine ${ branchLine }"></td>
<td rowspan="3" class="badgeSide"></td>
</tr>
<tr>
<td id="${ vehicle.id }"
class="vehicleBadge type_${ vehicle.type } ${ branchLine }
connected_${ vehicle.connection }"
style="position:relative; ${ isClickable( vehicle ) ? 'cursor:pointer;' : '' }">
<span class="vehicleName">${ vehicle.name }</span>
<span class="vehicleBr">${ brLabel }</span>
${ img }
${ svg }
</td>
</tr>
<tr>
<td class="badgeLine ${ branchLine }"></td>
</tr>
</tbody>
</table>`;

I know this code is absolutely disgusting. I don’t understand 70% of it because it’s such a mess.

Because it is such a disaster, I have also attached this github repository with all of the code in case I missed anything important.

https://github.com/WarTinder/WT-tech-tree-creator-test

The file in it updated_israeli_ground_tree.json is the backup file you can load into the tree creator tool to test it.