Ionic modal fires twice - javascript

My ionic app fires a modal twice when hitting ion-button.
I cannot figured why it is happening.
<ion-button (click)="editProduct(p.id)" fill="clear">
<ion-icon name="cloud-upload"></ion-icon>
</ion-button>
editProduct(id) {
// obter dados do produto pelo seu id
this.afs.collection("products").doc(id)
.valueChanges()
.subscribe(data => {
this.product = data
// chamar o modal e enviar o id do produto
this.modalProduct(id);
});
}
async modalProduct(id) {
const modal = await this.modalCtrl.create({
component: AdminProductPage,
componentProps: {
'id': id,
'title': this.product.title,
'description': this.product.description,
'price': this.product.price,
'image': this.product.image
}
});
await modal.present();
}

I figured out by myself.
I need to use a pipe from rxjs to prevent double execution of editProduct() subscrive method.
editProduct(id) {
// obter dados do produto pelo seu id
this.afs.collection("products").doc(id)
.valueChanges()
.pipe(
first()
)
.subscribe(data => {
this.product = data
// chamar o modal e enviar o id do produto
this.modalProduct(id);
});
}

Related

I can't create a file download controller

When I try to use the .pipe() function in my controller I get an error and I don't know why. Attached my code below, thank you very much for the help in advance
const fs =require('fs');
module.exports={
inputs:{
name_file:{
type:"string",
required:true
}
},
exits: {
success: {
description: "Return matching data.",
},
defaultError: {
description: "It catches any error.",
responseType: "defaultError",
},
},
fn:function (inputs,exits){
//Comprobamos si el fichero viene en la peticion
if (!inputs.name_file) return exits.defaultError("No se ha adjuntado el nombre del archivo")
var nameFile=inputs.name_file
//Creamos ruta completa del fichero
var URL_FILE=process.cwd()
URL_FILE= URL_FILE.concat("\\.tmp\\uploads\\",nameFile,'.csv')
//Comprobamos si el fichero existe
fs.access(URL_FILE,fs.constants.F_OK,(err)=>{
return "El fichero no existe"
})
var response={}
var SkipperDisk = require('skipper-disk');
var fileAdapter = SkipperDisk(/* optional opts */);
// Stream the file down
var filedown=fileAdapter.read(URL_FILE)
filedown.on('error', function (err){
return exits.defaultError(err);
})
filedown.on('line',(linea)=>{
console.log(linea)
})
filedown.pipe(exits.success(response))
}
}
TypeError: Cannot read property 'on' of undefined```

How to extract text from a carousel with puppeteer?

I want to get the text of this webpage and the following when clicking on the Oui or Non button, which will be at the same place, and store them as a json file :
I am open to solutions in javascript and python. I tried teh following one:
'use strict';
const puppeteer = require('puppeteer');
(async function main() {
try {
const browser = await puppeteer.launch();
const [page] = await browser.pages();
await page.goto('http://www.leparisien.fr/elections/municipales/municipales-a-paris-notre-simulateur-pour-savoir-quel-candidat-vous-correspond-le-mieux-05-03-2020-8273238.php');
const pollFrame = page.frames().find(
frame => frame.url() === 'https://livemixr-assets.s3-eu-west-1.amazonaws.com/quel-candidat/index.html'
);
// getting first question
const data = await pollFrame.evaluate(
() => document.querySelector('html > body > div > div > div > div > div:nth-child(5) > h4').innerText
);
console.log(data);
// clicking on an answer
await page.$x('/html/body/div/div/div[1]/div/div[5]/div/div/label[1]')
const elements = await page.$x('/html/body/div/div/div[1]/div/div[5]/div/div/label[1]')
await elements[0].click()
// getting second question
const data2 = await pollFrame.evaluate(
() => document.querySelector('html > body > div > div > div > div > div:nth-child(5) > h4').innerText
);
console.log(data2);
await browser.close();
} catch (err) {
console.error(err);
}
})();
Which get the first text, click on one button, get the second text.
But got the following error:
C:\Users\antoi\Documents\Programming\Scraping>node scraper.js
Faut-il accélérer l’automatisation du métro ?
TypeError: Cannot read property 'click' of undefined
at main (C:\Users\antoi\Documents\Programming\Scraping\scraper.js:24:23)
at processTicksAndRejections (internal/process/task_queues.js:94:5)
So how to extract text from a webpage with puppeteer?
This selector is located inside an iframe, so you need to find this frame first.
While you are not so experienced in puppeteer, it would be easier to just use page.evaluate() (or frame.evaluate()) to get document data by executing web API code in the browser context.
For example:
'use strict';
const puppeteer = require('puppeteer');
(async function main() {
try {
const browser = await puppeteer.launch();
const [page] = await browser.pages();
await page.goto('http://www.leparisien.fr/elections/municipales/municipales-a-paris-notre-simulateur-pour-savoir-quel-candidat-vous-correspond-le-mieux-05-03-2020-8273238.php');
await page.waitForSelector('iframe[src="https://livemixr-assets.s3-eu-west-1.amazonaws.com/quel-candidat/index.html"]');
const pollFrame = page.frames().find(
frame => frame.url() === 'https://livemixr-assets.s3-eu-west-1.amazonaws.com/quel-candidat/index.html'
);
const data = await pollFrame.evaluate(() => {
const texts = [];
while (document.querySelector('div.ant-modal-content') === null) {
texts.push(document.querySelector('div:nth-child(5) > h4').innerText);
document.querySelectorAll('input[type="radio"]')[1].click();
// or: document.querySelector('input[type="radio"][value="Non"]').click();
}
return texts;
});
console.log(data);
await browser.close();
} catch (err) {
console.error(err);
}
})();
Output:
[
'Faut-il accélérer l’automatisation du métro ?',
'Faut-il faire payer le stationnement des deux-roues ?',
'Faut-il interdire les bus de tourisme dans la capitale ?',
'Faut-il piétonniser les quatre arrondissements centraux de la capitale ?',
'Faut-il réduire le nombre de places de stationnement en surface ?',
"Faut-il rendre le Vélib' gratuit ?",
'Faut-il renforcer la vidéoverbalisation ?',
'Faut-il rouvrir à la circulation les voies sur berges ?',
'Faut-il interdire les trottinettes électriques ? (free floating)',
'Le périphérique doit-il...',
'Les transports doivent-ils être rendus gratuits...',
"Faut-il demander l'annulation des Jeux olympiques ?",
'Faut-il mettre fin à la pratique du tirage au sort pour le conservatoire ?',
'Faut-il augmenter le nombre de caméras de vidéo-surveillance dans la rue ?',
'Faut-il créér une police municipale ?',
'Le future police municipale doit-elle être armée ?',
"Faut-il augmenter le montant des amendes (jets de mégots, urine, dépôt d'ordures...) ?",
'Faut-il privatiser le ramassage des déchets ?',
'À Paris, la société Airbnb doit-elle être ...',
'Faut-il baisser le nombre de nuitées autorisées à la location sur Airbnb (120 jours actuellement) ?',
"Faut-il maintenir l'encadrement des loyers?",
"En priorité, l'accès au logement social doit-il être attribué ...",
'Faut-il accroître le nombre de logements sociaux ?',
'En matière de finances, faut-il ...',
'Faut-il interdire les animaux sauvages dans les cirques ?',
'Faut-il proposer une alternative végétarienne tous les jours dans les cantines ?',
'Faut-il piétonniser les abords des écoles ?',
"Quelle est la priorité pour améliorer l'environnement ?",
'En cas de grèves, faut-il un service minimum pour les crèches et les écoles ?',
'Faut-il revenir à la semaine de 4 jours dans les écoles ?',
'Les tarifs des cantines scolaires doivent-ils ... ?',
'Faut-il étendre le travail du dimanche ?'
]

Symfony form validation from an AJAX render

I'm new to symfony, I render forms throughout a JSON so whenever I click on an icon it shows different forms (to change firstname, lastname...).
I return thoses forms as a JSON :
public function profileSettings()
{
$user = $this->getUser();
// Formulaire d'informations concernant le compte
$formAccountSettings = $this->createForm(AccountSettingsType::class, $user, [
'userEmail' => $user->getEmail(),
'userUsername' => $user->getUsername(),
]);
// Formulaire d'informations personnel
$formPersonnalSettings = $this->createForm(PersonnalSettingsType::class, $user, [
'userFirstname' => $user->getFirstname(),
'userLastname' => $user->getLastname(),
]);
// Retour en format JSON des 3 requêtes sous tableau
return $this->json(
[
'formAccountSettingsView' =>
$this->render('user/_accountSettings.html.twig', [
'form' => $formAccountSettings->createView(),
]),
'currentUser' => $user,
'formPersonnalSettingsView' => $this->render('user/_accountSettings.html.twig', [
'form' => $formPersonnalSettings->createView(),
]),
]
);
}
Here is how I display this :
$('#settings-user li').on('click', function (e) {
$.ajax({
type: 'GET',
url: "/website-skeleton/public/index.php/json/profile",
success: function (response) {
if ($(e.target).hasClass('profile')) {
$('.display').empty().append(
`
<p id="welcome">Bonjour, <em><strong>${response['currentUser']['username']}</strong></em> vous êtes enregistré sous le nom de <strong>${response['currentUser']['firstname']} ${response['currentUser']['lastname']}</strong>.
<br>
Votre adresse email est : <strong>${response['currentUser']['email']}</strong>.
<br>
Pour modifiez vos informations veuillez cliquez sur le menu de navigation.
</p>`);
} else if ($(e.target).hasClass('security')) {
$('.display').empty().append(response['formAccountSettingsView']['content']);
} else if ($(e.target).hasClass('informations')) {
$('.display').empty().append(response['formPersonnalSettingsView']['content'])
}
}
})
});
The problem now is that I don't know how to handle thoses forms from another controller and validate it with the constraints I set on my entity User this is how I validate :
public function editCredentials(Request $request, UserPasswordEncoderInterface $encoder)
{
$user = $this->getUser();
$formPersonnalSettings = $this->createForm(PersonnalSettingsType::class, $user);
if ($request->isMethod('POST')) {
if ($request->request->has('personnal_settings')) {
if ($formPersonnalSettings->isSubmitted() && $formPersonnalSettings->isValid()) {
$user->setFirstname($request->request->get('personnal_settings')['firstname']);
$user->setLastname($request->request->get('personnal_settings')['lastname']);
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
$this->addFlash('personnal_success', 'Vos informations personnels ont bien été enregistrées !');
return $this->redirectToRoute('user_profile');
}
}
Is that a good method? should I handle everything with ajax ? Thanks for your time !
You should use the handlerequest which automatically sets the values in the form to the entity added to it once the form has been submitted.
$form = $this->createCreateForm($entity); // private function to create the form
$form->handleRequest($request);
if ($form->isSubmitted()) {
if ($form->isValid()) {
$em->persist($entity);
$em->flush();
}
}
return $response;
Once handled you just need to return an ok response, or return the form back to the view if something has gone wrong.
If I remember well, the asserts set on the entity are also automatically processed with the handleRequest(), it depends on how you declared them.
Yo can also add other errors after the submit, just add them between the isSumbmitted() and isValid(). Documentation
I leave you here some documentation that may help.
Handle request
Validation
Validation in the form itself

How to read a JSX component inside a javascript code

I have this delete function :
showDeleteConfirmation(value, id, index, thisHandler) {
//const { extraitMP3 } = this.state;
confirm({
title: 'Voulez vous supprimer cette audio ?',
content: '',
okText: 'Oui, je confirme',
okType: 'danger',
cancelText: 'Non',
onOk() {
deleteMp3Request(id);
var { extraitMP3 } = thisHandler.state;
var array = [];
for (var key in extraitMP3) {
array.push(extraitMP3[key]);
}
// console.log('array',array)
const result = array.map(d => ({
...d,
TypeMp3List:
Object.fromEntries(
//console.log(Object.entries(d.TypeMp3List)),
Object.entries(d.TypeMp3List).splice(index,id)
)
}))
// console.log('result',result)
thisHandler.setState({ extraitMP3: result })
NotificationManager.success("le fichier audio est supprimé avec succès !", "");
},
onCancel() {
},
});
}
I want to replace the text messages with :
title: <IntlMessages id="message.required.titresuppressionmp3" />,
content: '',
okText: <IntlMessages id="message.required.confirmation" />,
okType: <IntlMessages id="message.required.danger" />,
cancelText: <IntlMessages id="message.required.non"/>,
I did the import but it's not working correctly What should I do exactly to be read successfully. Any help would be appreciated. Thank you
The browsers doesn't support JSX, so you must use babel to convert the JSX into understandable for the browser javascript code. Check this tutorial

How to keep dialogs showed up and alert nativescript

hi guys i am working on forget password in mobile app using nativescript, and i want to show alert message when the user insert wrong email or wrong apssword in the dialog , but i couldn't make it is there any body can help ?
let options: PromptOptions = {
title: "Entrez votre nouveau mot de passe",
okButtonText: "Suivant",
cancelButtonText: "Annuler",
cancelable: true,
inputType: inputType.password,
capitalizationType: capitalizationType.none
}; prompt(options).then((pass: PromptResult) => {
if (pass.text && pass.result == true) {
let options: PromptOptions = {
title: "Entrez votre nouveau mot de passe de nouveau",
okButtonText: "Suivant",
cancelButtonText: "Annuler",
cancelable: true,
inputType: inputType.password,
capitalizationType: capitalizationType.none
}; prompt(options).then((pass2: PromptResult) => {
if (pass2.text && pass2.result == true) {
if (pass.text == pass2.text) {
this.auth.resetMDP(this.email, this.code, pass2)
.then((res: any) => {
if (res.message == 'OK')
alert('votre mot de passe a été changé avec succès')
}).catch((err: any) => { alert(err); })
} else alert("re-entrez le mot de passe correctement s'il vous plait");
}
})
}
});
because i ve tried to make it work , but the dialog always close
In my apps I use modals to handle custom dialog styling and special action (as you require validation without closing the dialog). The easiest is:
This is how you call it:
page.showModal(
"you/path/to/modal/directory",
{
// your binding context
},
() => {
// on close callback
}
);
Assume that you have modal layout as XML and code behind (in my case Typescript):
<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" >
<DockLayout stretchLastChild="false">
<Label dock="top" text="Hello Modal!!" horizontalAlignment="center" />
<TextView dock="top" text="{{ message }}" fontSize="15sp" horizontalAlignment="left" />
<Button dock="bottom" text="OK" tap="onOkTap" />
</DockLayout>
let closeCallback: () => void;
export function onShownModally(args: any) {
const page: Page = <Page>args.object;
const context = args.context;
// your close callback logic that you passed
closeCallback = args.closeCallback;
// bind you context object to modal
page.bindingContext = fromObject(context);
}
export function onOkTap(args: EventData) {
const page = args.object as Page;
if (closeCallback !== null && closeCallback !== undefined) {
closeCallback();
} else {
page.closeModal();
}
}

Categories