This is the first time attempting a pop-up calculator and using JavaScript in general. I know how I want the calculator to look, but I just can’t get it to appear on screen. How can I fix it?
Category: javascript
Category Added in a WPeMatico Campaign
Constantly sending data over flask to javascript in the front-end
I’m building a web app that tracks a bicyclists’ trips. Therefore, I need a constant transmission of lat/lng data to the javascript front-end to change the location of the marker on the map.
Would it be better to infinitely transfer this from the flask app-side or, is it possible to write a thread in javascript to do the same?
I have tried setting up multiprocessing on the python as mentioned in another answer, however, I need to return the value for the GET request (ajax) from the javascript side to work. For instance, this is one of my working get requests:
@app.route('/nearby')
def nearby():
return GeoHandler.nearbyPlaces(GeoHandler, geodata.latlng[0], geodata.latlng[1])
What would be the best approach to this problem?
creating a button as a trigger for a modal
I am a beginner in HTML and CSS and I have a working modal system using this code
<button class="modal-button" href="#myModal1">Open Modal</button>
<div id="myModal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">X</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
and this is my script for the modal
<script>// Get the modal
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
for (var i =0; i<btn.length; i++){
btn[i].onclick = function(e){
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for(var i = 0; i <spans.length; i++) {
spans[i].onclick = function(){
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals){
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}</script>
however I want to use this type of code <button id="connectButton"><img class="icon" src="images/mail.png"><h1>connect</h1></button> to replace the first line.
I have tried this fix that was suggested, however it is not working for me. Could anybody help?
Transfer BNB BEP20 Wallet Transfer using Web3
Ok, I know this question gets asks about 500 times. I’ve scanned through the answers already given and everything is always incomplete.
What I need to do is get the estimated gas price
Get the current nonce
Add 1 to the nonce
Transfer (n) amount of a BEP20 token on the BNB Smart Chain. I’ve tried about 500 variations and have finally diluted it to a pretty good piece of code. But for some reason my transactions get a hash, but just time out and never process. I think it might be the way I’m setting gas but I have no idea to be honest.
I’d really appreciate some input here so I can get this issue resolved once and for all.
var Web3 = require('web3')
var Tx = require("ethereumjs-tx").Transaction
const Common = require('ethereumjs-common');
const BSCNode = 'https://mybnbnode/somewhere_over_the_rainbox';
const _DemoWallet_ = '0xDeBCBca7f21aB70DA4e7860a112FEB3d8Fd04db5';
const _PrivateKey_ = "mydaalongassdf9privatekey9de5d32thatcouldbeanythingfbutitshere";
const _ContractAddress_ = '0xe63c37e50A045c247b5003e24bA066f1cc3f0Ff3'; //joyg;
const web3 = new Web3(new Web3.providers.HttpProvider(BSCNode));
const sendTransfer = async(id, to_wallet, to_amount) => {
console.log('in send transfer');
console.log(id);
console.log(to_wallet);
console.log(to_amount);
console.log(`web3 version: ${web3.version}`)
var contractAddress = _ContractAddress_;
var senderWalletAddress = _DemoWallet_;
var senderWalletKey = _PrivateKey_;
var receiverWalletAddress = to_wallet;
var contract = new web3.eth.Contract(_ContractABI_, contractAddress, {
from: senderWalletAddress
});
web3.eth.accounts.wallet.add(senderWalletKey);
//this usually return a number like 36423
contract.methods.transfer(receiverWalletAddress, to_amount).estimateGas({
gas: 5000000
}, function(error, gasAmount) {
console.log('estimated gas amount ');
console.log(gasAmount);
});
web3.eth.getTransactionCount(senderWalletAddress, 'pending')
.then(async function(currentNonce) {
console.log('currrent nonce is');
console.log(currentNonce);
currentNonce++;
console.log("processing : " + id + " : " + to_wallet + " : " + to_amount)
let myReceipt = await contract.methods.transfer(receiverWalletAddress, to_amount).send({
gas: web3.utils.toHex(5000000), //hardcoded this because not sure to do with estimated gas
nonce: currentNonce
});
//YOu want transaction hash out of this result
console.log(myReceipt);
});
};
sendTransfer(3, "0xsomewalletaddress", "1525323");
/* Moved down here to keep out of demo */
const _ContractABI_ = JSON.parse('[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"spender","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"spender","type":"address"}],"name":"allowance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"approve","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"decimals","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"subtractedValue","type":"uint256"}],"name":"decreaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"getunlockedAfter","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"addedValue","type":"uint256"}],"name":"increaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"lockedPeriodOver","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transfer","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"sender","type":"address"},{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transferFrom","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"withdrawLockedTokens","outputs":[],"stateMutability":"nonpayable","type":"function"},{"stateMutability":"payable","type":"receive"}]');how to use bootstrap 5.3 popover properly?
I’m trying to create web with bunch of popover, let’s say:
<a tabindex="0" data-bs-toggle="popover">popover 1</a>
<a tabindex="0" data-bs-toggle="popover">popover 2</a>
And the content is:
<div id="content1" class="bs-none">
<p>very long content for popover1</p>
</div>
<div id="content2" class="bs-none">
<p>very long content for popover2</p>
</div>
The question is, how to create those popover show it’s own content with minimum script?
the target want to achieve is to activate popover same or different content with minimum script
Chrome – Strange behavior of the console, when debugging Leaflet app
The issue is this one: I’m getting different results at the Chorme’s console when first loading the page with my Leaflet app code, and when I make a refresh.
At the first load, the console looks like this:
But in subsequent refreshes, it looks like this:
You can notice that in the first image, the object shown at line 309, has differents ID numbers compared to the second one (shows the content of a LayerGroup object, which has its own ‘_leaflet_id’, and references to the ‘_leaflet_id’s of its child layers).
Also, in the first image, it shows only the texts ‘Object’, ‘M’ and ‘e’ in the objects log, when collapsed. While in the second one, when collapsed, shows some of the object’s content.
Some idea of what’s going on?
The whole code is this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="dSbDglIEK68iKVvD7JZexJ4CRPD65Ay5aIJ1GwxV">
<title>Laravel</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Scripts -->
<!-- Styles -->
<link href="app.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<style>
/* Definimos la altura minima del mapa */
#mapid { min-height: 500px; }
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="http://localhost:8000">
Laravel
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="https://github.com/nafiesl/laravel-leaflet-example" class="btn btn-outline-primary btn-sm" target="_blank">Source code</a></li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
<li class="nav-item"><a class="nav-link" href="http://localhost:8000/our_outlets">Our Outlets</a></li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8000/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8000/register">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="py-4 container">
<div class="card">
<div class="card-body" id="mapid"></div>
</div>
</main>
<footer class="text-center fixed-bottom mb-2">
The source code of this project is available on <a href="https://github.com/nafiesl/laravel-leaflet-example" target="_blank">github</a>.
</footer>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script>
//Defino un objeto GeoJSON, que será parseado luego con los métodos de Leaflet.
//En una aplicación mas compleja, obtendremos este objeto desde una API.
//Sin embargo, para propósitos de prueba, lo definimos aquí directamente en nuestro documento.
var GeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 1,
"name": "Prueba",
"address": "Casa de Lean",
"latitude": "-3.330076616628",
"longitude": "114.65040206909",
"creator_id": 1,
"created_at": "2023-03-15T00:49:43.000000Z",
"updated_at": "2023-03-15T00:49:43.000000Z",
"coordinate": "-3.330076616628, 114.65040206909",
"map_popup_content": "<div class="my-2"><strong>Outlet Name:</strong><br><a href="http://localhost:8000/outlets/1" title="View Prueba Outlet detail">Prueba</a></div><div class="my-2"><strong>Coordinate:</strong><br>-3.330076616628, 114.65040206909</div>"
},
"geometry": {
"type": "Point",
"coordinates": [
"114.65040206909",
"-3.330076616628"
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"name": "Casa de Gaby",
"address": "Liniers 557, Lomas del Mirador",
"latitude": "-34.66036884245",
"longitude": "-58.52985620498",
"creator_id": 1,
"created_at": "2023-03-15T02:14:02.000000Z",
"updated_at": "2023-03-15T02:29:23.000000Z",
"coordinate": "-34.66036884245, -58.52985620498",
"map_popup_content": "<div class="my-2"><strong>Outlet Name:</strong><br><a href="http://localhost:8000/outlets/2" title="View Casa de Gaby Outlet detail">Casa de Gaby</a></div><div class="my-2"><strong>Coordinate:</strong><br>-34.66036884245, -58.52985620498</div>"
},
"geometry": {
"type": "Point",
"coordinates": [
"-58.52985620498",
"-34.66036884245"
]
}
}
]
};
//Declaro una variable 'map' que contendrá el mapa instanciado por Leaflet.
var map =
//Uso el objeto 'L' (de Leaflet), que contiene el método 'map', al cual le paso 'mapid',
//correspondiente al atributo 'id' del <div> que lo contiene. Me instancia un objeto de tipo mapa.
L.map('mapid')
//Este método 'setView', encadenado a 'map', lo utilizamos para centrar la vista predeterminada del mapa.
.setView(
//En este caso, le pasamos un array con dos números, obtenidos de 'config/leaflet.php',
//con las coordenadas donde queremos que se inicialize.
[-34.61315,-58.37723],
//Como segundo parámetro, desde el mismo archivo, le pasamos un número con el nivel de zoom que queremos.
13
);
//Ahora tenemos un mapa navegable en el <div> correspondiente, pero sin ninguna visualización (todo gris).
//Debemos agregarle una capa correspondiente, para poder visualizar un mapa desde alguna plataforma.
//En este caso, será la de OpenstreetMap.
//Lo hacemos con el método 'L.tileLayer'.
//Le pasámos dos parámetros: un string y un objeto JSON con una sola propiedad (que contiene también un string).
//Solo con propósitos de debug, nos guardamos el resultado de 'L.tileLayer' en una variable 'tile'
var tile = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
)
//Aquí, encadenando el método 'addTo' al método 'L.tileLayer' a le agregamos la capa generada por el mismo
//al mapa instanciado previamente, referenciado por la variable 'map'.
.addTo(map);
var layer_cop;
//Podría no haber utilizado el encadenamiento con 'addTo' y en cambio utilizar la sentencia:
//map.addLayer(tile);
//O bien:
//tile.addTo(map);
//Con el mismo resultado
//¡Ojo! Esta linea no utiliza un método nativo de Leaflet, sinó que utiliza el plugin 'Leaflet.markercluster'.
//Me instancia un grupo de marcadores
var markers = L.markerClusterGroup();
//En 'capa_marcadores', nos guardaremos lo que nos devuelva el método 'L.geoJSON'
//Este método nos devolverá una capa GeoJSON, que es un objeto de tipo Layer,
//apropiado para utilizar como capa en un mapa Leaflet.
//Dicho objeto contendrá métodos en algunos de sus atributos,
//y probablemente, referencias circulares en algunos otros.
//Por lo tanto, NO se podrá codificar como un objeto JSON.
var capa_marcadores =
//Llamamos al método 'L.geoJSON' con dos parámetros:
//-El objeto GeoJSON que nos devolvió la API
//-Un objeto JavaScript, que contendrá las opciones en base a las cuales generará la capa.
L.geoJSON(
//Aquí le pasamos al método 'L.geoJSON', como primer parámetro,
//el objeto GeoJSON devuelto por la API.
//De esta forma, este método utilizará este objeto GeoJSON para obtener la información
//a partir de la cual genera los elementos incluidos en la capa:
GeoJSON
,
//Aquí le pasamos al método 'L.geoJSON', como segundo parámetro, un objeto JavaScript,
//en el cual incluiremos las opciones con las cuales queremos generar nuestra capa GeoJSON.
//Podríamos tener muchas opciones codificadas aquí. En este caso, solo usamos 'pointToLayer'
{
//Dentro del objeto de opciones, definimos el atributo 'pointToLayer'.
//Éste contendrá un método, que define la forma como que los puntos del objeto GeoJSON,
//generan los elementos de la capa de Leaflet. Por defecto, generan marcadores.
//En este caso, lo utilizamos para generar también marcadores, pero con un Popup asociado.
pointToLayer:
//Al definir la función correspondiente al método 'pointToLayer' desde este lugar
//con los parámetros 'geoJsonPoint' y 'latlng', los mismos adoptatán valores obtenidos
//a partir de el objeto GeoJSON que devolvió la API, el cual le habíamos pasado
//como primer parámetro al método 'L.geoJSON' (como 'response.data').
//Esta función se ejecutará tantas veces como la cantidad de elementos en el
//array 'features', tengamos en el objeto GeoJSON devuelto por la API,
//el cual fue pasado como primer parámetro a 'L.geoJSON'.
function(geoJsonPoint, latlng) {
//'geoJsonPoint', adoptará el valor de cada objeto correspondiente
//a cada elemento del array 'features' del objeto GeoJSON, de forma íntegra.
//Cada vez que se ejecute este método, este parámetro adoptará
//el valor de un elemento de dicho array ("Feature") diferente,
//hasta haberlo hecho con cada elemento existente en el.
console.log(geoJsonPoint);
//'latlng', contendrá un objeto con con solo dos propiedades: 'lat' y 'lng'.
//Dichas propiedades, contendrán la latitud y longitud, en forma de números,
//de cada punto en cada elemento del array 'features' en el objeto GeoJSON.
//Se descarta aquí, el resto de la información de cada "Feature".
console.log(latlng);
//En este 'return', establecemos como será el formato en el que se genera
//las capa de Leafleat, a partir de los puntos definidos en el objeto GeoJSON.
//En este caso, estos se encuentran representados por su latitud y longitud,
//contenidos en el parámetro 'latlng'.
//La capa se generará en forma de marcadores, los cuales tendrán un Popup asociado.
var prueba=L.marker(latlng);
var prueba_cop=structuredClone(prueba);
console.log("Contenido de 'prueba':");
console.log(prueba);
prueba.ejemplo="Saraza";
console.log("Contenido de 'prueba_cop':");
console.log(prueba_cop);
console.log("Valor devuelto por 'L.marker(latlng)':");
console.log(L.marker(latlng));
//Para ello, utilizamos el método 'L.marker', al cual le encadenaremos el método
//'bindPopup'.
//A 'L.marker', le pasamos el parámetro 'latlng', descripto mas arriba.
//Esta línea se ejecuta
//prueba.bindPopup("Hola");
const callbackBind= function (layer) {
//layer_cop={...layer};
console.log("Contenido de 'layer':");
console.log(layer);
console.log(prueba);
console.log(prueba==layer);
//console.log(prueba);
//console.log(layer.feature.properties.map_popup_content);
//return "Hola";
return layer.feature.properties.map_popup_content;
};
return prueba.bindPopup(callbackBind);
return prueba;
/*
prueba.bindPopup(
function (layer) {
//var layer_cop={...layer};
console.log("Contenido de 'layer':");
console.log(layer);
//console.log("Contenido de 'layer_cop':");
//console.log(layer_cop);
console.log(layer.feature.properties.map_popup_content);
return layer.feature.properties.map_popup_content;
}
);
*/
/*
return L.marker(latlng)
//Al método 'bindPopup', que encadenamos luego del método 'marker', le
//pasamos una función callback como argumento, para asociar un Popup a cada
//marcador.
.bindPopup(
function (layer) {
console.log("Contenido de 'layer':");
console.log(layer);
console.log("Contenido de 'map' y 'tile':");
console.log(map);
console.log(tile);
return layer.feature.properties.map_popup_content;
}
);
*/
}
}
);
console.log("Contenido de marker y markers:");
console.log(capa_marcadores);
markers.addLayer(capa_marcadores);
console.log(markers);
//Podríamos tener, directamente:
//map.addLayer(capa_marcadores);
//Si dentro del 'then' del 'axios.get', hubieramos hecho
//'map.addLayer(marker);' en vez de 'markers.addLayer(marker);',
//no necesitaríamos la siguiente línea (nos saltearíamos una capa en la jerarquía):
map.addLayer(markers);
</script>
</body>
</html>
Thanks a lot!
Leandro
How should I use web components inside web components?
I’m trying to figure out how to use a web component inside another web component (both of which inherit from the same base class.
The problem seems to be in the way I’m creating the shadow dom:
import BaseElement from "./base.js";
class PopupHeader extends BaseElement {
constructor() {
super();
}
async render(initial = false) {
this.shadowRoot.innerHTML = `
<header>
<a href="https://example.com" id="logo" target="_blank"><img src="assets/logo.svg" alt="logo" /></a>
</header>
`;
}
async connectedCallback() {
await this.render(true);
}
}
customElements.define("popup-header", PopupHeader);
export default PopupHeader;
And base.js:
export default class BaseElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
and main-app.js:
import BaseElement from "./base.js";
class EasyApplier extends BaseElement {
constructor() {
super();
this.render = this.render.bind(this);
}
async render(initial = false) {
this.shadowRoot.innerHTML = `
<div id="${this.ns}">
<popup-header></popup-header>
Import profiles: <input type="file" id="json-file-input" accept="application/json" />
</div>
`;
}
...
}
The issue is the header is only shown, not the rest of the main components html.
I suspect it has to do with this.shadowRoot being overridden, is there a way to avoid this?
Can’t connect my Reactjs programm with database
Running my Reacts program gives me this error:Compiled with problems:
ERROR in ./node_modules/hfsql/dist/index.js 6:11-26
Module not found: Error: Cannot find file: ‘odbc.js’ does not match the corresponding name on disk: ‘.node_moduleshfsqlnode_modulesOdbclibodbc’.
enter image description here
Code:
Firebase change.type === “added” returns existing collection
I am trying to only listen to documents that where only added to the collection. However if i exit node and run the js file again it will return the entire collection an not the newly created one. How can i return just the newly created document.
Below is my code any help would be highly appreciated.
const db = getFirestore();
const doc = db.collection("orders");
const observer = db.collection("orders").onSnapshot((querySnapshot) => {
querySnapshot.docChanges().forEach((change) => {
if (change.type === "added") {
console.log(change.doc.data());
}
});
});
How to code &emdash UTF in JavaScript [] regular expressions?
HTML’s &emdash; in UTF is — and hex is seen to be 1EFBBBFE280941. How can it be encoded into a regular expression /[ ]/ compare? (An “if this, then that”) type of comparison? The above would just be several ASCII characters, but how to encode it in a regular expression to be just one character?
Is the concept even possible?
Highcharts MVC Display issue
So I had my charts working on my page load. But it was super slow because I was loading every chart before the page displayed.
I attempted to switch them to ajax calls. The page loads much faster but for some reason the charts will not display.
<div data-ajax="true" data-url="@Url.Action(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK })"></div>
@{Html.RenderAction(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK });}
The top one is the new ajax call using data-attributes. IT hits every function the exact same way. No errors and yet it will just display blank
here is what displays on the actual page.
<div data-ajax="true" data-url="/Home/PortfolioAssetClassNavPercent?clientPortalDataSetID=22&currencyID=11" data-loaded="true"><div id="hc_ef1ec1e3c33f4259863c62db7dc9705c_container"></div><script type="text/javascript">
var hc_ef1ec1e3c33f4259863c62db7dc9705c;
$(document).ready(function() {
var colors_hc_ef1ec1e3c33f4259863c62db7dc9705c = Highcharts.getOptions().colors;
var name_hc_ef1ec1e3c33f4259863c62db7dc9705c = 'NAV % by Asset Class';
var categories_hc_ef1ec1e3c33f4259863c62db7dc9705c = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
var data_hc_ef1ec1e3c33f4259863c62db7dc9705c = { data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }] };
hc_ef1ec1e3c33f4259863c62db7dc9705c = new Highcharts.Chart({
chart: { renderTo:'hc_ef1ec1e3c33f4259863c62db7dc9705c_container', defaultSeriesType: 'waterfall', height: 300 },
credits: { enabled: false },
plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_ef1ec1e3c33f4259863c62db7dc9705c[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_ef1ec1e3c33f4259863c62db7dc9705c } } } },
title: { text: '' },
tooltip: { formatter: function() { return this.points.reduce(function(s, point){return s + '<br/>' +FormatPercent(point.y);}, '<b>' + this.x + '</b>');}, shared: true },
xAxis: { categories: ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'] },
yAxis: { allowDecimals: true, max: 100, min: 0, title: { text: 'Percentage %' } },
series: [{ data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }], name: 'Investment Structures', color: 'white' }]
});
function CPC_hc_ef1ec1e3c33f4259863c62db7dc9705c(){
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
} else { // restore
setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(name_hc_ef1ec1e3c33f4259863c62db7dc9705c, categories_hc_ef1ec1e3c33f4259863c62db7dc9705c, data_hc_ef1ec1e3c33f4259863c62db7dc9705c.data);
}
}
function setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(name, categories, data, color){
hc_ef1ec1e3c33f4259863c62db7dc9705c.xAxis[0].setCategories(categories);hc_ef1ec1e3c33f4259863c62db7dc9705c.series[0].remove();hc_ef1ec1e3c33f4259863c62db7dc9705c.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
</script>
</div>
seems like using the ajax call does not load the container used for highcharts I really am not sure why since its hitting all the same code.
Here is what displays for the non ajax call that displays.
<div class="card-block">
<div data-ajax="true" data-url="/Home/PortfolioAssetClassNavPercent?clientPortalDataSetID=22&currencyID=11" data-loaded="true"><div id="hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37_container"></div><script type="text/javascript">
var hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37;
$(document).ready(function() {
var colors_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = Highcharts.getOptions().colors;
var name_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = 'NAV % by Asset Class';
var categories_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
var data_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = { data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }] };
hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = new Highcharts.Chart({
chart: { renderTo:'hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37_container', defaultSeriesType: 'waterfall', height: 300 },
credits: { enabled: false },
plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 } } } },
title: { text: '' },
tooltip: { formatter: function() { return this.points.reduce(function(s, point){return s + '<br/>' +FormatPercent(point.y);}, '<b>' + this.x + '</b>');}, shared: true },
xAxis: { categories: ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'] },
yAxis: { allowDecimals: true, max: 100, min: 0, title: { text: 'Percentage %' } },
series: [{ data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }], name: 'Investment Structures', color: 'white' }]
});
function CPC_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(){
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
} else { // restore
setChart_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(name_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37, categories_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37, data_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37.data);
}
}
function setChart_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(name, categories, data, color){
hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37.xAxis[0].setCategories(categories);hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37.series[0].remove();hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
</script>
</div>
<div id="hc_c8de0c6c51f8491d8e243951c9ed9c91_container" data-highcharts-chart="0" style="overflow: hidden;"><div id="highcharts-1cj32ee-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 1262px; height: 300px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1262" height="300" viewBox="0 0 1262 300"><desc>Created with Highcharts 7.1.2</desc><defs><clipPath id="highcharts-1cj32ee-1-"><rect x="0" y="0" width="1178" height="212" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="1262" height="300" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="74" y="10" width="1178" height="212"></rect><g class="highcharts-pane-group" data-z-index="0"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 180.5 10 L 180.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 287.5 10 L 287.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 394.5 10 L 394.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 501.5 10 L 501.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 608.5 10 L 608.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 716.5 10 L 716.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 823.5 10 L 823.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 930.5 10 L 930.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1037.5 10 L 1037.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1144.5 10 L 1144.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1251.5 10 L 1251.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 73.5 10 L 73.5 222" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 222.5 L 1252 222.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 169.5 L 1252 169.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 116.5 L 1252 116.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 63.5 L 1252 63.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 9.5 L 1252 9.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="74" y="10" width="1178" height="212"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 74 222.5 L 1252 222.5"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><text x="26.0888671875" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 26.0888671875 116)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="116"><tspan>Percentage %</tspan></text><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 74 10 L 74 222"></path></g><g class="highcharts-series-group" data-z-index="3"><g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-waterfall-series highcharts-tracker " transform="translate(74,10) scale(1 1)" clip-path="url(#highcharts-1cj32ee-1-)"><rect x="27.5" y="167.5" width="52" height="44" fill="#145783" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="134.5" y="124.5" width="52" height="44" fill="#D59F20" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="241.5" y="80.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="348.5" y="36.5" width="52" height="44" fill="#145783" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="455.5" y="-6.5" width="52" height="44" fill="rgb(90,111,94)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="562.5" y="-50.5" width="52" height="44" fill="rgb(236,107,29)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="669.5" y="-94.5" width="52" height="44" fill="rgb(175,181,117)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="776.5" y="-138.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="884.5" y="-181.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="991.5" y="-225.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="1098.5" y="-269.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><path fill="none" d="M 79.5 167.5 L 134.5 167.5 M 186.5 124.5 L 241.5 124.5 M 293.5 80.5 L 348.5 80.5 M 400.5 36.5 L 455.5 36.5 M 507.5 -6.5 L 562.5 -6.5 M 614.5 -50.5 L 669.5 -50.5 M 721.5 -94.5 L 776.5 -94.5 M 828.5 -138.5 L 884.5 -138.5 M 936.5 -181.5 L 991.5 -181.5 M 1043.5 -225.5 L 1098.5 -225.5" class="highcharts-graph" data-z-index="1" stroke="#333333" stroke-width="1" stroke-dasharray="1,3"></path></g><g data-z-index="0.1" class="highcharts-markers highcharts-series-0 highcharts-waterfall-series " transform="translate(74,10) scale(1 1)" clip-path="none"></g></g><text x="631" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"></text><text x="631" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="24"></text><g class="highcharts-legend" data-z-index="7" transform="translate(548,256)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="166" height="29" visibility="visible"></rect><g data-z-index="1"><g><g class="highcharts-legend-item highcharts-waterfall-series highcharts-color-undefined highcharts-series-0" data-z-index="1" transform="translate(8,3)"><text x="21" style="color:#333333;cursor:pointer;font-size:12px;font-weight:bold;fill:#333333;" text-anchor="start" data-z-index="2" y="15"><tspan>Investment Structures</tspan></text><rect x="2" y="4" width="12" height="12" fill="white" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"><text x="127.54545454545546" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1">Debt</text><text x="234.63636363636545" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="341.7272727272754" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="448.81818181818545" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="555.9090909090955" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="662.9999999999955" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="770.0909090909055" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="877.1818181818155" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="984.2727272727454" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="1091.3636363636456" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="1198.4545454545455" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="226" opacity="1">0</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="173" opacity="1">25</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="120" opacity="1">50</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="67" opacity="1">75</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="14" opacity="1">100</text></g><g class="highcharts-label highcharts-tooltip highcharts-color-undefined" style="pointer-events:none;white-space:nowrap;" data-z-index="8" transform="translate(515,-9999)" opacity="0" visibility="visible"><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#5A6F5E" stroke-width="1"></path><text x="8" data-z-index="1" style="font-size:12px;color:#333333;cursor:default;fill:#333333;" y="20"><tspan style="font-weight:bold">Real Estate</tspan><tspan x="8" dy="15">20.61%</tspan></text></g></svg></div></div><script type="text/javascript">
var hc_c8de0c6c51f8491d8e243951c9ed9c91;
$(document).ready(function() {
var colors_hc_c8de0c6c51f8491d8e243951c9ed9c91 = Highcharts.getOptions().colors;
var name_hc_c8de0c6c51f8491d8e243951c9ed9c91 = 'NAV % by Asset Class';
var categories_hc_c8de0c6c51f8491d8e243951c9ed9c91 = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
var data_hc_c8de0c6c51f8491d8e243951c9ed9c91 = { data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }] };
hc_c8de0c6c51f8491d8e243951c9ed9c91 = new Highcharts.Chart({
chart: { renderTo:'hc_c8de0c6c51f8491d8e243951c9ed9c91_container', defaultSeriesType: 'waterfall', height: 300 },
credits: { enabled: false },
plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_c8de0c6c51f8491d8e243951c9ed9c91[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_c8de0c6c51f8491d8e243951c9ed9c91 } } } },
title: { text: '' },
tooltip: { formatter: function() { return this.points.reduce(function(s, point){return s + '<br/>' +FormatPercent(point.y);}, '<b>' + this.x + '</b>');}, shared: true },
xAxis: { categories: ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'] },
yAxis: { allowDecimals: true, max: 100, min: 0, title: { text: 'Percentage %' } },
series: [{ data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }], name: 'Investment Structures', color: 'white' }]
});
function CPC_hc_c8de0c6c51f8491d8e243951c9ed9c91(){
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart_hc_c8de0c6c51f8491d8e243951c9ed9c91(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
} else { // restore
setChart_hc_c8de0c6c51f8491d8e243951c9ed9c91(name_hc_c8de0c6c51f8491d8e243951c9ed9c91, categories_hc_c8de0c6c51f8491d8e243951c9ed9c91, data_hc_c8de0c6c51f8491d8e243951c9ed9c91.data);
}
}
function setChart_hc_c8de0c6c51f8491d8e243951c9ed9c91(name, categories, data, color){
hc_c8de0c6c51f8491d8e243951c9ed9c91.xAxis[0].setCategories(categories);hc_c8de0c6c51f8491d8e243951c9ed9c91.series[0].remove();hc_c8de0c6c51f8491d8e243951c9ed9c91.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
</script>
</div>
Any reason why the container would not be created?
SlashCommandBuilder is not a constuctor
const { SlashCommandBuilder} = require('discord.js');
module.exports = {
data: new SlashCommandBuilder()
.setName('smurf')
.setDescription('Show time until smurf. 5 Minute warning will be executed as well.')
.addStringOption(option =>
option
.setName('points')
.setDescription('Points to win. Ex: 145,000')
.setRequired(true))
.addStringOption(option =>
option
.setName('current-score')
.setDescription('Current score. Ex: 50,000')
.setRequired(true))
.addStringOption(option =>
option
.setName('point-gain')
.setDescription('Point gain. Ex: 30')
.setRequired(true))
};
module.exports = {
async execute(interaction) {
const points = interaction.options.getString('points');
const cScore = interaction.options.getString('current-score');
const pGain = interaction.options.getString('point-gain');
},
};
That’s my code. I don’t know why it keeps saying it’s not a constuctor when I did everything right (according to the discordjs guide) I’m on v13 though. Would that make a difference?
I made SlashCommandBuilder an uppercase B and it still didn’t work. I don’t know why.
Check box not responding to click in react
I have a simple react component that has a check box i want to toggle the value for on a click, it seems like it completely ignores my click I cant even get a console log. No idea why this doesnt work
export const InputCheckbox: InputCheckboxComponent = ({ id, checked = false, disabled, onChange }) => {
const { current: inputId } = useRef(`RampInputCheckbox-${id}`)
const handleClick = () => console.log('click');
return (
<div className="RampInputCheckbox--container" data-testid={inputId}>
<label
className={classNames("RampInputCheckbox--label", {
"RampInputCheckbox--label-checked": checked,
"RampInputCheckbox--label-disabled": disabled,
})}
/>
<input
id={inputId}
type="checkbox"
className="RampInputCheckbox--input"
onChange={handleClick}
/>
</div>
)
}
I’ve tried changing to onClick and I noticed the component isn’t re-rendering on the click
Using JavaScript, is it possible to reset a timer’s countdown on button click or keypress
I’m trying to make a timer-based document that resets .it’s countdown anytime I click the mouse or press a button on my keyboard. Due to my relative lack of knowledge in JavaScript however, I don’t know what the next step is after making the timer
I’m pretty sure what I need to use is onkeyup and onmouseup events, but I’m unsure where to put them or what to add to them. Here’s the code for the timer.
let mins = document.getElementById("minutes");
let secs = document.getElementById("seconds");
let display = document.getElementById("display");
let start = document.getElementById("start");
let timer;
function displaymin() {
display.innerHTML =
(minutes.value > 9 ? minutes.value : "0" + minutes.value) +
":" +
(seconds.value > 9 ? seconds.value : "0" + seconds.value);
}
function watch() {
start.disabled = true;
mins.disabled = true;
secs.disabled = true;
var date1 = new Date();
var countDownDate = new Date();
countDownDate.setTime(
date1.getTime() +
minutes.value * 60 * 1000 +
seconds.value * 1000 +
1 * 1000
);
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
display.innerHTML =
(minutes > 9 ? minutes : "0" + minutes) +
":" +
(seconds > 9 ? seconds : "0" + seconds);
var audio = new Audio("alarm.mp3");
if (display.innerHTML == "00:00") {
clearInterval(x);
audio.play()
}
}, 1000);
}<div oninput="displaymin()">
<input type="number" id="minutes" min="0" max="59" placeholder="mins" /> :
<input type="number" id="seconds" min="0" max="59" placeholder="secs" />
</div>
<div id="display"></div>
<div>
<button id="start" onclick="watch()">Start</button>
</div>why i get bigGroup variable as an object instead of an array in this nodejs javascript code?
router.post("/biggroups", async (req, res) => {
var MgroupName = req.body.bigGroup001; //MG01 or MG02 or MG03 //type: string
var bigGroup = new Array();
switch(MgroupName){
case 'MG01':
bigGroup = ['G001'];
break
case 'MG02':
bigGroup = ['G001', 'G002'];
break
case 'MG03':
bigGroup = ['G001', 'G002', 'G003'];
break
}
console.log(bigGroup); // for ex: [ 'G001', 'G002', 'G003' ]
//console.log(bigGroup.lenght); // undefined cause it is object not array !!!
console.log(typeof(bigGroup)); // object not array !!!
}