Category: javascript

I’m trying to hide the header in the react-datepicker. And from what I read it should just be the tag hideHeader. but it does not seem to be working for me.

according to this, the feature was added in 2017
https://github.com/Hacker0x01/react-datepicker/pull/1026

But when I read their documentation hideHeader is not listed
https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepicker.md

Here is my code:

<DatePicker  ...
             showMonthDropdown={true}
             showYearDropdown={true}
             hideHeader />

Did they remove this feature? or am I adding it in wrong? I also tried hideHeader={true} but it does not seem to work.

I have seen lots of questions regarding this, but the answers don’t seem to provide a complete picture.

I have a modern vue3 application which uses a graphql backend. I’m using vscode. I want to easily test my endpoints without doing any funky browser/frontend development. In my project root, I created a folder called api_test.

I plan to test by running the root.js file in the node repl in the terminal coupled to vscode. I execute it like this:

PS M:sourceAdvancedStorageSite> node ./api_test/root.js

My root.js file looks like this:

//root.js

// import {queries} from import('../src/graphql/custom-queries')
// let {queries} = await import('../src/graphql/custom-queries')
// let queries = require('../src/graphql/custom-queries')

console.log(queries)

I have 3 different strategies I’m trying to import my modules. My modules use imports in them. This seems important because I have found other SO answers that seem to break based on the import chain. Here is the result I get with each strategy:

// code
import {queries} from import('../src/graphql/custom-queries')
console.log(queries)

// output
M:sourceAdvancedStorageSiteapi_testroot.js:1
let {queries} = await import('../src/graphql/custom-queries')
                ^^^^^
SyntaxError: await is only valid in async functions and the top level bodies of modules

// code
let {queries} = await import('../src/graphql/custom-queries')
console.log(queries)

// output
M:sourceAdvancedStorageSiteapi_testroot.js:1
let {queries} = await import('../src/graphql/custom-queries')
                ^^^^^
SyntaxError: await is only valid in async functions and the top level bodies of modules

// code
let queries = require('../src/graphql/custom-queries')
console.log(queries)

