Category: javascript

So basically i need so that the data writen in the “book now” FORM to appear in the agenda on the left side of the main form in the correct table row that matches the time put in “Book now” form

just ignore the clock and all things all I want is that the data transfers correctly into the angenda

Sorry for bad and unorganised coding , I’m a beginner

```
body{
    display: flex;
}
.cont {
background-color: white;
width: 390px;
height: 600px;
border: 7px solid #50BE87;
overflow-y: scroll; 
}
.cont::-webkit-scrollbar {
display: none;
}
.cont {
-ms-overflow-style: none;  
scrollbar-width: none;  
}
table {
    align-items: center;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;    
    }
    th, td {    
  border-bottom: 1px solid #ddd;
}
#ore{
    width: 50px;
}
#introdu1{
    width: 300px;
}
th {
  height: 100px;
}
#ceas{
   
    font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 20px;
align-items: left;
}

.cerc{
    width:600px;
    height: 600px;
    border: 7px solid #50BE87;
   
}
#booknow{
    display: inline;
    margin-top: 10px;
    margin-left: 10px;
    background-color:#50BE87 ;
    width: 180px;
    height: 60px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 25px;

}

.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup {
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
box-shadow:5px 5px 3px rgba(0,0,0,0.2);
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}

body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
body.showLoginForm .popup-overlay {
display:block;

}
body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.popup .form .header {
font-size:20px;
color:#222;
margin:5px 0px;
}
.popup .form .element {
padding:8px 10px;
}
.popup .form .element label {
margin-left: 20px;
width: 95%;
font-size:20px;
color:#222;
margin-bottom:5px;
}
.element input {


display:block;
width:90%;
padding:9px 9px;
border-radius:5px;
background:#999999;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
}
.popup .form .element button {
margin-left: 25%;
margin-top:15px;
width:50%;
padding:10px 0px;
text-transform:uppercase;
border:none;
font-size:15px;

border-radius:3px;
cursor:pointer;
background:#333333;
color:white;
}
.element {
display: flex;
}
#email {
margin-left: 20px;
width: 90%;
}
#meet{
width: 90%; 
margin-left: 20px;
}
#num{
display:block;

}
#nuum{
display: block;
}
#start  {

border-radius: 5px;
text-align: center;
font-size: 20;
color: white;
width: 210px;
height: 110px;
background-color: #333333;
}
#start label {
border-radius: 5px;
padding: 8px 8px;
}
#appt{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#appt1{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#start label{
color: white;
margin-top: 10px;
font-size: 20px;
padding: 5px;
}
.time{
display: flex;
margin-left: 40px;
margin-right: 40px;
margin-top: 40px;
justify-content: space-between;

}#email{

width: 80%;
font-size:20px;
padding: 5px;
outline: none;

border-left:none;

}
#meet{
width: 80%;
font-size:20px;
padding: 5px;
outline: none;

border-left:none;
}
#report{
display: block;
margin-top: 350px;
    margin-left: 430px;
    background-color:black;
    width: 160px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px;
}
#bu15{
margin-top: 10px;
margin-left: 385px;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu30{
display:blok;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu45{
margin-top: 10px;
margin-left: 385px;
display: inline;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu60{

display: inline;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bug{
font-size:28px;
}
#chen{
margin-left: 180px;
display:inline-flex;
font-family: Arial;
font-size: 25px;
}
body {
font-family:"Arial";
}
.center1 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay1 {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup1 {
align-content: center;
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}
body.showLoginForm1 .popup-overlay1 {
display:block;
}
body.showLoginForm1 .popup1 {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}


.popup1 .form1 .header1 {
text-align:center;
font-size:25px;
font-weight:600;
color:#222;
margin:20px 0px;
}
.popup1 .form1 .element1 {
padding:8px 20px;
}
.popup1 .form1 .element1 label {
text-align:center;
align-items: center;
display:block;
font-size:18px;
color:#222;
margin-bottom:3px;
}
.popup1 .form1 .element1 input {
margin-left: 100px;
align-content: center;
width:60%;
padding:8px 10px;
box-sizing:border-box;
outline:none;
border: none;
background:#999999;
border-radius:3px;
}
.popup1 .form1 .element1 button {
margin-top:5px;
width:150px;
padding:10px 0px;
text-transform:uppercase;
outline:none;
border:none;
font-size:20px;
font-weight:600;
margin-left: 180px;
cursor:pointer;
background:#999999;
color:#f5f5f5;
}
.dot2 {
position: absolute;
top: 129px;
left: 678px;
height: 305px;
width: 305px;
background-color: black;
border-radius: 50%;
display: inline-block;
}
#dot {
position: absolute;
top: 142px;
left: 692px;
height: 270px;
width: 270px;
background-color: #32C832;
border-radius: 50%;
display: inline-block;
border: 3px solid black;
}
.base-timer {
position:absolute;
width: 300px;
left: 680px;
top: 130px;
height: 300px;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: white;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="table.css">
    <title>Document</title>
            </head>
      
<body>
    <div id="ceas"></div>
    <div class="cont" id="container">
       
    </div>
    <div class="cerc">
      <button id="booknow" onclick="openLoginForm()">Book Now</button>
      <h2 id="chen">{k<span style="color: #FF7900;">IT</span>chen} Pepper</h2>
      <div class="but5"></div> 
      <span class="dot2"></span>
      <div id="app"></div>
        <span id="dot"></span>
        <button id="report" onclick="openLoginForm1()"><i id="bug" class="fas fa-bug">Report</i></button>
        <button id="bu15" onclick="timer15()">15 min</button>
        <button id="bu30" onclick="timer30()">30 min</button>
        <button id="bu45" onclick="timer45()">45 min</button>
        <button id="bu60" onclick="timer60()">60 min</button>
        
     
    </div>
    
    <div class="popup-overlay"></div>
      <div class="popup">
        
        <div class="form">
          
          
          <div class="element">
            <div>
                <label for="meet">Meeting subject.</label>
            <input type="text" id="meet">
                </div>
                <div class="container">
                    <i class="fa fa-envelope icon"> </i>
                <label for="email">Email</label>
            <input type="email" id="email">
                </div>
                </div>

          <div class="element" >
            <i class="fas fa-user-plus"></i>
            <label  id="nuum" for="num" >Number of member</label>
            <input type="number" id="num"  min="1" max="5">
          </div>
       
          <div class="time">
          <div  id="start">
            <label for="appt">Start time:</label><br>
          <input type="time" id="appt" name="appt" value="08:00">
            </div>
          <div id="start">
            <label for="appt">Ended time:</label>
          <input type="time" id="appt1" name="appt" value="20:00">
            </div>
            </div>
          
         
          <div class="element">
            <button onclick="closeLoginForm()">Book</button>
          </div>
        </div>
      </div>
     
      <div class="popup-overlay1"></div>
      <div class="popup1">
        
        <div class="form1">
          
          <div class="header1">
            Report an issue<i class="fas fa-user-plus"></i>
          </div>
          <div class="element1">
            <label for= "email">Your email</label>
              <input type="email" id="email2">
          </div>
          <div class="element1">
            <label for="text">Description</label>
            <input type="text" id="description">
          </div>
          <div class="element1">
            <label for="text">Issue type</label>
            <input type="text" id="issue">
          </div>
          <div class="element1">
            <button onclick="closeLoginForm1()">Send</button>
          </div>
        </div>
      </div>
<script>
var date, array = [];
date = new Date();
date.setHours(80, 00, 00);
while (date.getMinutes() % 15 !== 0) {
    date.setMinutes ( date.getMinutes() + 1 );
}
for (var i = 3; i < 13 * 4; i++) {
  const content ="<div>"
    array.push(date.getHours() + ':' + date.getMinutes());
    date.setMinutes ( date.getMinutes() + 15);"</div>"
}


var myTable = "<table><tr>";

var perrow = 1;
var id = 1;
array.forEach((value, i) => {
  
  myTable += `<td id="ore">${value}</td>`;
  myTable += `<td id="introdu${id++}" > </td>`;

  var next = i + 1;
  if (next % perrow == 0 && next != array.length) {
    myTable += `</tr"><tr>`;
  }
});
myTable += "</tr ></table>";
document.getElementById("container").innerHTML = myTable;
let clock= ()=>{
            let date= new Date();
            let hrs = date.getHours();
            let mins = date.getMinutes();
            let secs = date.getSeconds();
            let period = "AM";
            if (hrs ==0){
                hrs = 12;
            }
            else if(hrs >= 24){
                hrs = hrs - 12;
                perod = "PM";
            }  
            hrs = hrs < 10 ? "0" + hrs : hrs;
            mins = mins < 10 ? "0" + mins : mins;
            secs = secs <10 ? "0" + secs : secs;
            let time = `${hrs}:${mins}:${secs}:${period}`;
            document.getElementById("ceas").innerHTML = time;
            setTimeout(clock, 1000);
            };
            clock();
            function openLoginForm(){
  document.body.classList.add("showLoginForm");
}
function closeLoginForm(){
  document.body.classList.remove("showLoginForm");
 

//so this is the transfer data i have
  document.getElementById("introdu1").innerHTML=
    document.getElementById('meet').value+"Subiectul conferintei "+
    document.getElementById('email').value+"email "+
    document.getElementById('num').value+" membri "+
    document.getElementById('appt').value+" - "+
    document.getElementById('appt1').value+" ora";
}

   
          
