dyno printer listen for every row event

Hey guys i have a little issue with my script , im not managing to make the printing script to work for every row.

I know that i need to assign id for every row in the table but

The printing its working only for the first row in table
not an expert on java so if someone could help me i will be greatfull.

   (function()
    {
        

        // called when the document completly loaded
        function onload()
        {

      var model_text    = document.getElementById('model_text');
            var defect_text = document.getElementById('defect_text');
            var imei_text = document.getElementById('imei_text');
            var batch_text = document.getElementById('batch_text'); 
      var printButton = document.getElementById('printButton');

            // prints the label
            printButton.onclick = function()
            {
                try
                {
                    // open label
  ';
                    var label = dymo.label.framework.openLabelXml(labelXml);
                
    
            
                    // set label text
                    label.setObjectText("model_text", model_text.value);
                    label.setObjectText("defect_text", defect_text.value);
                    label.setObjectText('imei_text', imei_text.value);        
                    label.setObjectText('batch_text', batch_text.value); 

                    
                    // select printer to print on
                    // for simplicity sake just use the first LabelWriter printer
                    var printers = dymo.label.framework.getPrinters();
                    if (printers.length == 0)
                        throw "No DYMO printers are installed. Install DYMO printers.";

                    var printerName = "";
                    for (var i = 0; i < printers.length; ++i)
                    {
                        var printer = printers[i];
                        if (printer.printerType == "LabelWriterPrinter")
                        {
                            printerName = printer.name;
                            break;
                        }
                    }

                    if (printerName == "")
                        throw "No LabelWriter printers found. Install LabelWriter printer";

                    // finally print the label
                    label.print(printerName);
                }
                catch(e)
                {
                    alert(e.message || e);
                }
            }
        };

        // register onload event
        if (window.addEventListener)
            window.addEventListener("load", onload, false);
        else if (window.attachEvent)
            window.attachEvent("onload", onload);
        else
            window.onload = onload;

    } ());
    <script src = "dymo.connect.framework.js" type="text/javascript" charset="UTF-8"> </script>
    <script src = "PrintLabels.js" type="text/javascript" charset="UTF-8"> </script>

 

        <title>Phone list</title>
    </head>
       
    <body>


    

        <div class="container">
<span id="success_message"></span>
            <div class="card">
            
                <div class="card-header">
            
            
                    <div class="row">
                        <div class="col col-md-6"> list</div>

                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                    
<table id="empTable" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Imei</th>
                <th>Date</th>
                <th>Engineer</th>
                <th>Model</th>
                <th>Labour</th>
                <th>Price</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        
                     <?php  foreach ($results as $rs)   { ;?>  
            <tr>
            <td><input type="" id="id" name="id" value="<?= $rs['id'] ?>"></td>
                <td><input type="hidden" id="imei_text" name="imei_text" value="<?= $rs['imei'] ?>"><?= $rs['imei'] ?></td>
                <td><?= $rs['date'] ?></td>
                <td ><input type="hidden" id="defect_text" name="defect_text" value="<?= $rs['engineer'] ?>"><?= $rs['engineer'] ?></td>
                <td><input type="hidden" id="model_text" name="model_text" value="<?= $rs['model'] ?>"><?= $rs['model'] ?></td>
                <td><?= $rs['job1_n'] ?></td>
                <td><?= $rs['total'] ?></td>
                <td><input type="hidden" id="batch_text" name="batch_text" value="<?= $rs['status'] ?>"><?= $rs['status'] ?></td>
                <td>
            <button type="button" class="btn btn-outline-success" onclick="pass_data('<?=$rs["id"];?>')" >Pass</button>&nbsp;
            <button type="button" class="btn btn-outline-danger" onclick="fail_data('<?=$rs["id"];?>')">Fail</button>&nbsp;
            <input type="submit" id="printButton" name="printButton" value="Print" />
                </td>
            </tr>
              <?php $result++;
              } 
              
              echo "Count = $result";
        ?>
        </tbody>
        <tfoot>
            <tr>
                <th>Imei</th>
                <th>Date</th>
                <th>Engineer</th>
                <th>Model</th>
                <th>Labour</th>
                <th>Price</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </tfoot>
    </table>
    
                        </div>
                </div>
            </div>
        </div>
    </body>
