Category: javascript

i have a problem,

using a chainway c61 mobile scanner they give you a api, sdk and some other stuff and what im trying to do is make the imbedded scanner work to decode the data of a qr code and put it into a text field. I was trying for hours to see if it can work with a pwa but seems that ill have to switch over to react js,

Anyway the question/problem is i dont know how to use this .aar binary file, which is supposed to be used to build around and make a functioning app and would like some guidance or suggestions on how to do it in a pwa but first problem at hand is actually making the thing work and output data

ive tried changing permissions for the device and going to the app on the device called “keyboard emulator” which is a place to test the device but i cannot figure out how its decoding the data

in all essence though i haven’t built a react js or a native mobile app so im just trying to understand the best approach

here is the sdk and api from chainway

SDK: https://www.chainwayeurope.com/en/download#c61

API: https://www.chainwayeurope.com/upload/files/API/API_Ver20230301.zip

I am getting error Cannot set properties of undefined (setting '_DT_CellIndex') when i use stateSave in jquery datatable in following way:

stateLoadCallback: function (settings, callback) {
    $.get("/api/settings/datatable-state", {
        table_id: $(this).attr("id")
    }, function (result) {
        if (result.status == "success") {
            try {
                callback(JSON.parse(result.data.table_state));
            } catch (error) {
                console.error(error);
            }
        }
    });
    return {};
}

.

I tried to debug it by usinng stateLoadCallback in the following way, it works:

stateLoadCallback: function (settings, callback) {
    return JSON.parse(localStorage.getItem($(this).attr("id")));
},

But if i do the following, i am getting error Cannot set properties of undefined (setting '_DT_CellIndex'):

stateLoadCallback: function (settings, callback) {
    callback(JSON.parse(localStorage.getItem($(this).attr("id"))));
    return {};
},

I created the table in html in following way:

<table class="table table-hover table-bordered table-striped"
    id="stock_out_product_customer_wise_sales_table" style="width: 100%;">
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

and called the datatable like following:

window.improved_sales_payment_entry_table = $("#improved-sales-form #payment-table").DataTable({
    bInfo: false,
    ordering: false,
    destroy: true,
    paging: false,
    searching: false,
    columns: [...]
});

I try to build a website, with a color picker. For that i would like to use some sort of semicircle with wich you can choose the hue and a triangle with wich you can choose the saturation and lightness. see the triangle in the middle I got my semicircle/color wheel and also the triangle shape so I only need the background/color of the triangle.

In my mind I need a linear-gradient in another linear-gradient (like a gradient-array).

#colorTriangle {
    width: 250px;
    height: 200px;
    background-image: linear-gradient(hsl(0, 100%, 50%), linear-gradient(hsl(0, 0%, 100%), hsl(0, 100%, 0%)));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<div id="colorTriangle"></div>

I use Vite with reactjs. I heavily rely on the assets folder to render data and display images.

After I build the website page, I seen that the images folder is not coppied into the assets.

How I render then images. I needed to point dynamically to the image folder.

const CardWrapper = ({ company, setConditions }) => {
    
    const [imageSrc, setImageSrc] = useState(null);
    /**
     *      Load Images dynamically
    //  *          
    */
    useEffect(() => {
        const loadImage = async () => {
            try {
                const dynamicImage = await
                import(/* @vite-ignore */ `../../assets/images/${company.logo}`);

                setImageSrc(dynamicImage.default);
            } catch (error) {
                console.error('Error loading image:', error);
            }
        };

        loadImage();
    }, [company.logo]);
    

Than, I setup the assets thatI want to include into the vite build:

// https://vitejs.dev/config/
export default defineConfig({
  base: '/jobfilters/',
  build: {assetsInclude: ['src/assets/**']},
  plugins: [react()]  
})

https://github.com/ddmihai/jobfilters
https://ddmihai.github.io/jobfilters/

I have created three tabs with corresponding copies for each of them. On mobile, the tabs are on one row and are not full width so some of the tabs are hidden out of view. I’d like to be able to drag and scroll the tabs horizontally (without scroll bar).

My HTML code for the tabs are:

<style>
.label-container.scroll-parent {
      width: 80% !important;
      margin: 0 auto;
      overflow-x: hidden;
    }
.label-container.scroll-parent > .scroll-child {
      width: 1200px;
      cursor: pointer;
      display: flex;
      flex-direction: row !important;
    }
</style>
<div class="single-tab label-container scroll-parent">
        <div class="scroll-child">
          <div id="label_1" class="label odd active">
            <h2>Growth</h2>
          </div>
          <div id="label_2" class="label even">
            <h2>Marketing</h2>
          </div>
          <div id="label_3" class="label odd">
            <h2>Talent</h2>
          </div>
        </div>
      </div>

I tried to use the JavaScript from this StackOverflow which works fine on desktop with mouse events. However I need to make this work on mobile so need to switch it to touch events. The JS code from that SO thread is:

let mouseDown = false;
let startX, scrollLeft;
const slider = document.querySelector('.scroll-parent');

const startDragging = (e) => {
  mouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
}

const stopDragging = (e) => {
  mouseDown = false;
}

const move = (e) => {
  e.preventDefault();
  if(!mouseDown) { return; }
  const x = e.pageX - slider.offsetLeft;
  const scroll = x - startX;
  slider.scrollLeft = scrollLeft - scroll;
}

// Add the event listeners
slider.addEventListener('mousemove', move, false);
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);

