Category: javascript

When I set a new setTimeout in the form:

async function run(price){
...
    await setTimeout(
      async function run(val) {
        await foo(val);
      },
      delay,
      price
    );
}

, I get the error

node:internal/errors:464                                                                                                       
    ErrorCaptureStackTrace(err);                                                                                               
    ^                                                                                                                          
                                                                                                                               
TypeError [ERR_INVALID_ARG_TYPE]: The "options" argument must be of type object. Received type number (135.83422382)           
    at new NodeError (node:internal/errors:371:5)                                                                              
    at setTimeout (node:timers/promises:46:7)

so I change it to

async function run(price){
...
    await setTimeout(
      async function run(val) {
        await foo(val[0]);
      },
      delay,
      [price]
    );
}

and the error is gone all of a sudden. The error is also not thrown when price is a string, which is weird since string should also be a primitive type. The final weirdest thing is that after this array fix, the function inside the setTimeout is fully ignored when the code runs. Note that this error is only thrown when I call await run(x) from inside a bunch of nested then’s and async (arg) => {< >} codeblocks, but not when the await run(x) is on its own. This is overall the weirdest error I’ve ever seen, and I’d appreciate some guidance!

I’m using react-redux and MUI. And i have a problem while i using DataGrid. When i using DataGrid it will error and when i change something in my code my code will run and page refresh.. before it will only blank page.

Here is my code:

const handleGetOrderId = (e) => {
  return e.LabOrderId
}

<DataGrid
            pageSize={pageSize}
            onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
            rowsPerPageOptions={[10, 20, 50]}
            rowCount={
              data.Result.length === undefined ? 30 : data?.Result?.length
            }
            page={page}
            onPageChange={(newPage) => handlePage(newPage)}
            pagination
            rowGetter={(i) => data.Result[i]}
            paginationMode='server'
            className={classes.colCell}
            columns={[
              { headerName: 'ID Order Lab', field: 'LabOrderCode', width: 120 },
              { headerName: 'Nama Pasien', field: 'PatientName', width: 150 },
              {
                headerName: 'No Telp / Email',
                field: 'PhoneNumber',
                width: 150,
              },
              {
                headerName: 'Jenis Layanan',
                field: 'LabOrderType',
                width: 130,
              },
              {
                headerName: 'Booking time slot',
                field: 'BookingTimeSlot',
                width: 150,
                hideable: false,
              },
              {
                headerName: 'Tanggal Pemesanan',
                field: 'BookingDate',
                width: 180,
              },
              { headerName: 'Cabang', field: 'BranchName', width: 120 },
              {
                headerName: 'Harga',
                field: 'TotalTransaction',
                width: 100,
                renderCell: (params) => {
                  return (
                    <Typography variant='body3'>
                      {params.row.TotalTransaction === null
                        ? '-'
                        : `Rp ${parseInt(
                            params.row.TotalTransaction,
                          ).toLocaleString('id')}`}
                    </Typography>
                  )
                },
              },
              {
                headerName: 'Status Pembayaran',
                field: 'PaymentStatus',
                width: 180,
                renderCell: (params) => {
                  return <TrxBox data={params.row} />
                },
              },
              {
                headerName: 'Aksi',
                width: 100,
                renderCell: (params) => {
                  return (
                    <Typography
                      variant='body1'
                      color='primary'
                      onClick={() => handleClickOpen(params.row)}>
                      Detail Order
                    </Typography>
                  )
                },
              },
            ]}
            rows={data?.Result}
            getRowId={handleGetOrderId}
          />

Here my error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

is there anything i can improve from this piece of code? Thank you

What are the restrictions on using getters and setters in javascript? For example, here are a few scenarios I’ve seen when just doing trial-and-error:

class User {

    // 1 - must have an alias somewhere or will get loop
    constructor(name) {
        this.name = name;
    }

    get name() {
        console.log('--- Getter ---');
        return this.name;
    }
    set name(name) {
        console.log('--- Setter --- ');
        this.name = name;
    }
}

const user = new User('David');
console.log(user.name);

class User {

    name;

    // 2 - setter/getter must have a property with exact name in constructor?
    constructor(name) {
        this._name = name;
    }
    get name() {
        console.log('--- Getter ---');
        return this._name;
    }
    set name(name) {
        console.log('--- Setter --- ');
        this._name = name;
    }
}