function openLoginForm1(){
        document.body.classList.add("showLoginForm1");
      }
      function closeLoginForm1(){
        document.body.classList.remove("showLoginForm1");
      }
      


      const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};
var TIME_LIMIT = 0;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval15 = null;
let timerInterval30 = null;
let timerInterval45 = null;
let timerInterval60 = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("app").innerHTML = `
<div class="base-timer">
  <circle class="floor-timer" cx="50" cy="50" r="45"></circle>
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        class="base-timer__path-remaining ${remainingPathColor}"
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" class="base-timer__label">${formatTime(
    timeLeft
  )}</span>
</div>
`;
function clearIntervals(){
  clearInterval(timerInterval15);
  clearInterval(timerInterval30);
  clearInterval(timerInterval45);
  clearInterval(timerInterval60);
}
function onTimesUp() {
  clearIntervals();
}
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
  const { alert, warning, info } = COLOR_CODES;
  if (timeLeft <= alert.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(warning.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(alert.color);
  } else if (timeLeft <= warning.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(info.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(warning.color);
  }
}
function calculateTimeFraction() {
  const rawTimeFraction = timeLeft / TIME_LIMIT;
  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
  const circleDasharray = `${(
    calculateTimeFraction() * FULL_DASH_ARRAY
  ).toFixed(0)} 283`;
  document
    .getElementById("base-timer-path-remaining")
    .setAttribute("stroke-dasharray", circleDasharray);
}
function timer15(){
TIME_LIMIT = 901;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
  timerInterval15 = setInterval(() => {
    var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
    timePassed = timePassed += 0;
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);
    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}
function timer30(){
  TIME_LIMIT = 1801;
  timePassed = 0;
  timeLeft = TIME_LIMIT;
  clearIntervals();
  
  remainingPathColor = COLOR_CODES.info.color;
  timerInterval30 = setInterval(() => {
    var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
    timePassed = timePassed += 0;
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);
    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
  }
  function timer45(){
    TIME_LIMIT = 2701;
    timePassed = 0;
    timeLeft = TIME_LIMIT;
    clearIntervals();
    remainingPathColor = COLOR_CODES.info.color;
    timerInterval45 = setInterval(() => {
      var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
      timePassed = timePassed += 1;
      timeLeft = TIME_LIMIT - timePassed;
      document.getElementById("base-timer-label").innerHTML = formatTime(
        timeLeft
      );
      setCircleDasharray();
      setRemainingPathColor(timeLeft);
      if (timeLeft === 0) {
        onTimesUp();
      }
    }, 1000);
    }
    function timer60(){
      TIME_LIMIT = 3601;
      timePassed = 0;
      timeLeft = TIME_LIMIT;
      clearIntervals();
      remainingPathColor = COLOR_CODES.info.color;
      timerInterval60 = setInterval(() => {
        var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
        timePassed = timePassed += 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(
          timeLeft
        );
        setCircleDasharray();
        setRemainingPathColor(timeLeft);
        if (timeLeft === 0) {
          onTimesUp();
        }
      }, 1000);
      }
</script>


</body>
</html>

I got this error, and it has taken me more than 2 hours debugging, but I still can’t understand where the problem is, I know this question might be down voted for low quality but at this moment I really need another pair of eyes.

Here I have App.js and Index, the problem seems to be in router but I don’t know why, because everything is done according to this repo.

App in src/App.js

import React from 'react';
import { connect } from 'react-redux';
import { ConnectedRouter} from 'connected-react-router';

import routes from './routes';
import './styles/main.scss';


const App = ({ history }) => {
    return (
        <ConnectedRouter history={history}>
            { routes }
        </ConnectedRouter>
    );
};

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.auth.isAuthenticated,
        location: state.router.location.pathname,
    };
};

export default connect(mapStateToProps)(App);
export { App as AppNotConnected };

Routes in src/routes/index.js

import React from 'react';
import { Route, Switch } from 'react-router';
import { HomeView, LoginView, ProtectedView, NotFoundView, NavBar } from '../containers';
import requireAuthentication from '../utils/requireAuthentication';

const routes = (
    <div>
        <NavBar />
        <Switch>
            <Route exact path="/" component={HomeView} />
            <Route path="/login" component={LoginView} />
            <Route path="/protected" component={requireAuthentication(ProtectedView)} />
            <Route path="*" component={NotFoundView} />
        </Switch>
    </div>
);
export default routes;

I get this error

Uncaught TypeError: locationProp is undefined
The above error occurred in the <Router> component:
.
.
.

I have an array:

[
  {name: 'one', price: 100},
  {name: 'one', price: 100},
  {name: 'two', price: 200},
  {name: 'two', price: 200},
  {name: 'three', price: 300},
]

I want to take only duplicates objects. Like this:

[
  {name: 'one', price: 100},
  {name: 'one', price: 100},
  {name: 'two', price: 200},
  {name: 'two', price: 200},
]

How I can do this. Maybe lodash can help?

• Below is the configuration of our nuxt and nuxt-pwa configuration.
• Nuxt pwa is recognising a new version available and we prompt user to do a hard refresh/reload.
• And on reload – new UI also starts to work.
• However, if we open the site in a new tab. A spinner gets shown & the latest frontend fails to load. And again, a hard refresh is required.
  • our frontend redirects to /dashboard on visiting localhost:8080 by default and this is getting loaded from serviceworker with cached data.
  • Please help us resolve this since this has been a critical issue for us.

Spinner seen on new tab opening :

export default {
  ssr: false,
  target: 'static',
  head: {
    titleTemplate: '',
    title: 'NocoDB',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: './favicon-32.png' }
    ]
  },
  plugins: [
    // plugins
  ],
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/pwa'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    'vue-github-buttons/nuxt',
    '@nuxtjs/toast'
  ],
  axios: {
    baseURL: process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080')
  },
  router: {
    mode: 'hash',
    base: process.env.NODE_ENV === 'production' ? './' : '',
    middleware: ['auth']
  },
  vuetify: {
    defaultAssets: {
      icons: false
    },
    optionsPath: '@/config/vuetify.options.js',
    treeShake: true,
    customVariables: ['./config/variables.scss']
  },
  build: {
    parallel: true,
    plugins: [
      new MonacoEditorWebpackPlugin({
        languages: ['sql', 'json', 'javascript'],
        features: ['!gotoSymbol']
      })
    ],
    extend(config, { isDev, isClient }) {
      if (isDev) {
        config.devtool = isClient ? 'source-map' : 'inline-source-map'
      }

      config.externals = config.externals || {}
      config.externals['@microsoft/typescript-etw'] = 'FakeModule'
      return config
    }
  },
  pwa: {
    workbox: {
      assetsURLPattern: //_nuxt//,
      config: { debug: true }
    },

    icon: { 
      publicPath: './' 
    },
    manifest: {
      name: 'NocoDB',
      start_url: '../?standalone=true',
      theme_color: '#ffffff'
    }
  }
}