Only thing I changed above from the original is the targeted element.

As I understand it, this JavaScript won’t work because there’s no equivalent to a “mousemove” for touch events.

How can I modify the code to make it work for touch events on mobile?

I am writing a C# process that performs some execution and returns a stream of bytes back to the JS process.

My JS Code:

    const gameServerProcess = cp.spawn('./Process.x86_64', [],
        {
            encoding: 'utf8',
            maxBuffer: Number.MAX_VALUE
        });

    gameServerProcess.stdout.on('data', (data) => {
        console.log(`stdout: ${data}`);
    });

My C# Code:

    GZipStream zip = new GZipStream(Console.OpenStandardOutput(), CompressionMode.Compress);
    StreamWriter streamWriter = new StreamWriter(zip);
    streamWriter.Write(json);
    streamWriter.Close();
    zip.Close();

The stdout.on steam is receiving the desired output but it is also receiving the logs from the process. The trouble I am having is understanding how best to determine what output is a log and what output is the process result data.

The cleanest solution seemed to be using options.stdio to open a 4th output stream for the process which would only be used to pass the desired output data https://nodejs.org/api/child_process.html#optionsstdio . The problem I am having with that is I dont know how to write to that 4th output steam from C#. Is this possible? Is there a better solution that I am missing?

Thanks for the help!

    $(function () {
    var l = abp.localization.getResource('tennis');
    var createModal = new abp.ModalManager(abp.appPath + 'Courts/CreateModal');
    //var editModal = new abp.ModalManager(abp.appPath + 'Courts/EditModal');

    var dataTable = $('#CourtsTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax:          abp.libs.datatables.createAjax(huake.tennis.courts.court.getCourtByAreaName, function    () {
                return {filterAreaName: "天河体育中心"};
            }),
            columnDefs: [
                {
                    title: l('AreaName'),
                    data: "areaName"
                },
                {
                    title: l('CourtNo'),
                    data: "courtNo"
                },

                {
                    title: l('IpCameraInnerAddress'),
                    data: "ipCameraInnerAddress",
                }
            ]
        })
    );
    });

this is my javascript code which try to call huake.tennis.courts.court.getCourtByAreaName api with parameter filterAreaName,when i use english it is all ok, but when i change it to chinese. it got problem.
in webbrower connection tab I got these:
filterAreaName=%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD&sorting=courtNo%20asc&skipCount=0&maxResultCount=10
how can i fix it. thanks

I want some help to fix the chinese encode problem

So,I have dompdf installed for a project of mine,however when I try converting into PDF I get the following error:

((An uncaught Exception was encountered
Type: DOMPDF_Exception

Message: No block-level parent found. Not good.

Filename: C:xampphtdocsProjectapplicationlibrariesdompdfincludeinline_positioner.cls.php

Line Number: 66

Backtrace:

File: C:xampphtdocsProjectlibrariesdompdfincludeframe_decorator.cls.php
Line: 471
Function: position

File: C:xampphtdocsProjectapplicationlibrariesdompdfincludetext_frame_reflower.cls.php
Line: 340
Function: position

File: C:xampphtdocsProjectapplicationlibrariesdompdfincludeframe_decorator.cls.php
Line: 477
Function: reflow

File: C:xampphtdocsProjectapplicationlibrariesdompdfincludepage_frame_reflower.cls.php
Line: 169
Function: reflow

File: C:xampphtdocsProjectapplicationlibrariesdompdfincludeframe_decorator.cls.php
Line: 477
Function: reflow

File: C:xampphtdocsProjectapplicationlibrariesdompdfincludedompdf.cls.php
Line: 680
Function: reflow

File: C:xampphtdocsProjectapplicationcontrollersbo_engineCommande_engine.php
Line: 611
Function: render

File: C:xampphtdocsProjectindex.php
Line: 315
Function: require_once))