</html> 

Why doesn’t the image appear in react? help me pleasse

I’m getting the base64 image from the server,
the image does not appear.

error message:GET data:image/png;base64,{base64 string} net::ERR_INVALID_URL

  <img src={data?.gameIcon} alt="" className={styles.gameIcon} id="img"/>

The BASE64 image is currently stored in mysql and is loaded with that data.
Help me please. i don’t solved this problem.

how to add change event to a file-upload in angular

I am currenly using this package https://www.npmjs.com/package/angular-file?activeTab=readme to upload file , anyone has an idea how we can integrate a change event on this Drop Files where it will automatically call a method after the click browser and then opening a file ?

how do we call a method after a file was drop ? so that I would no longer need to add a button ang then click it , after the file is drop it should call the upload method.

<div ngfDrop
  [(files)]="files"
  [(file)]="file"
  ([validDrag])="validDrag"
  ([invalidDrag])="invalidDrag"
  [ngClass]="{'myHoverClass': validDrag, 'myAntiHoverClass': validDrag}"
>
  Drop Files Here
</div>

#ts code

uploadFile(payload:any) {

    const formData: FormData = new FormData();

    this.files.map((file) => {
      formData.append('attachment', file, file.name);
    });

    this._inspectionService.uploadCSV(formData)
    .pipe(debounceTime(500))
    .subscribe(
      res=>{
        if(res.isSuccess){

        }  
      },
      err=>{
        AppUtils.errorHandler(err,this._notificationService, this.dialog);
      }
    )
  }

enter image description here

How to search for a key in an object’s prototype?

I have an Object which has Objects inside it like this:

obj = {
foo:{x},
bar:{y},

}

i want to search for a key in the sub-objects prototype i.e bar in this context

i have tried this so far without success

for(x in obj){
    if(Object.keys(x.prototype).includes("key_to_be_searched")){
       console.log("true")
}
}

even logging x.prototype returns empty arrays

i am a newbie, so i would really appreciate in-depth explanation or resources where i can learn more about prototypes.

How to create a regex that include space and number in XLS/CSV name

I am working on uploading CSV/XLS file.
For that, I am using the following regex to check whether the uploaded file is CSV or XLS

var regex = /^([a-zA-Z0-9s_\.-:])+(.csv)$/;
if(regex.test(fileUpload.value.toLowerCase())) {
    //some logic
}


var regex1 = /^([a-zA-Z0-9s_\.-:])+(.xls|.xlsx)$/;
if(regex1.test(fileUpload.value.toLowerCase())) {
    //different logic
}

Now , before I upload CSV/XLS , first I am downloading that CSV/XLS and making some changes to and upload it.

So if I have downloaded xyz.csv file, made some changes, and upload it.

After some time , I have again downloaded xyz.csv file , which stores ad xyz (1).csv in my system.
Now, when I tried to upload that CSV file it is showing me invalid CSV because of the space and number in the name of the file.

uncaught error, ‘updatedDoc ‘is read-only

when running the code below, i get uncaught error, ‘updatedDoc ‘is read-only error.
i am fairly new to reactnative, and I can’t figure out where this error is.
when i am pressing processDr function, triggering the onPress event, I am getting this error,I would appreciate if you help me here. I am new to react native development.

//appoint.js/reducers

import { APPOINT_DOC,Remove_Doc } from "../actions/appoint";
import docAppoint from '../../modules/docAppoint';

const initialState = {
  items: {},
  totalAmount: 0
};