Lighthouse report :

Github issue reference : https://github.com/nuxt-community/pwa-module/issues/501

MySQL is connecting to a different unknown IP when trying to connect.
Code Below:

.env

MYSQL_HOST=db-star.mbcradio.net
MYSQL_USER=****
MYSQL_PASSWORD=****
MYSQL_DB=****
MYSQL_PORT=3306

connection.js

const mysql = require("mysql");

exports.pool = mysql.createPool({
  connectionLimit: 10,
  host: process.env.MYSQL_HOST,
  port: process.env.MYSQL_PORT,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DB,
});

controller/cron

pool.getConnection((err, connection) => {
        if (err) {
          console.log("ERROR: ", err);
        } else { ... insert data .... }
});

With this i’m getting error:

try connecting to remote mysql...
Error:  Error: ER_ACCESS_DENIED_ERROR: Access denied for user '****'@'112.200.198.66' (using password: YES)

Tested in MySQL Workbench and successfully connected. I’m just curious where the IP came from when the public IP of that domain is different. Also tried using the IP instead to connect and still giving me the same error.

I am using a cytoscape.js chart for showing data with nodes and edges. I know the cytoscape.js chart may encounter some performance issues while rendering a large number of data (like people collaboration chart). I am looking for any inbuilt function available to find the important nodes with their edges in the chart canvas and remove the other nodes and their relation. I think the cytoscape.js library doesn’t provide any straightforward method to achieve this.
Any help is much appreciated.