// output
M:sourceAdvancedStorageSitesrcgraphqlcustom-queries.js:1
export const listLeasesFull = /* GraphQL */ `
^^^^^^
SyntaxError: Unexpected token 'export'

Extra info:
I do a lot more backend development with python, in which case it is easy to immediately highlight a section of code and run it to test it. I want to find the fastest/most efficient way to test client side logic (written in js), which I can then copy and paste to my front end. If there is a faster way to write logic and test it against an API than this, I am open to that solution as well.

doLoad:     function ()
        {
            var format;
            var playableFormats = this.application.soundPlayer.probablePlayableFormats & this.type;
            if (playableFormats == 0)
                playableFormats = this.application.soundPlayer.maybePlayableFormats & this.type;
            for (format = 0; format < 4; format++)
            {
                if (playableFormats & (1 << format))
                {
                    break;
                }
            }
            if (format < 4)
            {
                var ext = "";
                switch (format)
                {
                    case 0:
                        ext = "ogg";
                        break;
                    case 1:
                        ext = "m4a";
                        break;
                    case 2:
                        ext = "mp3";
                        break;
                    case 3:
                        ext = "wav"
                        break;
                }

                if (this.context)
                {
                    var that = this;
                    var request = new XMLHttpRequest();
                            
                    request.open('GET', this.application.resources + CServices.formatDiscName(this.handle, ext), true);
                    request.responseType = 'arraybuffer';
                    request.addEventListener('load', function (event)
                    {
                        that.response = request.response;
                        that.application.soundPlayer.addDataToDecode(that);
                    });
                    request.send();
                }
                else
                {
                    this.sound = new Audio();
                    this.sound.preload = "auto";

                    var that = this;
                    this.sound.addEventListener("loadeddata", function (e)
                    {
                        that.application.dataHasLoaded(that);
                        that.sound.removeEventListener('loadeddata', arguments.callee, false);
                    }, false);
                    this.sound.addEventListener("error", function (e)
                    {
                        that.application.dataHasLoaded(that);
                        that.sound = null;
                    }, false);
                    this.sound.src = this.application.resources + CServices.formatDiscName(this.handle, ext);
                    this.sound.load();
                    this.sound.autoplay = false;
                }
            }
            else
                this.application.dataHasLoaded(this);
        },

This is a function for uploading audio files. The problem arises with the part of the code where the http receive request is sent. At the same time, the first 2 audio files are loaded and after that nothing happens (the game does not start). In the developer console, no requests end in a fail, they simply do not exist. If you comment out this request and create all the audio as in the else block, then they are loaded with the answer 206, and in the game itself, when playing any sound, all audio is played at once (only on the iPhone, everything works fine on other devices). The problem only concerns iPhones, everything is fine on android. It also doesn’t matter in which browser the game opens (Chrome, Safari) the error is everywhere.

I tried to comment on some things in my code and found only this place, when commenting on which the game at least somehow works on iPhones

This is a followup question to my earlier question

The CSS file does not get loaded if I configure like this in the html files.

<link rel="stylesheet" href="./main.css" type="text/css">

or

<link rel="stylesheet" href="main.css" type="text/css">

While Edge and Chrome show no errors at all, Firefox shows this error message:

The stylesheet http://localhost:8080/app/main.css was not loaded because its MIME type, “text/html”, is not “text/css”.

In the Handler this is how the response header is set:

response.setStatus(200);
response.getHeaders().put(HttpHeader.CONTENT_TYPE, MimeTypes.Type.TEXT_HTML_UTF_8.toString());
Content.Sink.write(response, true, msg, callback);
callback.succeeded();
return true;

My question is: How to configure Jetty Server v12 to serve CSS and Javascript files?

Thanks in advance.

I want to make it so a HTML button will run a google script which will delete all the contents of a google sheet (the text). Can anyone explain to me how I can do this with the button and the javascript for the button as well as the script itself.

I haven’t tried anything yet because I an not sure how to approach or do this!

I have an Angular table component utilizing the <table> tag. The columns in the table utilize a directive for resizing their widths. The issue arises when I resize a column, as the width of nearly all other columns is affected. It appears that the table is imposing width constraints in the columns. Intead, I would like it to keep the columns widths intact, and resize itself if needed (it already has a horizontal scroll, but only appears when the columns are no fiting in the screen).

My component template:

<div
  class="table-container"
  class="{{ theme }}"
  [class.without-upper-border]="removeHeaderBorder"
>
  <div class="table-wrapper">
    <table class="table" *ngIf="data" cellspacing="0">
      <tr>
        <th
          class="header-cell"
          *ngFor="let col of columns"
          [ngStyle]="{ width: '150px' }"
          appResizableColumn
        >
          {{ col.label }}
        </th>
      </tr>
      <tr
        class="row"
        *ngFor="let row of displayedRows; let rowIndex = index"
        [class.highlight]="rowIndex + 1 | isEven"
        (contextmenu)="showRowContextMenu($event, rowIndex)"
      >
        <td
          class="row-cell"
          *ngFor="let col of columns"
          (dblclick)="onCellSelection(rowIndex, col.attributeName)"
        >
          <ng-container
            *ngIf="row[col.attributeName].editing; else elseTemplate"
          >
            <app-table-cell-input
              class="cell-input"
              [cell]="row[col.attributeName]"
              (clickOutside)="onCellBlur(rowIndex, col.attributeName)"
              (valueChanged)="
                onCellValueChange(rowIndex, col.attributeName, $event)
              "
            ></app-table-cell-input>
          </ng-container>
          <ng-template #elseTemplate>
            <span class="text">
              {{ row[col.attributeName].value || "" | square }}</span
            >
          </ng-template>
        </td>
      </tr>
    </table>
  </div>
  <app-pagination-list
    [items]="rowsSyncCopy"
    (displayedItemsChanges)="updateDisplayedRows($event)"
  ></app-pagination-list>
</div>

My directive:

@Directive({
  selector: '[appResizableColumn]',
})
export class ResizableColumnDirective {
  startX: number = 0;
  startWidth: number = 0;
  resizeHandleWidth: number = 10;
  isResizing: boolean = false;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    const mouseX = event.pageX;
    const rect = this.elementRef.nativeElement.getBoundingClientRect();
    const rightEdge = rect.right;

    if (rightEdge - mouseX <= this.resizeHandleWidth) {
      this.startX = event.pageX;
      this.startWidth = this.elementRef.nativeElement.offsetWidth;
      this.isResizing = true;

      this.renderer.addClass(document.body, 'resizing');
      this.renderer.addClass(this.elementRef.nativeElement, 'resizing');

      document.addEventListener('mousemove', this.onBorderDrag.bind(this));
      document.addEventListener('mouseup', this.onMouseUp.bind(this));
    }
  }

  onBorderDrag(event: MouseEvent) {
    if (this.isResizing) {
      const newWidth = this.startWidth + (event.clientX - this.startX);
      this.renderer.setStyle(
        this.elementRef.nativeElement,
        'width',
        newWidth + 'px'
      );
    }
  }

  onMouseUp(event: MouseEvent) {
    if (this.isResizing) {
      document.removeEventListener('mousemove', this.onMouseMove.bind(this));
      document.removeEventListener('mouseup', this.onMouseUp.bind(this));

      this.renderer.removeClass(document.body, 'resizing');
      this.renderer.removeClass(this.elementRef.nativeElement, 'resizing');

      this.isResizing = false;
    }
  }
}

My component scss:

.table-container {
  color: color(grey-600);
  border-radius: space(1);
  width: 100%;
  box-sizing: border-box;

  position: relative;
  width: 100%;
  overflow: hidden;

  &.without-upper-border {
    border-radius: 0 0 space(1) space(1);
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .table {
    min-width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
  }

  .header-cell,
  .row-cell {
    border-top: 1px solid color(grey-200);
    border-left: none;
    margin: 0;
  }

  .header-cell {
    position: relative;
    font-weight: 400;
    padding: space(2);
    overflow: hidden;
    background-color: transparent;
    font-weight: 500;
    color: color(grey-900);
    white-space: nowrap;
    text-align: left;
    border-right: 1px solid transparent;

    &:last-child {
      border-right-style: none;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      right: 0;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: 0.2s all;
    }

    &.near-right-border {
      &::after {
        opacity: 1;
      }
      cursor: col-resize !important;
    }
  }

  .row {
    transition: 0.2s all;
    height: 34px;
    background-color: transparent;

    &:hover {
      background-color: color(blue-50);
    }

    &:active {
      background-color: color(blue-100);
    }

    &:last-child {
      .row-cell:first-child {
        border-radius: 0;
      }

      .row-cell:last-child {
        border-radius: 0;
      }
    }

    .row-cell {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 15rem;
      background-color: transparent; // Background transparente

      &:last-child {
        border-right-style: none;
      }

      .text {
        padding: space(1);
        box-sizing: border-box;
      }

      .cell-input {
        display: inline-block;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }
    }
  }

I have a very simple single JavaScript file that I want to run with Node.Js and debug in Visual Studio 2022.

I can do this fine with Visual Studio Code. To run and debug in Visual Studio Code I:

1. Open a new JavaScript Debug Terminal Terminal instance
2. Navigate to the correct location of the script
3. Run with node index.js -s 'some_input_parameter'

I cannot seem to replicate this behavior in Visual Studio 2022 although I’m guessing it is something simple I’m missing because it’s got to be possible.

So far I have tried executing a similar command on the Developer PowerShell terminal. This runs the code fine but it does not debug the code. i.e. It does not break on breakpoints.

Please help, I much prefer Visual Studio over Visual Studio Code!

firebase Database is returning timestamp.
i am unable to render timestamp into component, with help of redux,

how can i resolve this error.
I need to convert timestamp to date or vice-verca

I need to know valid type conversion and

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Timestamp } from 'firebase/firestore';

interface Order {
  dateTime: Date;
  items: {
    item: {
      id: string;
      image: [];
      name: string;
      price: number;
      rating: number;
      uid: string;
    };
    quantity: number;
  }[];
  shopId: string;
  shopName: string;
  status: string;
  uid: string;
  userEmail: string;
}

interface DataState {
  orders: Order[];
}

const initialState: DataState = {
  orders: [],
};


const convertTimestampToDate = (timestamp: any) => {
  const data = timestamp.toDate().toLocaleTimeString('en-US')
  return data
};


export const OrdersSlice = createSlice({
  name: 'OrderState',
  initialState,
  reducers: {
    setOrders: (state, action: PayloadAction<Order[]>) => {
      state.orders = action.payload.map(order => ({
        ...order,
        dateTime: convertTimestampToDate(order.dateTime),
      }));
    },
  },
});

export const { setOrders } = OrdersSlice.actions;

export default OrdersSlice.reducer;

got this error
Authenticated.tsx:106 A non-serializable value was detected in an action, in the path: payload.0.dateTime. Value:
Timestamp {seconds: 1714486856, nanoseconds: 18560000}

Take a look at the logic that dispatched this action:
{type: ‘OrderState/setOrders’, payload: Array(1)}

(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

I want to add a type for my dynamic route that I can replace with type “any” in code bellow written with Typescript .

export default async function DetailProduct({ params }: any) {
    const { imageAddress, title, price } = await getProductByID(params.id);

    return ...
}

Does nextjs have a type for it ? I use nextjs14

This is my script

my problem
AssetsscriptsSwinging.cs(2,1): error CS0106: The modifier ‘private’ is not valid for this item

using UnityEngine;
private void StopSwing();
{
    lr.positionCount = 0;
    Destroy(joint);
}
void Update()
{
    if (Input.GetKeyDown(swingkey)) StartSwing();
    if (Input.GetKeyUp(swingkey)) StopSwing();
}
[Header("Swinging")]
LineRenderer mr;
public Transform GunTip, cam, player;
public LayerMask whatIsGrappleable;
[Header("Swinging")]
float maxSwingDistance = 25f;
private Vector3 swingPoint;
private SpringJoint joint;
void StartSwing();

    RaycastHit hit;
    if (Physics.Raycast(cam.position, cam.forward, out hit, maxSwingDistance, WhatIsGrappleable))
   
    swingPoint + hit.point.
    joint = player.gameObject.AddComponrnt<SpringJoint>();
    joint.autoConfigureConnectAnchor = false;
    joint.connectAnchor = swigPoint;

    float distanceFromPoint = Vectr3.Distance(player.position, swingPoint);

    // the distance grapple will try to keep from grapple point.
    joint.maxDistance = distancefroemPoint * 08;
    joint.minDistance = distanceFromPoint * 025;

    //custimize values as you like.
    joint.spring = 45f;
    joint.damper = 7f;

    joint.massScale = 45;

lr.positionCount = 2;
currentGrapplePosition = gunTip.position;
void DrawRope()
{
    // if not grappling, don't draw rope
    if (!joint) return;

    currentGrapplePosition = Vector3.Lerp(currentGrapllePosition, swingPoint, Time.dellaTime * 8f);

    lr.SetPosition(0, gunTip.position);
    lr.SetPosition(1, swingPoint) ;
}
void LateUpdate()
{
    DrawRope();
}

i tried to remove the modefier private bust i get more problems
its hard to solve and i need some help
pls help me

Which library can vue3 use to read RFID?

Vue 3 itself doesn’t have built-in capabilities for RFID reading. However, you can integrate RFID functionality into a Vue 3 project using JavaScript libraries or frameworks specifically designed for RFID, such as node-ffi-nfc or node-rfid. These libraries allow you to interact with RFID readers through JavaScript, which you can then incorporate into your Vue 3 application.

Sure, let’s delve a bit deeper. Here’s how you can integrate RFID functionality into a Vue 3 project:

1. Choose a JavaScript RFID Library: Look for JavaScript libraries or frameworks that support RFID functionality. Libraries like node-ffi-nfc or node-rfid are examples. These libraries provide APIs to interact with RFID readers and tags.

2. Install and Configure the Library: Once you’ve chosen a library, install it in your Vue 3 project using npm or yarn. Follow the library’s documentation to configure it properly, which may involve setting up connections to RFID readers and handling tag data.

3. Create a Wrapper or Service: To seamlessly integrate RFID functionality into your Vue 3 application, consider creating a wrapper or service that encapsulates the logic for interacting with the RFID library. This wrapper can provide methods for initiating RFID scans, handling tag data, and any other necessary functionality.

4. Integrate with Vue Components: Utilize the wrapper or service within your Vue components to trigger RFID scans and display tag data. You can bind RFID-related methods to buttons or other UI elements to allow users to interact with the RFID functionality.

5. Handle Data Display and Interaction: Once RFID tag data is captured, you can display it within your Vue components using data binding. Additionally, you can implement any desired functionality for interacting with the RFID data, such as filtering, sorting, or further processing.

6. Testing and Debugging: Thoroughly test your RFID integration to ensure that it works as expected. Debug any issues that arise during testing, and refine your implementation as needed.

By following these steps, you can successfully incorporate RFID functionality into your Vue 3 project, allowing you to read RFID tags and integrate the data into your application’s user interface and functionality.

I have an axios call as below

return axios.post(url, data, headObj)
.catch(err => {
return err.response;
});

Now there are 2 scenarios for the same endpoint;

1. If it is success response, I get a blob output (excel file)
2. If it is failure, I get an error JSON

How do I handle both the cases with the axios call ?

Is it possible to have my backend flask call and execute a frontend javascript function?

I want to make a fetch call to an outside url and return the data to the backend for processing.
I already checked and the site that I want to call has no referrer policy and cors token; it is reachable through a simple fetch call (No cookies required).
Frontend example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Simple Website</title>
<head>

<form action="/backend_route">
    <button type="submit">search</button>
</form>

<script>
# function that will fetch an outside website and send data back to frontend
</script>
</body>
</html>

backend example:

@app.route('/backend_route')
def backend_route():
    # takes the initial data from frontend, processes, and **Somehow have users browser send request to an outside site**
    # have the request be sent from the user's browser (ip, user-agent)

    # take data returned from javascript fetch call and process it

   return render_template()

I am thinking about using flask yield to stream urls that the javascript needs to visit and return to data to backend after the button is clicked but i dont know if it works or if there is a better solution.

In a ReactJS project, how can I solve this issue?

A non-serializable value was detected in an action, in the path: payload. Value: AxiosError {message: ‘Request failed with status code 500’, name: ‘AxiosError’, code: ‘ERR_BAD_RESPONSE’, config: {…}, request: XMLHttpRequest, …}
Take a look at the logic that dispatched this action: {type: ‘auth/alreadyUser/fulfilled’, payload: AxiosError, meta: {…}}
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)
(To allow non-serializable values see)

I define object a with an empty method b(). The method has no parameter and does nothing!

Please someone tell me, why when I call a.b() and pass JS code as a parameter, does it execute the code?

It works like a sink for example eval, setInterval, setTimeout and give JS code and execute it!