export default (state = initialState, action) => {
  switch (action.type) {
    case APPOINT_DOC:
      const addedProduct = action.product;
      const prodPrice = addedProduct.price;
      const prodTitle = addedProduct.title;

      let updateOrNewDocAppoint;

      if (state.items[addedProduct.id]) {
        // already have the item in the cart
        updateOrNewDocAppoint = new docAppoint(
          state.items[addedProduct.id].quantity + 1,
          prodPrice,
          prodTitle,
          state.items[addedProduct.id].sum + prodPrice
        );
      } else {
        updateOrNewDocAppoint = new docAppoint(1, prodPrice, prodTitle, prodPrice);
      }
      return {
        ...state,
        items: { ...state.items, [addedProduct.id]: updateOrNewDocAppoint },
        totalAmount: state.totalAmount + prodPrice
      };
      case Remove_Doc:
      const selectedDoc = state.items[action.pid];
      const quantity = selectedDoc.quantity;
      let updatedDoc;
      if (quantity > 1) {
        // need to reduce it, not erase it
        const updatedDoc = new docAppoint(
            selectedDoc.quantity -1,
            selectedDoc.prodPrice,
            selectedDoc.prodTitle,
            selectedDoc.sum - selectedDoc.prodPrice
        );
        updatedDoc = { ...state.items, [action.pid]: updatedDoc };
      } else {
        updatedDoc = { ...state.items };
        delete updatedDoc[action.pid];
      }
      return {
        ...state,
        items: updatedDoc,
        totalAmount: state.totalAmount - selectedDoc.prodPrice
      };
  }

    return state;
  };

//registerDr

import React from "react";
import { View, Text, StyleSheet,Button,FlatList } from 'react-native';
import {useSelector,useDispatch} from 'react-redux';
import colors from "../../constants/colors";
import appoint from "../../store/reducers/appoint";
import ProcessDr from "../../components/Doctor/process";
import * as docActions from '../../store/actions/appoint';

const registerDr = props => {
const totalFee = useSelector (state => state.appoint.totalAmount)
const appointDoc = useSelector (state => {
    const transformedAppointDoc = []
    for (const key in state.appoint.items ) {
        transformedAppointDoc.push({
            productId : key,
            productTitle : state.appoint.items[key].productTitle,
            productPrice : state.appoint.items[key].productPrice,
            quantity : state.appoint.items[key].quantity,
            sum : state.appoint.items[key].sum
        });
    }
    return transformedAppointDoc;
    
});

const dispatch = useDispatch();

    return(
        <View style={styles.screen}>

            <View style={styles.summary}>
                <Text style={styles.summarytext}> Fee: <Text style={styles.amount} > {totalFee} RS </Text> </Text>
                <Button disabled = {appointDoc.length === 0}
                title="Appoint Doctor" color={colors.primary}  />
            </View>
            <View>
                <FlatList data ={appointDoc} 
                keyExtractor = {item => item.productId} 
                renderItem ={itemData =>
                <ProcessDr quantity={itemData.item.quantity}
                title={itemData.item.productTitle} 
                amount={itemData.item.sum} 
                 onRemove = {() => {
                 dispatch(docActions.removeDoc(itemData.item.productId))
                }}
                
                
                
                />} />
            </View>

        </View>
    )
}

const styles= StyleSheet.create({
    screen:{
        margin: 20,
    },
    summary:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        marginBottom:20,
        padding: 10,
        shadowColor: 'black',
    shadowOpacity: 0.26,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: 'white',
    },
    summarytext:{
        fontFamily:'opsb',
        fontSize:18,
    },
    amount: {
        color: colors.primary
    }
})

export default registerDr;

How to set up http server correctly in MacBook Pro 2021

I think I set up wrongly, in my terminal using “npm install –save http-server” from this website

Problem with npm install –global http-server

how to uninstall it

//

how to know if I have http server install? for example I can check if I have node in my terminal by typing “node -v”

//

I try to do exactly as this video
https://www.youtube.com/watch?v=FjWbUK2HdCo&list=PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X&index=5

Google it found this website https://docs.w3cub.com/npm/getting-started/fixing-npm-permissions.html