I’m trying to run a test on Sharepoint, but Cypress denies me that it’s an unauthorized approach. Has anyone addressed the issue of Cypress authorization? At the same time, I open the link with the address in the browser normally.

I am able to write test cases for electron.js POC code but their results are not reflecting on nyc code coverage results. As per my understanding, code coverage HTML results files should reflect the covered test cases, but it’s not happening. I have tried to find a solution on google, but no luck so far. I didn’t get much about the code coverage for electron code on google, Badly stuck with this task. I am desperately looking out for the solution. Hence, I thought to raise my doubt in this forum.

Any suggestion or input would be highly appreciated & great help to me! Thanks for reading .

**Github code link:**
https://github.com/sajid983356/pocElectronCodeCoverage

**main.js**

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.loadFile('index.html');
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

app.on('ready', createWindow);
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

ipcMain.on('greet-me', (event, args) => {
    console.log("step 1")
    event.sender.send('greeting', args + ' Jane');
});

**renderer.js**

const { ipcRenderer } = require('electron');

const greetButton = document.getElementById('greetButton');
const greetElement = document.getElementById('greet');

greetButton.addEventListener('click', () => {
    ipcRenderer.send('greet-me', 'Hello');
});

ipcRenderer.on('greeting', (event, args) => {
    greetElement.innerText = args;
});