const user = new User('David');
console.log(user.name);
user.name = 'Keith';
console.log(user.name);

Is a correct understanding of a setter/getter that:

1. The name must be aliased.
2. The setter/getter must have that exact name defined in the constructor.

Finally, putting it does the following seem like a good pattern to hide fields when user a getter/setter, as it seems like #name (private) and name (public) act like two different variables.

class User {
    #name;
    constructor(name) {
        this.name = name;
    }
    get name() {
        console.log('-getter-');
        return this.#name;
    }
    set name(name) {
        console.log('-setter-');
        this.#name = name
    }
}
bob = new User('Bob');
bob.name = 'Bobby';
console.log(bob.name);

The task is as follows: there is an Elma portal, you need to add the document scanning function there

1. The user clicks the Scan button, the document scanning begins, the scanned document is stored locally on a temporary folder

Now the question is: how to insert a file after scanning a document on the input[file] field using js?

PS.This is a program for one employee, any option will do

enter image description here

I am very new to Janus, and is still exploring the pieces of features.

I have connecting to a remote video streaming server, where publisher is publishing video feed.

I have managed to attatched to the streaming plugin and starting to receiving video successfully, that all went ok.

The problem begins, whenever I start to see the publisher’s video, after about 2 seconds, I got a “close PC” or “hangup” message from Janus and then I lose the video feed even tough I was able to see the video streaming 2 seconds ago. It seems to me that there is some machnism that somehow falsely identified that I was not successfully connect to the feed and close it on purpose. I have been struggled with it quite a while.

The chain of messages between my side and Janus are as followed:

{"janus":"create","transaction":"IhQCMND4y2cD"}

{
   "janus": "success",
   "transaction": "IhQCMND4y2cD",
   "data": {
      "id": 1127171397188461
   }
}

{"janus":"attach","plugin":"janus.plugin.streaming","opaque_id":"streamingtest-wNGpmsIrm2C7","transaction":"u8CxkN0xB9BT","session_id":1127171397188461}

{
   "janus": "success",
   "session_id": 1127171397188461,
   "transaction": "u8CxkN0xB9BT",
   "data": {
      "id": 3098699833584009
   }
}

{
   "janus": "event",
   "session_id": 1127171397188461,
   "transaction": "1643898115753",
   "sender": 3098699833584009,
   "plugindata": {
      "plugin": "janus.plugin.streaming",
      "data": {
         "streaming": "event",
         "result": {
            "status": "preparing"
         }
      }
   },
   "jsep": {
      "type": "offer",
      "sdp": "v=0rno=- 1643898115754570 1 IN IP4 35.221.175.230rns=Mountpoint 40534rnt=0 0rna=group:BUNDLE audio videorna=msid-semantic: WMS janusrna=ice-liternm=audio 9 UDP/TLS/RTP/SAVPF 111rnc=IN IP4 35.221.175.230rna=sendonlyrna=mid:audiorna=rtcp-muxrna=ice-ufrag:9p1Jrna=ice-pwd:QCREfYHJBaHIG0Q8zf77cMrna=ice-options:tricklerna=fingerprint:sha-256 C1:58:7D:C4:86:CA:57:72:B0:E2:71:1A:A0:12:68:BE:27:54:FC:6D:3F:90:57:2B:AA:0A:62:7A:51:10:EA:60rna=setup:actpassrna=rtpmap:111 opus/48000/2rna=extmap:1 urn:ietf:params:rtp-hdrext:sdes:midrna=msid:janus janusa0rna=ssrc:3743287120 cname:janusrna=ssrc:3743287120 msid:janus janusa0rna=ssrc:3743287120 mslabel:janusrna=ssrc:3743287120 label:janusa0rna=candidate:1 1 udp 2015363327 35.221.175.230 53621 typ hostrna=candidate:2 1 tcp 1015021823 35.221.175.230 0 typ host tcptype activerna=candidate:3 1 tcp 1010827519 35.221.175.230 56018 typ host tcptype passiverna=end-of-candidatesrnm=video 9 UDP/TLS/RTP/SAVPF 96 97rnc=IN IP4 35.221.175.230rna=sendonlyrna=mid:videorna=rtcp-muxrna=ice-ufrag:9p1Jrna=ice-pwd:QCREfYHJBaHIG0Q8zf77cMrna=ice-options:tricklerna=fingerprint:sha-256 C1:58:7D:C4:86:CA:57:72:B0:E2:71:1A:A0:12:68:BE:27:54:FC:6D:3F:90:57:2B:AA:0A:62:7A:51:10:EA:60rna=setup:actpassrna=rtpmap:96 VP8/90000rna=rtcp-fb:96 nackrna=rtcp-fb:96 nack plirna=rtcp-fb:96 goog-rembrna=extmap:1 urn:ietf:params:rtp-hdrext:sdes:midrna=rtpmap:97 rtx/90000rna=fmtp:97 apt=96rna=ssrc-group:FID 4082977519 4235320830rna=msid:janus janusv0rna=ssrc:4082977519 cname:janusrna=ssrc:4082977519 msid:janus janusv0rna=ssrc:4082977519 mslabel:janusrna=ssrc:4082977519 label:janusv0rna=ssrc:4235320830 cname:janusrna=ssrc:4235320830 msid:janus janusv0rna=ssrc:4235320830 mslabel:janusrna=ssrc:4235320830 label:janusv0rna=candidate:1 1 udp 2015363327 35.221.175.230 53621 typ hostrna=candidate:2 1 tcp 1015021823 35.221.175.230 0 typ host tcptype activerna=candidate:3 1 tcp 1010827519 35.221.175.230 56018 typ host tcptype passiverna=end-of-candidatesrn"
   }
}