using sudo npm install http-server -g, type in my Password, then got a pop up screen don’t know what to do next, so I just click and fail 3 time again, anyone know how to bypass it?

//

I also having trouble opening zsh file in vscode using terminal due to error, so I just not open it in vscode but just plain text, and edit it in plain text, is that also the correct way? or do I need to open the zsh with vscode?

useParams возвращает undefined router v6

Вот мое приложение, которое генерирует Роуты через routesConfig

import { Route, Routes } from "react-router-dom";
import routesConfig from "@routes/routesConfig";
import Header from "@components/Header";

import styles from './App.module.css';

const App = () => {
    return (
        <> 
            <div className={styles.wrapper}>
                <Header />

                <Routes>
                    {routesConfig.map((route, index) => (
                        <Route 
                            key={index}
                            exact={route.exact}
                            element={route.element()} 
                            path={route.path}
                        />
                    ))}
                </Routes>
            </div>
        </>
    )
}

export default App;

Сам конфиг с Роутами

import HomePage from '@containers/HomePage';
import PeoplePage from '@containers/PeoplePage';
import PersonPage from '@containers/PersonPage';
import NotFoundPage from '@containers/NotFoundPage';

const routesConfig = [
   {
      path: '/',
      element: HomePage
   },
   {
      path: '/people',
      element: PeoplePage
   },
   {
      path: '/people/:id',
      element: PersonPage
   },
   {
      path: '/not-found',
      element: NotFoundPage
   },
   {
      path: '*',
      exact: false,
      element: NotFoundPage
   }
]

export default routesConfig;

На странице PersonalPage я хочу получить ID страницы, но useParams возвращает undefiend

import PropType from 'prop-types';
import { useParams } from 'react-router-dom';
import styles from './PersonPage.module.css';

const PersonPage = ( ) => {

    const {getId} = useParams();
    console.log(getId);

    return (
        <>
            <h1 className={styles.title}>Person Page - {getId} </h1>
        </>
    )
}

PersonPage.prototype = {
    // 
}

export default PersonPage;

Знакомый сказал, что это может быть из-за того что я передаю

element={MyComponent()}, 

а надо передавать

element={ <MyComponent />},

но как это реализовать в переборе Map я не знаю. С проблемой столкнулся проходя курс на YouTube, сам только учусь, потому у вас помощи

React Plotly Does Not Load

I am trying to reload a plotly graph every time the user submits another input form. The input form tells my graph how much % of the data from the two arrays, stock_dates and stock_data it should graph. However, when I enter anything inside the form, the plotly graph breaks and this is what I see:

enter image description here

import React, { Component } from 'react';
import Plot from 'react-plotly.js';

class LineChart extends Component {

    stock_dates = [1, 2, 3, 4]
    stock_data = [1, 2, 3, 4]


    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            value: 100
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value })
    }
    handleSubmit(event) {
        this.setState({ visible: true })
        event.preventDefault();
    }
    getDateData() {
        return this.stock_dates;
    }
    getStockData() {
        return this.stock_data;
    }

    render() {



        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label> Number:

                        <input type="text" value={this.state.value} onChange={this.handleChange} />

                    </label>
                    <input type='submit' value='SUBMIT' />
                </form>,
                <Plot
                    data={[
                        {
                            x: this.getDateData().splice(this.state.value),
                            y: this.getStockData().splice(this.state.value),
                            type: 'scatter'
                        }
                    ]}
                    layout={{ width: 1000, height: 500, title: 'Stock Data' }}
                />

            </div>


        );


    }

}

export default LineChart;



Iterating through JSON to populate map

I am trying to iterate through a JSON file and put relevant data inside my markers variable. through each iteration markers should change, however I am stuck. Does anyone know how to do this or how I could?

This is a smaller version of my JSON:

{"properties": 
[{"latitude":"53.542637347578406","longitude":"-113.51709427725768",
"account":"1061985","value":"$500"},
{"latitude":"53.5384925504052","longitude":"-113.520385218556",
"account":"1248558","value":"$500"}]}