**test/spec.js**

const electron = require('electron');
const Application = require('spectron').Application;
const expect = require('chai').expect;

describe('Spectorn example', function () {
    this.timeout(20000); //10 seconds
    global.app = null;

    //starts the application before all the test in this block
    before(() => {
        //create the electron app
        app = new Application({
            path: electron,
            args: ['.']
        });
        //start the electron app
        return app.start().then(() => {
            app.client.waitUntilWindowLoaded();
            app.browserWindow.show();
            return app;
        });
    });

    //stop th electron application after all the test
    after(() => {
        if (app && app.isRunning()) {
            return app.stop();
        }
    });

    it('should open the browserwindow', () => {
        return app.client
            .waitUntilWindowLoaded()
            .browserWindow.isVisible()
            .then(res => {
                console.log('visible: ', res);
                expect(res).to.be.equal(true);
            })
            .browserWindow.isFocused()
            .then(res => {
                console.log('isFocused: ', res);
                expect(res).to.be.equal(true);
            })
            .browserWindow.isMinimized()
            .then(res => {
                console.log('isMinimized: ', res);
                expect(res).to.be.equal(false);
            })
            .browserWindow.isDevToolsOpened()
            .then(res => {
                console.log('isDevToolsOpened: ', res);
                expect(res).to.be.equal(false);
            });
    });
    it('should open the browserwindow with correct size', () => {
        return app.client
            .waitUntilWindowLoaded()
            .browserWindow.getBounds()
            .then(res => {
                expect(res.width).to.be.equal(800);
                expect(res.height).to.be.equal(600);
            });
    });
    it('should communicate with main process and renderer process', async () => {
        const results = await app.client.waitUntilWindowLoaded();
        const text = await app.client.getText('#greet');
        expect(text).to.equal('');
        await app.client.click('#greetButton');
        const greetText = await app.client.getText('#greet');
        expect(greetText).to.equal('Hello Jane');
        return results;
    });
});

**package.json**

{
    "name": "electron-quick-start",
    "version": "1.0.0",
    "description": "A minimal Electron application",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "test": "mocha",
        "coverage": "nyc npm run test"
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
        "chai": "^4.2.0",
        "electron": "^3.0.4",
        "mocha": "^5.2.0",
        "spectron": "^5.0.0"
    },
    "dependencies": {
        "nyc": "^15.1.0"
    }
}

**index.html**

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing</title>
</head>

<body>
  <button id="greetButton">Greet Me</button>
  <p id="greet"></p>
  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</body>

</html>

**.nycrc.json**

{
    "all": true,
    "check-coverage": false,
    "branches": 100,
    "lines": 100,
    "functions": 85,
    "statements": 10,
    "report-dir": "./coverage",
    "reporter": [
        "cobertura",
        "html",
        "lcov",
        "text"
    ],
    "include": [
        "*.js"
    ]
}