{"janus":"message","body":{"request":"start"},"transaction":"nPnRCOBZQzv1","jsep":{"type":"answer","sdp":"v=0rno=- 7026294805116782648 2 IN IP4 127.0.0.1rns=-rnt=0 0rna=group:BUNDLE audio videorna=msid-semantic: WMSrnm=audio 9 UDP/TLS/RTP/SAVPF 111rnc=IN IP4 0.0.0.0rna=rtcp:9 IN IP4 0.0.0.0rna=ice-ufrag:MaEurna=ice-pwd:lia9FGQuqo+v80h72nCDEBf9rna=ice-options:tricklerna=fingerprint:sha-256 BF:7E:D4:08:36:39:06:2B:CC:C3:BD:BA:5A:7F:05:5F:37:D3:A6:7E:15:BE:31:41:6F:46:1A:88:C1:89:19:50rna=setup:activerna=mid:audiorna=extmap:1 urn:ietf:params:rtp-hdrext:sdes:midrna=recvonlyrna=rtcp-muxrna=rtpmap:111 opus/48000/2rna=fmtp:111 minptime=10;useinbandfec=1rnm=video 9 UDP/TLS/RTP/SAVPF 96 97rnc=IN IP4 0.0.0.0rna=rtcp:9 IN IP4 0.0.0.0rna=ice-ufrag:MaEurna=ice-pwd:lia9FGQuqo+v80h72nCDEBf9rna=ice-options:tricklerna=fingerprint:sha-256 BF:7E:D4:08:36:39:06:2B:CC:C3:BD:BA:5A:7F:05:5F:37:D3:A6:7E:15:BE:31:41:6F:46:1A:88:C1:89:19:50rna=setup:activerna=mid:videorna=extma
p:1 urn:ietf:params:rtp-hdrext:sdes:midrna=recvonlyrna=rtcp-muxrna=rtpmap:96 VP8/90000rna=rtcp-fb:96 goog-rembrna=rtcp-fb:96 nackrna=rtcp-fb:96 nack plirna=rtpmap:97 rtx/90000rna=fmtp:97 apt=96rn"},"session_id":1127171397188461,"handle_id":3098699833584009}

{"janus":"trickle","candidate":{"candidate":"candidate:1689702057 1 udp 2113937151 99f28e96-d337-4463-8546-edcd14f33bfd.local 51974 typ host generation 0 ufrag MaEu network-cost 999","sdpMid":"audio","sdpMLineIndex":0},"transaction":"tiPvtcliHkSg","session_id":1127171397188461,"handle_id":3098699833584009}

{"janus":"trickle","candidate":{"candidate":"candidate:1555759876 1 udp 2113932031 10286d80-a429-4a1b-be4e-07339783cc57.local 51975 typ host generation 0 ufrag MaEu network-cost 999","sdpMid":"audio","sdpMLineIndex":0},"transaction":"rK2L1WejLg5P","session_id":1127171397188461,"handle_id":3098699833584009}

{
   "janus": "ack",
   "session_id": 1127171397188461,
   "transaction": "nPnRCOBZQzv1"
}

{
   "janus": "event",
   "session_id": 1127171397188461,
   "transaction": "nPnRCOBZQzv1",
   "sender": 3098699833584009,
   "plugindata": {
      "plugin": "janus.plugin.streaming",
      "data": {
         "streaming": "event",
         "result": {
            "status": "starting"
         }
      }
   }
}

{
   "janus": "ack",
   "session_id": 1127171397188461,
   "transaction": "tiPvtcliHkSg"
}

{
   "janus": "ack",
   "session_id": 1127171397188461,
   "transaction": "rK2L1WejLg5P"
}

{"janus":"trickle","candidate":{"completed":true},"transaction":"LuArLGeV7CJ8","session_id":1127171397188461,"handle_id":3098699833584009}

{
   "janus": "ack",
   "session_id": 1127171397188461,
   "transaction": "LuArLGeV7CJ8"
}

{
   "janus": "event",
   "session_id": 1127171397188461,
   "sender": 3098699833584009,
   "plugindata": {
      "plugin": "janus.plugin.streaming",
      "data": {
         "streaming": "event",
         "result": {
            "status": "started"
         }
      }
   }
}

{
   "janus": "webrtcup",
   "session_id": 1127171397188461,
   "sender": 3098699833584009
}

{
   "janus": "event",
   "session_id": 1127171397188461,
   "transaction": "1643898121836",
   "sender": 3098699833584009,
   "plugindata": {
      "plugin": "janus.plugin.streaming",
      "data": {
         "streaming": "event",
         "result": {
            "status": "stopping"
         }
      }
   }
}

{
   "janus": "hangup",
   "session_id": 1127171397188461,
   "sender": 3098699833584009,
   "reason": "Close PC"
}

{"janus":"keepalive","session_id":1127171397188461,"transaction":"sBZVncmW3NNi"}

{
   "janus": "ack",
   "session_id": 1127171397188461,
   "transaction": "sBZVncmW3NNi"
}

pictures of messages exchanges are attched:Message exchange log picture

Any suggestion on how to look for that issue? As I am not able to login to the server side, please assume I cannot see any server log…. Sorry…

Any thing that help are appriciated!!!

I created a tsc.exe from tsc.js using nexe:

npm install -g nexe
nexe tsc.js --build

The resulting tsc.exe accepts the same parameters as tsc.js, but how to pass parameters to the underlying node engine? I would like to run something like this:

node --trace-warnings tsc.js ...

How do I do it with the created tsc.exe ?

So, I got a google apps script, which collect the content from the user selected range and also from the form data opened in the modal.

The script is run when I use a menu button in my spreadsheet, but after like 2 or 3 seconds, I get “Script finished” and then the modal opens. With the script finished, I can’t handle the data from the modal. How to do that?

This is a piece of the code:
Form.html

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <!--Import materialize.css-->
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <div class="container">
        <form class="col s12">
          <div class="row">
            <label for="requestedBy">Requested By</label>
            <input id="requestedBy" type="text" placeholder="John Doe" class="validate">
          </div>

          <div class="row">
            <label for="dueDate">Due Date</label>
            <input id="dueDate" class="datepicker">
          </div>

          <div class="row">
            <label for="comments">Comments</label>
            <textarea id="comments" placeholder="Please ignore lines X, Y and Z..." class="materialize-textarea"></textarea>
          </div>

          <div class="row">
            <button class="btn waves-effect waves-light" id="btn">
              Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </form>
      </div>

      <script>
        var options = {
          autoClose: true,
          format: 'mm/dd/yyyy',
          defaultDate: new Date(),
          setDefaultDate: true,
          showClearBtn: true
        };

        document.addEventListener('DOMContentLoaded', function() {
          var elements = document.querySelectorAll('.datepicker');
          var instances = M.Datepicker.init(elements, options);
        });

        document.getElementById('btn').addEventListener('click', getData);

        function getData() {
          var requestedBy = document.getElementById('requestedBy').value;
          var dueDate = document.getElementById('dueDate').value;
          var comments = document.getElementById('comments').value;

          var data = {
            requestedBy,
            dueDate,
            comments
          };

          google.script.run.saveData(data);
        }
      </script>

      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

saveData(data).gs:

function saveData(data) {
  const iasRequestsSpreadsheet = SpreadsheetApp.openById('exampleid');
  const sheetName = iasRequestsSpreadsheet.getSheetByName('examplename');

  sheetName.getRange(1, 1).setValue(data.requestedBy);
  /* sheetName.appendRow([
    data.requestedBy,
    data.dueDate,
    data.comments
  ]); */
}

This gets the data from the range:

function getSelectedexamples(spreadsheet) {
  const range = spreadsheet.getDataRange();

  const data = range.getValues();
  const richTextValues = range.getRichTextValues();

  let examplesCol = 0;

  for (let i = 0; i < data.length; i++) {
    const title = data[0][i].toString().toLowerCase().trim();

    if (title === 'example') {
      examplesCol = i;
      break;
    }
  }

  const activeRange = spreadsheet.getActiveRange();

  const firstRangeRow = activeRange.getRow() - 1;
  const amountOfRows = activeRange.getHeight();
  const lastRangeRow = firstRangeRow + amountOfRows - 1;

  const examples = {};

  for (let i = firstRangeRow; i <= lastRangeRow; i++) {
    const url = richTextValues[i][exampleCol].getLinkUrl();
    const isUrlPresent = Boolean(url);

    if (!isUrlPresent) {
      throw new Error(`examplenot found on line ${i + 1}.`);
    }

    const isexampleRegistered = Boolean(example[data[i][exampleCol]]);

    if (!isSvnkitRegistered) {
      example[data[i][exampleCol]] = url;
    }
  }

  return example;
}

Then I need to put those data on another sheet. This part I know how to do, but the problem is retrieving data from the form.

I am doing some web scraping in JS for the first time and already stuck.

I have a cheerio object that contains div tags I want to pull out. If I iterate through the cheerio using the each method, I can see they are all there

temp.each(function (i, e) {
    console.log($(e).text());
    console.log("...looping");
    console.log(i);
 });

              
...looping
0
“The square root of the amount of ducks I give"
...looping
1
Sweet Home, Alabama
...looping
2
FOOTER GOES HERE
...looping
3

I see that quote I want is under the element indexed at 1, but if I try to grab it with temp.get(1).text(), I get TypeError: temp.get(…).text is not a function.

There is something big I am missing here.

I have added telemetry in my bot , still I am not able to see message counts of all channels.

 const{ApplicationInsightsTelemetryClient,TelemetryInitializerMiddleware=require('botbuilder-applicationinsights')
  
const { TelemetryLoggerMiddleware } = require('botbuilder-core');


var telemetryClient = getTelemetryClient(process.env.InstrumentationKey);
var telemetryLoggerMiddleware = new TelemetryLoggerMiddleware(telemetryClient);
var initializerMiddleware = new TelemetryInitializerMiddleware(telemetryLoggerMiddleware);

whatsAppAdapter.use(initializerMiddleware);
AppAdapter.use(initializerMiddleware)

dialog.telemetryClient = telemetryClient;
bot.telemetryClient = telemetryClient;

 


function getTelemetryClient(instrumentationKey) {
            if (instrumentationKey) {
                return new ApplicationInsightsTelemetryClient(instrumentationKey);
            }
            return new NullTelemetryClient();
        }`.

How to get message count in application insights?

The context is that I have a product name where there will be sizes, colors, and quantities. The user can also add more sizes, color, and quantities of the same product and I will be saving this in Firestore.

For example:

• Product Name: Shirt
• Size: Large
• Color: Red, Qty: 10
• Color: Blue, Qty: 5
• Size: M
• Color: Red, Qty: 10
• Color: Blue, Qty: 5

So in the form, the user should be able to add a size, add more colors and qty.
This is what I did:

Codes:
Link: https://codesandbox.io/s/form-2-add-more-size-ddqqo?file=/demo.js:0-5210

import React, { useState, useEffect } from "react";
import Box from "@mui/material/Box";

import { TextField, Button } from "@mui/material";

export default function BasicSelect() {
  const [productName, setProductName] = useState();
  const [sizeList, setSizeList] = useState([{ size: "" }]);
  const [colorList, setColorList] = useState([{ color: "", colorStocks: "" }]);

  //sizes
  const handleServiceChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...sizeList];
    list[index] = { ...list[index] }; // copy the item too
    list[index][name] = value;
    setSizeList(list);
  };

  const handleServiceRemove = (index) => {
    const list = [...sizeList];
    list.splice(index, 1);
    setSizeList(list);
  };

  const handleServiceAdd = () => {
    setSizeList([...sizeList, { service: "" }]);
  };

  // color
  const handleColorChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...colorList];
    list[index] = { ...list[index] }; // copy the item too
    list[index][name] = value;
    setColorList(list);
  };

  // const handleColorStocksChange = (e, index) => {
  //   const { name, value } = e.target;
  //   const list = [...colorList];
  //   list[index][name] = value;
  //   setColorList(list);
  //   // console.log(colorList);
  // };

  // const handleColorChange = (e, index) => {
  //   const { value } = e.target;

  //   const arr = [...colorList]; //Shallow copy the existing state
  //   arr[index].color = value; //Update the size to the selected size
  //   console.log(arr[index].value);
  //   setColorList([...arr]); //Set the updated array to be the new state
  // };

  // const handleColorStocksChange = (e, index) => {
  //   const { value } = e.target;
  //   console.log(value);
  //   const arr = [...colorList];
  //   arr[index].colorStocks = value;
  //   // console.log(arr)
  //   setColorList([...arr]);
  // };

  const handleColorRemove = (index) => {
    const list = [...colorList];
    list.splice(index, 1);
    setColorList(list);
  };

  const handleColorAdd = () => {
    setColorList([...colorList, { color: "", colorStocks: "" }]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log("Product: ", productName, "size: ", sizeList, colorList);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <form onSubmit={handleSubmit}>
        <TextField
          label="Product Name"
          name="name"
          type="text"
          id="productName"
          value={productName}
          onChange={(e) => setProductName(e.target.value)}
          required
        />

        {sizeList.map((singleSize, index) => (
          <div key={index}>
            <TextField
              label="Size"
              type="text"
              name={`size${index}`}
              id={`size${index}`}
              required
              value={singleSize.size}
              onChange={(e) => handleServiceChange(e, index)}
            />
            {colorList.map((singleColor, index) => (
              <div key={index}>
                <TextField
                  label="color"
                  name="color"
                  type="text"
                  id="color"
                  required
                  value={singleColor.color}
                  onChange={(e) => handleColorChange(e, index)}
                />
                <TextField
                  label="Stocks"
                  name="colorStocks"
                  type="text"
                  id="colorStocks"
                  required
                  value={singleColor.colorStocks}
                  onChange={(e) => handleColorChange(e, index)}
                />
                {colorList.length !== 1 && (
                  <Button onClick={() => handleColorRemove(index)}>
                    Remove
                  </Button>
                )}
                <br />
                {colorList.length - 1 === index && (
                  <Button onClick={handleColorAdd}>Add Color</Button>
                )}
                <br /> <br />
                {/* add or remove sizes */}
              </div>
            ))}
            {sizeList.length - 1 === index && (
              <Button type="button" onClick={handleServiceAdd}>
                Add size
              </Button>
            )}
            {sizeList.length - 1 === index && (
              <Button type="button" onClick={() => handleServiceRemove(index)}>
                Remove Size
              </Button>
            )}
          </div>
        ))}

        <br />
        <Button type="submit">Submit </Button>
      </form>

      <div className="output">
        <h2>Output</h2>
        <h3>Sizes:</h3>
        {sizeList &&
          sizeList.map((singleSize, index) => (
            <ul key={index}>{singleSize.size && <li>{singleSize.size}</li>}</ul>
          ))}

        <br />
        <h3>Color:</h3>
        {colorList &&
          colorList.map((singleSize, index) => (
            <ul key={index}>
              {singleSize.color && (
                <li>{singleSize.color + " - " + singleSize.colorStocks}</li>
              )}
            </ul>
          ))}
      </div>
    </Box>
  );
}

I have a table which has a time field, which I need to increment the time, based on the “interval time” based on the time value in field of another database.

I have a field that dictates the “start time” and then a field to dictate the “time interval”, which then updates the corresponding fields already inserted into the database.

Registration table:
adds the following fields into the ‘Ride Time’ table:

• Number
• Rider
• Horse
• Division Name

I then have a table named ‘Time Setup’ which updated the following fields into the ‘Ride Time’ table based on the entries with the same ‘Division Name’ field:

• Show Day
• Show Judge
• Show Time
• Division Name

What I want to have happen, is have the ‘Show Time’ be entered into 1st record of the ‘Ride Time’ table and then every subsequent record, have the ‘Show Time’ field increased by an ‘interval time’ field.

For example, data:
number, rider, horse, division, show judge, show day, show time

15, John, Magic, Starter, Henry J, Saturday, 8:00am
16, Mary, Rainbow, Starter, Henry J, Saturday, 8:04am
18, Bobby, Scooby, Starter, Henry J, Saturday, 8:08am
…

So, in this example if the ‘interval time’ is set to 00:04:00, would like all show times, with the ‘Division’ name of “Starter” to increment by 4 minutes every record.

Any pointers on how I would start or how I would code that?

We have a ReactJS web app which uses an iframe to embed PDF in the page. We download the PDF as a byte array, then store it as a blob URL. It works in all browsers except Safari. We use createURLObject which creates a local url like blob:http://domain/guid.
If I grab this URL and open it in another tab, it shows the PDF. Not in Safari. It redirects to favorites with a random Guid and fails.
It seems Safari has issues with blobs or PDFs.
I tried changing it from a blob url to a data URL using a file reader. Only difference is that Safari can render the data url in another tab but not in an iframe.
The iframe loads but the body is empty with the message ‘no supported plugin found’. Im running out of idea and think Safari just sucks

how do I make button that when mouse over the button, the text on the button becomes red.
When the mouse left the button, the button text resumes the original color using mouseover and mouseout events.

here is the event for the button

< button id=”Button” onclick=”test()” > enter

Is there a way to compare two similar images and know the position (in x and y) of the different elemententer image description here

where is the impact on this target.

So I’m trying follow this video: https://youtu.be/NJVkAAZqc0k?t=205

And for some reason the command used in the terminal: node utils/update_info.js Is not working for me.

This is the error I got:

node utils/update_info.js

undefined:1

SyntaxError: Unexpected end of JSON input

at JSON.parse (<anonymous>)

at Object.<anonymous> (C:UsersHiOneDriveDocumentsGitHubhashlips_art_engineutilsupdate_info.js:15:17)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

This is my code:

const basePath = process.cwd();

const { NETWORK } = require(${basePath}/constants/network.js);
const fs = require(“fs”);

const {
baseUri,
description,
namePrefix,
network,
solanaMetadata,
} = require(${basePath}/src/config.js);

// read json data
let rawdata = fs.readFileSync(${basePath}/build/json/_metadata.json);
let data = JSON.parse(rawdata);

data.forEach((item) => {
if (network == NETWORK.sol) {
item.name = ${namePrefix} #${item.edition};
item.description = description;
item.creators = solanaMetadata.creators;
} else {
item.name = ${namePrefix} #${item.edition};
item.description = description;
item.image = ${baseUri}/${item.edition}.png;
}
fs.writeFileSync(
${basePath}/build/json/${item.edition}.json,
JSON.stringify(item, null, 2)
);
});

fs.writeFileSync(
${basePath}/build/json/_metadata.json,
JSON.stringify(data, null, 2)
);

if (network == NETWORK.sol) {
console.log(Updated description for images to ===> ${description});
console.log(Updated name prefix for images to ===> ${namePrefix});
console.log(
Updated creators for images to ===> ${JSON.stringify( solanaMetadata.creators )}
);
} else {
console.log(Updated baseUri for images to ===> ${baseUri});
console.log(Updated description for images to ===> ${description});
console.log(Updated name prefix for images to ===> ${namePrefix});
}

It says I got something wrong on line 17. Which the code on that line is:

let data = JSON.parse(rawdata);