Not sure why is this happening,I looked around on google and there’s little to no matches on my problem,on my code,at least….I tried all solutions concerning this problem,from changing CSS,to reinstalling dompdf,to trying older versions to changing:
< html>

…

<html>
to :
< html><html>
yet the problem persists,I don’t understand if the problem with me or my Project
Apologies in advance if the error was my fault in any way;I’m still new to this and I’m still learning.

I’m doing my first steps with async-await functions and currently trying it on JSONPlaceholder site.
I’ve managed to fetch the data and now I want to add event listeners to every ‘a’ tag. The problem is as described in the title: the results of getElementByClassName or querySelectorAll are empty in the script but it works in the browser! I suppose my attempts to access those elements run before async function end. If so how should it be done?

I’ve tried: putting the script at the very end of the html body (thinking it’s going to run after evrything else is loaded); at the end of async function, but that just doesn’t work.

The script which I’m trying to get working right now is simple (file’s name’s ‘posts.js’): *post-item is is a class name for a tag

let catalogItems = document.querySelector('[data-catalog-items]');
let postItems = [...catalogItems.getElementsByClassName('post-item')];
console.log(postItems);

My async function:

class HTTPResponseError extends Error {
    constructor(response) {
        super(`HTTP Error Response: ${response.status} ${response.statusText}`);
        this.response = response;
    }
}

const getPostItems = async ({limit, page}) => {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);
        if (!response.ok) {
            throw new HTTPResponseError(response);
        }
        const total = +response.headers.get('x-total-count');
        const items = await response.json();
        return {items, total};
    } 
    catch (err) {
        console.error(err);
    }
}

I have a pretty simple issue I am working on but I can’t seem to find the solution anywhere.

I have an api call I am making:

  function createReferral(
    referralData: {
      actionTypeId: number
    },
  ) {
    referralAxios.post(`/api/ReferralMasters`, {

      appTypeID: referralData.appTypeId,

    })
      .then(function (response) {
        console.log(actionTypeId)
      })
  }

I am getting an error message saying that `actionTypeId` is not defined. 

How do I go about passing my function parameter to the `.then` part of the api call?

I have a few react components (for eg:like below)

import AloneTab from './tab/AloneTab'
import BiTab from './tab/BiTab'
import CalTab from './tab/CalTab'
import DelTab from './tab/DelTab'

I have an array obj={"Alone":true,"Bi":true,"Cal":false,"Del":true}

Currently, I am rendering the components inside a div like so (just a representation)

<div>
 {obj["Alone"]? <AloneTab/>: null}
 {obj["Bi"]? <BiTab/>: null}
 {obj["Cal"]? <CalTab/>: null}
 {obj["Del"]? <delTab/>: null}
</div>

3 components will render ( will not render since "Cal":false)

I have just shown only a few components but there are many more & repeating the code again & again is not nice. Is there a way to loop over the items & renders the components?

I tired

const keys=  Object.keys(obj)
const values=  Object.values(obj)

const tabs = keys.map((tab, index)=>
        values[index] ? <`${tab}Tab`/> :null)

<div>
 {tabs}
</div>

However, this does not work. Is there anyway to make this work?

i’m a noob trying to implement drag and drop in my blazor application, but the ondrop event is not firing. Instead, ondragleave is fired when I release the mouse.

We have two tables:

Panel A | Panel B

Proxy1 | Component
Proxy2 | Component
Proxy3 | Component
… | …

We can start a drag operation by dragging a Proxy or a Component. This passes the underlying data to Panel B, which manages a list of data rendered by Components

Drop should be allowed within Panel B, or on top of a Component in Panel B, allowing for reordering of elements.

As described above, the ondrop event of Panel B is never triggered, but ondragleave instead.

-I have set @ondragenter:preventDefault=”true” and @ondragover:preventDefault=”true” on all components.

-I was suggested to prevent rendering of the components since that could be causing the DOM tree to lose track of the Panel B instance during the drag operation, but I am not sure how to do this without breaking everything. By inspecting the elements on Edge, it seems that the panel is not actually being re-rendered, so I am at a loss about what to do.

Any tips are appreciated.
Thanks in advance!

gmail_body_request

I need to build a web extension. In my extension, I need to listen to every request to gmail to quickly display content to users. But it seems that the content of the email has been simplified, making it difficult to read, and there is no guarantee that this structure will not change in the future. Is there any way I can read the content coming from gmail request