**PFA for the references:**

I have the following snippet of code to make multiple api calls

var userdetails:any=[]
for(var i=0;i<userids.length;i++)
            {
                               userdetails.push(await this.getUserData(authToken,userid[i]))
            }

Implementation of get userdetails function is as follows

async getUserData(authtoken,userid) {
        return new Promise((resolve, reject) => {
        
            const url = `https://***********/***/users?id=userid`;
            const requestOptions = {
                url,
                method: 'GET',
                headers: {
                    'Authorization': authtoken,
                }
            };
            request(requestOptions, (err, response, body) => {
                let errorMessage = 'Error in getting data';
                if (err) {
                    
                    return reject(err);
                }

                if (!response) {
                    
                    return reject({
                        message: errorMessage
                    });
                }

                if (response.statusCode === 200) {
                    
                    try {
                        body = JSON.parse(body);
                    } catch (err) {
                        
                        reject({ message: errorMessage });
                    }
                    if (isArray(body)) {
                        let newArray: any = [];
                        body.forEach(element => {
                            newArray.push({         
                                userId:element["userId"],
                                username:element["username"],
                                
                            });
                        });
                        return resolve(newArray);
                    } else {
                        return resolve(body);
                    }
                }

                if (response.statusCode >= 400) {
                    return reject({
                        message: errorMessage
                    });
                }
            });
        });
    }

The above code works just fine and returns all the data. But there is a performance glitch in it and it is taking lot of time to return the data as the number of userid’s increase. I am already using async await approach. What can I do to tune the performance of this code?

I am publishing the bar chart using JSON data and AJAX. The chart does not appear although no error showed in console. I am confused what is the problem because I was able to build another chart using the same way. Is there anyone can give me some clue please?

