Category: javascript

Category Added in a WPeMatico Campaign

NPM with Gutenberg issue

The NPM ALways do that .. and this code runs easly when i register the block as a plugin .. but when iuse the webpack do that !

<s> [webpack.Progress] 99% done plugins
<s> [webpack.Progress] 99% done plugins
<s> [webpack.Progress] 99%

asset main.js 6.46 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 7.36 KiB
  ./src/index.js 499 bytes [built] [code generated]
  ./src/Blocks/aboutus.js 6.44 KiB [built] [code generated] [1 error]
  ./src/js/gutenberg/blocks/firstRightWay/first.js 435 bytes [built] [code generated] [1 error]

ERROR in ./src/Blocks/aboutus.js 68:8
Module parse failed: Unexpected token (68:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|     return ([
>         <InspectorControls style={{ marginBottom: "40px" }}>
|              <PanelBody>
|           <p>Select The Image !</p>
 @ ./src/index.js 6:0-48 7:0-12

ERROR in ./src/js/gutenberg/blocks/firstRightWay/first.js 9:15
Module parse failed: Unexpected token (9:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     category: 'design',
|     edit() {
>         return <div>Hello World, step 1 (from the editor).</div>
|     },
|     save() {
 @ ./src/index.js 15:0-66 17:0-5

webpack 5.69.1 compiled with 2 errors in 264 ms
<s> [webpack.Progress] 99% cache store build dependencies
<s> [webpack.Progress] 99% cache store build dependencies
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 100%

there’s any package or anything make it like that i never used .. but it mostly same package.json that was runs

Multiple Increments for multiple inputs

Code should increment or decrement his own input, for diameter should work only button for diameter etc. But every click increment all inputs

The problem is every click increment all inputs that i want to change

const initialValues = {
      diameter : 12,
      friction : 1,
      robotsQnt: 1,
      simulationTime : 1,
    }
    const [count,setCount] = useState(1);

    const incrementCount = () =>{
      setCount(count + 1);
    };

    const decrementCount = () =>{
      if(count>0){setCount(count -1);}
    };

<div className='inputForm'>
                    <input type="number" id='InputDiameter' pattern="^-?[0-9]d*.?d*$" value = {count}  onChange={(event) =>{ setCount(event.target.value) }}/>
                    <label for="InputDiameter" className='static-value'>w</label>
                  </div>
                  <div className='ButtonCount' onClick={incrementCount(diameter)}><button type='button'><span className="countText">+</span></button></div>
                  <div className='ButtonCount' onClick={decrementCount(diameter)}><button type='button'><span className="countText">-</span></button></div>
                </div>

<div className='inputForm'>
                    <input type="number" id='InputNumber' pattern="^-?[0-9]d*.?d*$" value = {count}  onChange={(event) =>{ setCount(event.target.value) }}/>
                    <label for="inputNumber" className='static-value'>qnt</label>
                  </div>
                  <div className='ButtonCount' onClick={incrementCount}><button type='button'><span className="countText">+</span></button></div>
                  <div className='ButtonCount' onClick={decrementCount}><button type='button'><span className="countText">-</span></button></div>
                </div>

Have div width match that of the contents

I have a container div that holds a react handsontable component, and I want to use the autosizing of the component but at the same time have it centered in the screen (or an outer div).

So in this example:
https://jsfiddle.net/opike99/b1ux0rLy/5/

I’m trying to get the width of div #example1 to match the contents of the table (so by changing the number of columns, the div width will adjust accordingly).

HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>

<div class="outer2">
<div class="outer1">
  <div id="example1">



  </div>
</div>
</div>

JS:

const container = document.querySelector('#example1');

const numberOfColumns = 7;

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(5, numberOfColumns),
  colHeaders: true,
  rowHeaders: true,
  hiddenColumns: true,
  width: 'auto',
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
});


// re-render your Handsontable instance
hot.render()

CSS:

.outer2 {
}

.outer1 {
}

#example1 {
    border-style: solid;
    /* width: fit-content; */
}

Redirecting backend calls in Vue application

I am trying to deploy my website written in Vue to a static webhosting service (AWS S3).

I have been using the bencodezen boilerplate which seems to be generated using Vue-CLI. The boilerplate comes with a pre-configured development server such that you can redirect the backend calls (using axios) to either a mock backend or to a production backend:

vue.config.js

module.exports = {
    [...]
    // Configure Webpack's dev server.
    // https://cli.vuejs.org/guide/cli-service.html
    devServer: {
    ...(process.env.API_BASE_URL
      ? // Proxy API endpoints to the production base URL.
        { proxy: { '/api': { target: process.env.API_BASE_URL } } }
      : // Proxy API endpoints a local mock API.
        { before: require('./tests/mock-api') }),
    },
}

All calls to myurl.com/api/* will be directed to either the mocked backend or the API_BASE_URL if such is defined. This works fine while using the vue-cli-service serve development server but I’m failing to understand how to translate this to AWS S3, or any other webserver suited for production. If I try to make a login, post-request I get the following response from AWS:

405 Method Not Allowed

Indicating that the call was never redirected (AWS S3 doesn’t allow POST calls).

Is it possible to redirect the API-calls directly from the web browser to the backend without going through the webserver? If not, how to I setup my production webserver in such a ways that the calls to myurl.com/api/* are automatically forwarded?

Array Cards Problems

Take user input of 5 Cards and find highest card pair from five cards. If your collection contains at least one pair, return an array of two elements: true and the card number of the highest pair. Eg: highestCardPair([“A”, “A”, “Q”, “Q”, “6” ]) –> [true, “A”]
highestCardPair([“J”, “6”, “3”, “10”, “8”]) –> false
highestPair([“3”, “5”, “5”, “5”, “5”]) ➞ [true, “5”] – three or more of the same card still count as containing a pair

How to save an object in redux?

I build an app in React with Redux and I try to send to my state an object and I try to save it in ‘thisUser’ but I don’t know how to write that ‘return’ because mine doesn’t work.

My Redux state:

const initialState = {
    thisUser: {}
}

export function usersReducer(state = initialState, action) {
    switch (action.type) {
        case 'users/addUser':
            return { ...state, thisUser: { ...state.thisUser, ...action.payload} }  //the problem
        default:
            return state
    }
}

Dispatch method:

dispatch({ type: "users/addUser", payload: new_user });

Can you tell me how to write that return, please?

Map function not working for properly while querying from Mongodb

I have a few mongodb documents like this

{'_id':'1',
 'year':2020,
 'season':'Summer',
 'status':'Over'},

{'_id':'2',
 'year':2020,
 'season':'Winter',
 'status':'Pending'},

{'_id':'3',
 'year':2020,
 'season':'Rainy',
 'status':'Pending'},

{'_id':'4',
 'year':2021,
 'season':'Summer',
 'status':'Pending'}
........
...
.

If I give an input of array of years [2020,2021], then my expected output should be

[{year:2020,sesason:['Winter','Rainy']},{year:2021,sesason:['Summer','Winter','Rainy']}]

where season array should only contain values whose status is ‘Pending’.
I tried this code,but not getting the expected output

var arr =[];
var yearsArray = [2020,2021]
var seasonArray = ['Summer','Rainy','Winter']
var pendingSeasons = [];
return await Promise.all(
   yearsArray.map(async(year) =>{
      return await Promise.all(
         seasonArray.map(async(tP) =>{
             await db.collection('CC')
              .find({'year':year,'season':tP})
              .toArray()
              .then((data) =>{
                    if(data.status != 'Over'){
                        pendingSeasons.push(tP)
                    }
                })
            })
        ).then(arr.push({"year":year,"season":pendingSeasons}))
        })
        ).then(() =>{
            return arr
        })

Sync an html5 video with an highchart.js line chart

I have a one minute long video of a train moving and some data series about his position, onboard accelerometer etc.

My goal is to make line charts (with Highcharts.js) of those measurements that are dynamically drawn with the video at a rate of 20points per second.
I was wondering if there’s a way to attach an event to the video progress bar and redraw the chart every x milliseconds and/or every time that the user play/stop the video

Change colour based on data set (d3)

I have two dataset d1 and d2 as follows:

const d1 = [
 {group: "H", value: 6},
 {group: "I", value: 2},
 {group: "M", value: 3}
];
const d2 = [
 {group: "H", value: 1},
 {group: "I", value: 12},
 {group: "M", value: 2}
];

and a function called makethisgraph where the “data” that is sent is either d1 and d2 based on a button I click. In this function, based on the data I select, the bars change to match the values. I want to make it in such a manner that if I select d1 then the color of the bar changes to red and if d2 then it turns to green

function makethisgraph(data) {
 var u = svg.selectAll("rect")
 .data(data)
 u .enter()
 .append("rect")
 .merge(u)
 .transition()
 .duration(1000)
 .attr("x", function(d) { return x(d.group); })
 .attr("y", function(d) { return y(d.value); })
 .attr("width", x.bandwidth())
 .attr("height", function(d) { return height - y(d.value); })
 .attr("fill", function(d, i) {
    //  if ( data = d1)
    //  {
    //      return "red"
    //  }
    //  else
    //  {
    //      return "green"
    //  }
  return "blue"
});

I tried writing if the data I got is d1 then it will be red but it doesn’t work. Is there any other way to solve this?

print receipt using a pos printer in Chrome [closed]

I have a receipt to print by using an Epson 220 printer. The print look pretty much decent when i use a laser printer, but can’t get a clear print on POS printer. I found that Chrome prints documents as an image and that’s the reason for this. How can i achieve this without using Firefox?