For example, to get the subject of a new incoming mail. I have to use body[2][0][0][4][0][9] with XMLHttpRequest and javascript. This is an unstable and long-term way of retrieving data.

I need to convert an object type to an array of different objects in order to display several tables in my angular project.

Below is my object:

let myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

Expected Array

[
  [
    {detail:"Paris", label:"internalValue"},
    {detail:"Nantes", label:"originalValue"},
    {detail:10, label:"score"}
  ],
  [
    {detail:"France", label:"internalValue"},
    {detail:"France", label:"originalValue"},
    {detail:100, label:"score"}
  ],
  [
    {detail:12345, label:"internalValue"},
    {detail:34567, label:"originalValue"},
    {detail:45, label:"score"}
  ]
]

My code

let tableData:any;
tableData = _.transform(myObject, result, value, key)=>{
  let retValue:any;
  _.forIn(value, (v,k)=> {
    let tempArr:Array<any>;
    let tempObj:any = {};
    tempObj.detail= v;
    tempObj.label=key;
    tempArr.push(tempObj);
    retValue.push(tempArr);
  })
  result = [...retValue];
  return result;
},[]);

Stuck here for the next set of loops.

I’m getting the error below when I try to call .consent() method on Clappr’s player in an Angular application:

core.mjs:6494 ERROR TypeError: Cannot read properties of undefined (reading 'getCurrentPlayback')
    at Player.consent (clappr.js:7580:19)
    at LiveEmbutidaComponent.ativarNovoPlayer (live-embutida.component.ts:176:27)
    at Object.next (live-embutida.component.ts:256:18)
    at ConsumerObserver.next (Subscriber.js:91:1)
    at SafeSubscriber._next (Subscriber.js:60:1)
    at SafeSubscriber.next (Subscriber.js:31:1)
    at OperatorSubscriber._next (Subscriber.js:60:1)
    at OperatorSubscriber.next (Subscriber.js:31:1)
    at map.js:7:1
    at OperatorSubscriber._next (OperatorSubscriber.js:13:1)

I think the problem isn’t exactly .consent(), because after .consent() I do a .stop() and then a .load(). If I remove any, the error persist only with different vars on ‘reading’ message.

The problem is that I use this exact same code successfully for some years now in production. I just went to do a new page, copied the old code and it’s not working. The difference is that in the old page all the components are loaded then I call the methods that play the stream and in this new page, the page is loaded at user discretion and I tell the player te correct url on page load.

I’ve checked if the parentId’s div is already loaded by DOM and it is. Link is also correct. I’m not really sure where is the undefined Clapper is complaining…

code:

activateNewPlayer() {
    if (!this.clapprPlayer) return;
    console.log('activateNewPlayer', this.clapprPlayer); //<-- fine, dumps instance

    let link = this.chooseLink();
    if (link == this.link) return;
    console.log('anp0', this.link); //<-- fine, correct link
    this.link = link;

    this.clapprPlayer.consent(); //<-- error here
    this.cancelEnding = true;
    this.clapprPlayer.stop(); //<-- or here if I remove .consent()
    this.clapprPlayer.options.loop = link == this.linkLoading;
    if (this.link == this.linkLoading && this.currentSchedule.openingImage) {
        this.clapprPlayer.getContainerPlugin('poster').load(this.agendamentoAtual.openingImage)
    } else {
        this.clapprPlayer.load(this.link, '', true); //<-- or here if I remove .consent() and .stop()
    }
    this.deactivatePlayButtonAndErrorScreen();
}

The player’s instance is created in another method, this one:

createNewPlayer() {
    if (this.clapprPlayer) return;
    console.log('createNewPlayer', document.querySelector('#playerEmbeddedLive')); // <-- fine, dumps div

    this.link = this.chooseLink();
    console.log('link', this.link); // <-- correct link
    let poster = this.currentSchedule.openingImage ? this.currentSchedule.openingImage : null;
    try {
        this.clapprPlayer = new Clappr.Player({
            source: this.link,
            parentId: "playerEmbeddedLive",
            autoPlay: !this.currentSchedule.openingImage,
            loop: this.link == this.linkLoading,
            poster,
            events: {
                onError: this.stopMonitoring.bind(this, 'onError'),
                onStop: this.stopMonitoring.bind(this, 'onStop'),
                onEnded: this.stopMonitoring.bind(this, 'onEnded'),
                onPause: this.stopMonitoring.bind(this, 'onPause'),
                onPlay: this.stopMonitoring.bind(this),
                onSeek: this.onSeek.bind(this)
            }
        });
    } catch (e) {
        console.log('error', e);
    }
}

Any ideas ?