This is my codes in HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting Started with Chart JS with www.chartjs3.com</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 70px;
        background: #1A1A1A;
        color: rgba(255, 26, 104, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartMenu">
      <p>WWW.CHARTJS3.COM (Chart JS 3.6.0)</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

    //Ajax Block
    const xmlhttp = new XMLHttpRequest(); //exchange data with a web server
    const url ='http://localhost/test/total.json'; 

    //send a request to a server
    xmlhttp.open('GET',url,true);
    xmlhttp.send();

    xmlhttp.onreadystatechange = function(){
        if(this.readyState ==4 && this.status == 200){ //is ready and connection is success
            
            var datapoints=JSON.parse(this.responseText); //parse:make data becomes readable in JavaScript 

            const male =datapoints.data.gender.male;
            const female = datapoints.data.gender.female;
            
            //setup 
            const data = {
            labels: ['male','female'],
            datasets: [{
                label: 'Male',
                data: male,
                backgroundColor: ['rgba(255, 26, 104, 0.2)'],
                borderColor: ['rgba(255, 26, 104, 1)'],
                borderWidth: 1
            }
            ,
            {
                label: 'Female',
                data:female,
                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 1
            }
            ]
            };

            // config 
            const config = {
            type: 'bar',
            data,
            options: {
                scales: {
                y: {
                    beginAtZero: true
                }
                }
            }
            };

            // render init block
            const myChart = new Chart(
            document.getElementById('myChart'),
            config
            );

        }
    }

    
    </script>

  </body>
</html>

This is the JSON file:

{
    "data": {
        "date": [
            "2021-11-01",
            "2021-12-31"
        ],
        "gender": {
            "male": 76,
            "female": 144
        },
        "glasses": {
            "true": 108,
            "false": 112
        },
        "beard": {
            "true": 40,
            "false": 180
        },
        "ageGroup": {
            "child": [],
            "adult": 162,
            "senior": 58
        }
    },
    "success": true,
    "message": ""
}

I have svg and img introduction before proceed to the main page. how I show this introduction only once? here is my code:

<div class="preload">
   <div class="intro">        
      <img src="svg/toreriha_text_animated.svg">
      <img class="bground" src="/img/background.png">
   </div>
</div>


<script type="text/javascript">
   setTimeout(function() {
   //After 9000 milliseconds, fade out the intro. The animation duration is 500 ms.
   $(".intro").fadeOut(500);
   }, 9000);
</script>

After playing around with nodeJs I have come back to my Craft CMS websites to work on other projects.

On executing “gulp dev”, I was met by this error

    Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/Users/michaelbutler/Sites/aleck-website/node_modules/gulp-sass/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/michaelbutler/Sites/aleck-website/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module._compile (/Users/michaelbutler/Sites/aleck-website/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.newLoader [as .js] (/Users/michaelbutler/Sites/aleck-website/node_modules/pirates/lib/index.js:104:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

In attempting to resolve this, I removed node_modules, package.lock, and ran npm install. I have also tried npm cache clean –force as seen here How to solve npm install error “npm ERR! code 1”.

This has led to the following error:

npm ERR! code 1
npm ERR! path /Users/michaelbutler/Sites/cardtwister-website/node_modules/favicons/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! TOUCH Release/obj.target/libvips-cpp.stamp
npm ERR!   CXX(target) Release/obj.target/sharp/src/common.o
npm ERR! info sharp Using cached /Users/michaelbutler/.npm/_libvips/libvips-8.8.1-darwin-x64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! (node:1501) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/michaelbutler/Sites/cardtwister-website/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/michaelbutler/Sites/cardtwister-website/node_modules/favicons/node_modules/sharp/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/michaelbutler/Sites/cardtwister-website/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/michaelbutler/.node-gyp/16.13.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/michaelbutler/.node-gyp/16.13.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/michaelbutler/Sites/cardtwister-website/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/michaelbutler/.node-gyp/16.13.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/michaelbutler/Sites/cardtwister-website/node_modules/favicons/node_modules/sharp',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/common.cc:22:
npm ERR! In file included from /Users/michaelbutler/.node-gyp/16.13.1/include/node/node.h:63:
npm ERR! In file included from /Users/michaelbutler/.node-gyp/16.13.1/include/node/v8.h:30:
npm ERR! /Users/michaelbutler/.node-gyp/16.13.1/include/node/v8-internal.h:492:38: error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?
npm ERR!             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!                                 ~~~~~^~~~~~~~~~~
npm ERR!                                      remove_cv
npm ERR! /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:710:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR!                                                  ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/sharp/src/common.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/michaelbutler/Sites/cardtwister-website/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/michaelbutler/Sites/cardtwister-website/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/michaelbutler/Sites/cardtwister-website/node_modules/favicons/node_modules/sharp
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/michaelbutler/.npm/_logs/2021-12-07T11_44_09_876Z-debug.log

Note, the errors are shown in example 1 and example 2 are in different repositories as this error is happening with every project, I thought it best to show the two different steps.

Not sure if these errors are related. From searching online, I found that the following part of the error

npm ERR! code 1

Is from a conflict with node versions. As I result, I have tried brew install node@14 to step down versions, but brew link did not seem to work / did not resolve this error.

Any advise would be greatly appreciated.

I have also tried reinstalling the packages one at a time, which didn’t prevent me from installing at any point, but seemed to give a bunch of random errors on running “gulp dev” that were unclear to me.

Here is my package.json, as this will likely be required

   {
  "name": "doodle-craft-puppy",
  "version": "0.1.0",
  "homepage": "https://[email protected]/doodledevelopers/doodle-craft-puppy.git",
  "repository": {
    "type": "git",
    "url": "https://[email protected]/doodledevelopers/doodle-craft-puppy.git"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers": [
              "last 2 versions",
              "Explorer 10"
            ]
          }
        }
      ]
    ]
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "es6": true
    },
    "parserOptions": {
      "sourceType": "module"
    }
  },
  "browserslist": [
    "last 1 version",
    "> 1%"
  ],
  "description": "Doodle's Project Scaffold for craft",
  "author": "doodle",
  "main": "gulpfile.js",
  "license": "MIT",
  "paths": {
    "src": {
      "scss": "./src/scss/**/*.scss",
      "images": "./src/images/",
      "fonts": "./src/fonts/*",
      "svgs": "./src/icons/svg/**/*.svg",
      "templates": "./templates/**/*.{html,twig}",
      "js": [
        "./src/js/app.js"
      ]
    },
    "build": {
      "base": "./web/",
      "css": "./web/build/css/",
      "images": "./web/build/images/",
      "fonts": "./web/build/fonts/",
      "svgs": "./web/build/icons/svg/",
      "js": "./web/build/js/"
    },
    "favicon": {
      "src": "./src/favicons/favicon.png",
      "dest": "./web/favicons/",
      "path": "/img/site/"
    },
    "craftConfig": "./config/"
  },
  "urls": {
    "live": "http://card-twister.com/",
    "local": "http://cardtwister-website:8888/"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.9",
    "@babel/register": "^7.14.5",
    "babel-eslint": "^10.1.0",
    "babelify": "^10.0.0",
    "barba.js": "^1.0.0",
    "body-scroll-lock": "^2.6.4",
    "browser-sync": "^2.27.5",
    "browserify": "^16.5.2",
    "browserslist": "^4.16.7",
    "del": "^4.1.1",
    "domready": "^1.0.8",
    "fancy-log": "^1.3.2",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-babel": "^8.0.0",
    "gulp-better-rollup": "^4.0.1",
    "gulp-cached": "^1.1.1",
    "gulp-cheerio": "^0.6.3",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-eslint": "^5.0.0",
    "gulp-favicons": "^2.4.0",
    "gulp-flatten": "^0.4.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^6.2.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-purgecss": "^1.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.1.3",
    "gulp-sass": "^4.1.1",
    "gulp-size": "^3.0.0",
    "gulp-sourcemaps": "^2.2.1",
    "gulp-svg-symbols": "^3.2.0",
    "gulp-svgstore": "^7.0.0",
    "gulp-tap": "1.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "regenerator-runtime": "^0.13.9",
    "smooth-scroll": "github:cferdinandi/smooth-scroll",
    "svgxuse": "^1.2.6",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "waypoints": "^4.0.1"
  },
  "dependencies": {
    "browser-update": "^3.3.30",
    "intersection-observer": "^0.7.0",
    "inuitcss": "^6.0.0",
    "jquery": "^3.6.0",
    "menuspy": "^1.3.0",
    "sass-rem": "^2.0.1",
    "sftp-sync-deploy": "^0.7.1",
    "vanilla-lazyload": "^16.1.0"
  }
}

