I try to make a upload/download services of files for my website, and i’m trying to use the object storage from openstack. The thing is, i have no problem doing it via php and openstack php sdk, but when i’m trying to do it via some javascript, i can’t find a good sdk or methods.
I’m not using node, I have a php server, and a javascript client. I would like to uploads or download files directly from the javascript client. I don’t want the file to transfer through the php server. I managed to create openstack tokens with the php sdk, maybe i could send those to the javascript so then they can authenticate? It’s been one week of searching with no solutions…
Category: javascript
Category Added in a WPeMatico Campaign
Force cache invalidation in Instagram web viewer
I have a website that is constantly updated because it has a feed streaming live data. However, no matter how hard I try, the page continues using an old javascript bundle that renders the website, and also, inside the Webpack, I’m generating JS files using a hash to distinguish from older versions.
chunkFilename: '[name].[chunkhash].js'
It only happens in Instagram web viewer. I’m also using Loadable to code split, it’s a React Hooks project, and in a common browser, like Chrome, Safari, Firefox, it’s working properly, the problem is with the Instagram web viewer. Does anyone have this problem and already solved it?
Cannot load any javascript file [closed]
`
// VARIABLES
let guessInput = document.getElementById("guess-input").value;
let guessValue = document.getElementById("guess-btn");
// RANDOM
let randomValue = Math.floor(Math.random() * 11);
console.log(randomValue);
// GUESSES
let guesses = 3;
// ADD EVENT LISTENER
guessValue.addEventListener("click", main());
function main() {
while (guesses != 0 || guessInput == randomValue) {
if (guessInput == randomValue) {
} else {
document.getElementById("guess-input").style.border = "solid 5px red";
}
}
}When I add javascript file to my HTML file it won’t load it will just keep loading and nothing will happen. I tried everything I know but nothing works. Websites form internet works perfectly. I can inlcude javascript file, but the thing is that no matter what I try to load from my previous works nothing loads with javascript linked. The problem is I can’t load any javascript from my computer
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"
/>
<title>Number Guesser</title>
</head>
<body>
<div class="container">
<h1>Number Guesser</h1>
<div id="game">
<p>
Guess a number between <span class="min-num">0</span> and
<span class="max-num">10</span>
</p>
<input
type="number"
id="guess-input"
placeholder="Enter your guess..."
/>
<input type="submit" value="Submit" id="guess-btn" />
<p class="message"></p>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Check role claims and show elements if true
I am writting an app with angular on front + asp.net on backend. I have 2 roles: user and admin. There are a few buttons on my navbar that I want to hide from user role. My function for checking if currently logged user role is admin:
public isUserAdmin = (): boolean => {
var token = localStorage.getItem("token");
const decodedToken = this._jwtHelper.decodeToken(token!);
const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
return role === 'Admin';
}
Above code is tested and it works, currently I am using it for guard.
My navbar html:
<li class="nav-item">
<a class="nav-link" *ngIf="isUserAdmin" routerLink="manufacturers">Manufacturers</a>
</li>
navbar.ts:
export class HeaderComponent implements OnInit {
public isUserAdmin: boolean = false;
...
constructor(private userService: UserService, private _router: Router) {
this.userService.adminChanged
.subscribe(res => this.isUserAdmin = res);
}
To get above navbar.ts code work I modified userService:
export class UserService {
private _adminChangeSub = new ReplaySubject<boolean>(1);
public adminChanged = this._adminChangeSub.asObservable();
constructor(private _http: HttpClient, private _envUrl: EnvironmentUrlService, private _jwtHelper: JwtHelperService) {
}
public isUserAdmin = (): boolean => {
var token = localStorage.getItem("token");
const decodedToken = this._jwtHelper.decodeToken(token!);
const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
this._adminChangeSub.next(true);
return role === 'Admin';
}
But it just doesn’t work. Element in navbar is still here even If i log into admin account.
Also when I try to console.log(this.isUserAdmin) in constructor right after subscribing it return false. How can I hide buttons from navbar when user is not an admin?
Images are not loading in build version in one of my react app
I am working on my portfolio website with react and some of the images are not loading on the build version but it is also working fine on my local development server.
import cryptoImage from "./projectsImage/crypto4.png";
import wordIndexImage from "./projectsImage/Word Index.png";
import lcoImage from "./projectsImage/lco.png";
export const products = [
{
id: 1,
title: "Crypto Stalker",
img: cryptoImage,
link: "https://crypto-stalker.netlify.app/",
desc: "A crypto currency application to stalk all your favorite cryptocurrencies at one place including market cap, time gap and chart analysis.",
tech: ["React", "Material UI", "Chart Js", "Redux", "Netlify"],
gitlink: "https://github.com/codesabhi/crypto-stalker-app",
},
{
id: 2,
title: "Word Index",
img: wordIndexImage,
link: "https://wordindex.netlify.app/",
desc: "A dictionary app which supports twelve languages along with audio support also a progressive web app that is downloadable on respectable devices",
tech: ["React", "Material UI", "Axios", "PWAs", "Netlify"],
gitlink: "https://github.com/codesabhi/word-index",
},
And here I am mapping all the above data including images in a different component.
const ProductCard = ({title,img,link,desc,tech,git}) => {
const theme = useContext(ThemeContext);
return (
<>
<div className="c">
<div className="c-left">
<div className="c-card bg"></div>
<div className="c-cards">
<a href={link} target="_blank" rel="noreferrer" className="c-imglink"><img src={img} alt="" className="c-img" /></a>
</div>
</div>
I don’t know why?
but it is all working nice in local development but not on the build version
Data transfer from input into a table
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>Uncaught TypeError: locationProp is undefined in Router component
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:
.
.
.
Sort array, get duplicates value in own array [duplicate]
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?
PWA – Frontend doesn’t update even after a hard refresh
- 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
ER_ACCESS_DENIED_ERROR: Access denied on nodeJS
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.
Find important nodes and edges with their edge connection count in cytoscape.js
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.
Why have I problem with Cypress authorization to SharePoint
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.
code coverage results doesn’t reflect results of unit test cases written for electron js code
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:**
How to efficiently make multiple api calls from an array in node js
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?
how to show the intro image only once
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>