This is my JavaScript Code:

/* global fetch */

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        mapId: "8e0a97af9386fef",
        center: {lat: 53.55204130841203, lng: -113.49684664653883},
        zoom: 11,
        mapTypeControl: false,
    });
    let myRequest = new Request("./src/mapview/properties.json");
    fetch(myRequest)
            .then(function(resp){
                return resp.json();
            })
            .then(function(data) {
                  console.log(data.account);      
            });

    const markers = [
        [
            "Assessed",
            53.432556261744296,
            -113.61359034412152,
            "house-svgrepo-com.svg",
            40,
            41
        ]
    ];
    for (let i = 0; i < markers.length; i++) {
        const currMarker = markers[i];
        const marker = new google.maps.Marker({
            position: {lat: currMarker[1], lng: currMarker[2]},
            map,
            title: currMarker[0],
            icon: {
                url: currMarker[3],
                scaledSize: new google.maps.Size(currMarker[4], currMarker[5])

            },
//            animation: google.maps.Animation.DROP
        });
    }
}

This is the HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edmonton Property Assessments</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <h1>Map View</h1>
      <div id="map"></div>
      <script src="script.js"></script>
      <script
          async
          src="https://maps.googleapis.com/maps/api/js?key=UR_KEY&callback=initMap">   
      </script>
  </body>
</html>

React component doesn’t rerender based onprops change

I have pdf-viewer component

export default function PDFViewer({keyword}) {
    const searchPluginInstance = searchPlugin({
        keyword,
    })
    const {Search} = searchPluginInstance;
  return (
    <div>
        <Search/>
        <Viewer plugins={[searchPluginInstance]} />
    </div>
  )
}

keyword is an array of strings that are passed down to the component. That passed keyword list is highlighted in the pdf doc that is the function. But this works only for the first render cycle. After I update the keyword in the parent component and pass it here, nothing is happening.

Basically, once it creates the searchPluginInstance instance, It won’t change based on the props changes. I don’t know how to address thing issue? Is there a design pattern or something to handle this issue?

This is the libray

Upload and retrieve image in React

I would like to upload, read and preview an image. This is what I have tried:

const fileSelector = document.createElement('input');
        fileSelector.setAttribute('type', 'file');
        const inputRef = useRef()
...
const openFile = (e) => {
            fileSelector.click();
            console.log(inputRef.current)
        }
...
<label htmlFor="photo-upload" className="custom-file-upload fas">
                        <div className="img-wrap img-upload">
                            <img
                                alt="..."
                                className="avatar border-gray"
                                src={`http://127.0.0.1:8000/media/${user.photo.replace(/['"]+/g, '')}`}
                            />
                        </div>
                        <Button
                            id="photo-upload"
                            type="file"
                            className="btn-round"
                            color="primary"
                            ref={inputRef}
                            onClick={openFile}>
                            Change Profile Picture</Button>
                    </label>

I don’t get an error message but cannot view/access the picture I have uploaded

use free texture packer for phaser3

I’m using phaser3 and free texture packer, is it possible to do that? if yes please tell me how?
I tried to use addAtlasJSONHash but it was logging that this function is undefined, so I tried game.addAtlasJSONHash, but the same error was happening

How to run animation on load CSS

How do I start counter on load? I was able to make it start on hover but never get it to work on load.

JS:

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var start= rootStyles.getPropertyValue('--start');
var finish= rootStyles.getPropertyValue('--finish');
//function witch gives data for this values
root.style.setProperty('--start', +storedelo-300);
root.style.setProperty('--finish', +storedelo);

CSS:

:root {
    --start: 0;
    --finish: 0; 
  }
@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  
 div {
   transition: --num 5s;
   --num: var(--start);
   counter-set: num var(--num);
 }
 div::after {
   content: counter(num);
 }
 div::hover {
   --num: var(--finish);
 }

And @keyframes is not working for some reson

@keyframes counter {
  from {
    --num: var(--start);
  }
  to {
    --num: var(--finish);
  }
}