I am drawing a table using a function after data is received from a GET request.
After I draw the table, I want to hold the scroll position relative to the previous table that was there before (all tables have overflow:auto;).

The way I overcome this problem is as follows:

1. listen to the scroll
2. store the scroll position in sessionStorage
3. After the new table is drawn, I use .scrolLeft = sessionStorage.getItem('PosY')

This works fine as it does what I want it to do, but I get the following from Chrome Dev.

[Violation] Forced reflow while executing JavaScript took 51ms

I understand why I get this from Chrome Dev. but I want to know if there is another way to do this that will not give me this [Violation]

I have looked into listening to the DOM and repositioning upon changes, but this gives the same [Violation]

Any suggestions would be much appreciated, especially if there is some simple CSS.

No jQuery OR other Libraries, please.

I have a parent component, that render one child component several time. This child component is used in many different components. I need to have an array in this child component that keeps all the previous renders of the component, then get access to the largest text passed to it.

import TextComponent from '../../text'
const ParentComponent = ()=>{
  // ... some code here and get some data from API
 const text = getTextFromAPI()
  return (
   <>
    <ARandomComponent/>
    <AnotherRandomComponent/>
    <TextComponent text={text}/>
  </>)
}

In the TextComponent I need to know what text each element received, and return the largest text. I thought maybe I can have an array inside TextComponent but of course with each render, component has fresh data and I know this is by design.

Is there any way to active this? To store a value in the TextComponent that other renders from different places still have access to that value

I am trying to utilise JS drag & drop in Blazor, which works fine in general but I want to set a custom drag image during the ondragstart event. In general my code looks like this:

<div class="some-draggable-container"
     draggable="true"
     ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)')" >
</div>

Element.dragStartHandler = function(event, imgSrcBase64) {
    var img = new Image();
    img.src = imgSrcBase64;
    event.dataTransfer.setDragImage(img, 0, 0);
}

The problem occurring to me is that I need to call a .Net function after setting the drag image and I cannot find a way to pass the needed DotNetObjectReference through to the JS part.

Simply passing the newly created objectRef into the JS event call leads to an Unexpected end of input error.

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(DotNetObjectReference.Create(this)))"

Also using the JsonSerializer does not do the trick. It surely does serialise the object and JS is able to deserialise it, but as expected the DotNet.invokeMethod() methods are not present.

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(JsonSerializer.Serialize(DotNetObjectReference.Create(this))))"

Utilising the Blazor event and handling it fully in .Net does not offer the ability to set the drag image because the passed DragEventArgs are not fully compliant to the JS one.

Passing the event args through IJSRuntime into a JS function leads to errors because it’s just not the same thing as the native JS event, so at least the setDragImage() Method is missing.

Is there any way to make this work? I don’t want to juggle around with JS-to-static-.Net calls and guids or that kind of workaround.