Template :
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<button type="button" class="btn btn-primary" (click)="confirm()" >Save</button>
Component:
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
Output display:
Is there any css file etc that I need to include?
Template(full):
<!---------------- Meta and Title ---------------->
<meta charset="utf-8">
<title>Solid Waste Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="tables-basic" data-spy="scroll" data-target="#nav-spy" data-offset="300">
<!-- -------------- Body Wrap -------------- -->
<div id="main">
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<!-- -------------- Topbar -------------- -->
<header id="topbar" class="alt">
<div class="topbar-left">
<ol class="breadcrumb">
<li class="breadcrumb-icon">
<a href="#">
<span class="fa fa-eye"></span>
</a>
</li>
<li class="breadcrumb-active">
Organizational User
</li>
</ol>
</div>
<div class="topbar-right">
<a class="btn btn-primary btn-sm" href="Edit.html">
<i class="fa fa-edit"></i> Edit
</a>
<a class="btn btn-dark btn-sm" href="UserList.html">
<i class="fa fa-arrow-left"></i> Back
</a>
</div>
</header>
<!-- -------------- /Topbar -------------- -->
<!-- -------------- Content -------------- -->
<section id="content" class="table-layout animated fadeIn">
<!-- -------------- Column Center -------------- -->
<div class="chute chute-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-visible p10">
<div class="panel-body pn mn allcp-form theme-primary">
<form id="form-order" (ngSubmit)="onSubmit(f)" #f="ngForm">
<h6>OrgUser</h6>
<div class="section row ">
</div>
<!-- -------------- /section -------------- -->
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="userid">User ID: </label>
<p-autoComplete (ngModelChange)="orguser.userid = $event" class="ui-autocomplete autocomplete" [suggestions]="results" (completeMethod)="search($event)"
(onSelect)="onSelect($event)" (onBlur)="onBlur($event.target.value)" field="userid"></p-autoComplete>
<input type="hidden" name="userid" [ngModel]="orguser?.userid">
</div>
<div class="col-md-6 ph10 mb5">
<label for="perid">Personnel ID:</label>
<input type="text" class="form-control" [ngModel]="orguser?.perid" (ngModelChange)="orguser.perid = $event" name="perid"
id="perid">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Password">Password:</label>
<input type="text" class="form-control" [ngModel]="orguser?.password" (ngModelChange)="orguser.password = $event" name="password"
id="password">
</div>
<div class="col-md-6 ph10 mb5">
<label for="fullname">Name:</label>
<input type="text" class="form-control" name="fullname" disabled [ngModel]="orguser?.perfullname" (ngModelChange)="orguser.perfullname = $event"
id="fullname">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="type">CreatedOn:</label>
<input type="text" class="form-control" name="createdon" disabled [ngModel]="orguser?.createdon" (ngModelChange)="orguser.createdon = $event"
id="createdon">
</div>
<div class="col-md-6 ph10 mb5 ">
<label for="CreatedBy ">CreatedBy:</label>
<input type="text" class="form-control" name="createdby" disabled [ngModel]="orguser?.createdby" (ngModelChange)="orguser.createdby = $event"
[(ngModel)]="orguser.createdby" id="createdby">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Deletedby">Deleted By:</label>
<input type="text" class="form-control" disabled name="Deletedby" id="Deletedby">
<div class="col-md-6 ph10 mb5">
<label for="isactive">IsActive:</label>
<input type="checkbox" id="isactive" [ngModel]="orguser?.isactive" (ngModelChange)="orguser.isactive = $event" name="isactive">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="isdeleted">Is Deleted:</label>
<input type="checkbox" id="isdeleted" [ngModel]="orguser?.isdeleted" (ngModelChange)="orguser.isdeleted = $event" name="isdeleted">
</div>
</div>
</div>
<!-- -------------- /section -------------- -->
<hr>
<!-- -------------- /section -------------- -->
<div class="section text-right mb10 ">
<button type="button" class="btn btn-primary" (click)="confirm()">Save</button>
</div>
<!-- -------------- /Panel Body -------------- -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- -------------- /Column Center -------------- -->
</section>
<!-- -------------- /Content -------------- -->
</div>
</div>
Componenet(full):
import { Component, OnInit, ViewChild } from '#angular/core';
import { orguser } from '../../Models/orguser';
import { PersonnelService } from '../../services/personnel.service';
import { OrguserService } from '../../services/orguser.service';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
#Component({
selector: 'app-orguseraddedit',
templateUrl: './orguseraddedit.component.html',
styleUrls: ['./orguseraddedit.component.css'],
})
export class OrguseraddeditComponent implements OnInit {
orguser: orguser = new orguser();
val: any;
results: any[];
constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {
}
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to Add?',
accept: () => {
console.log('add clicked');
},
key:"add"
});
}
search(event) {
this._OrguserService.GetOrgUsersForAutocomplete(event.query)
.subscribe((userdata: any[]) => { this.results = userdata;console.log('xxxx'); console.log(this.results); }, (error) => {
//this.statusMessage = 'Problem with service. Please try again.'
console.error(error);
});
}
handleDropdown(event) {
console.log(event.query);
//event.query = current value in input field
}
ngOnInit() {
//this.orguser=null;
}
onBlur(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; }, (error) => {
console.error(error);
});
}
onSelect(value) {
this.getuser(value.userid);
}
getuser(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; console.log(this.orguser); }, (error) => {
console.error(error);
});
}
onSubmit(f) {
this._OrguserService.addupdateOrguser(f.value)
.subscribe((res: any) => {
console.log(res);
this.orguser = res;
{ console.log('success'); this.getuser(f.value.userid); };
}, (error) => {
console.error(error);
});
}
}
interface IAutoCompleteItem {
value: any;
text: string;
markup?: string;
isFocus?: boolean;
}
After removing all the stylesheet references and everything else on the template this is what I am getting:
I am not sure what you exactly wrong. But I'Ll give the proper way to use primeng confirm dialog box. You can get what you missing from that
First you need import ConfirmationService from primeng package
import { ConfirmationService} from 'primeng/primeng';
Then you should inject this via constructor like
constructor(private confirmationService: ConfirmationService) { }
And use the below code while open confirmation dialog box
this.confirmationService.confirm({
message: 'Are you sure to delete this?',
icon: 'fa fa-question-circle',
header: 'Delete Confirmation',
accept: () => {
// do accept criteria
}
},
reject: () => {
//close the dialogue
}
});
And the HTML code Could be
<p-confirmDialog width="500"></p-confirmDialog>
EDIT
While looking your code, You are missing to assign any value for Confirmation object in header="Confirmation".So please remove header="Confirmation" and add that in confirmationservice parameter. also remove appendTo="body". Please try this and let me know
Finally, I have figured out what I was missing.
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/primeng.min.css" />
Since I am new to angular I am not sure about the correct way to reference the local files in node_modules so I have used cdn.
It working.
Related
I am programming an action where after a button press, games on the platform "console" or "pc" is shown. I would like it when the button for "pc" is pressed first, all pc games are shown. And after when the "console" button is pressed, all "pc" games are removed and then all "console" games are appended
code for the buttons is this:
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
code for the function is similar across the two buttons;
function searchPC() {
$("search").replaceWith(`<div></div>`);
axios
.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts);
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").replaceWith(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
What I have attempted is to replace any info with an empty div, then adding the desired information, however, it still shows the older information (referring to above, "pc" is still shown even after pressing "console".
Furthermore, I have more than 1 card to add, ie there are >2 sets of information for console and pc games
original file with js included is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Friendbook</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class='bg-dark'>
<div class="container-fluid bg-dark">
<div class="">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<div>
<img src="http://localhost:8082/images/image.jpg" alt="logo" style="width:40px;" id="logo">
</div>
</a>
<a class="nav-link" href="/">Home</a>
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark mt-1">
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchP' type="text" placeholder="Search by Price">
<button class="btn btn-success" type="submit">Search</button>
</form>
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchN' type="text" placeholder="Search by Name">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<div class="row" style="margin-top: 2rem;">
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>Search Games</h4>
<div id="search" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>All Games</h4>
</div>
</div>
<div class="row" style="margin-top: 2rem;">
<div class="col-md-11 col-xs-12 ml-5">
<div id="posts" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
</div>
<footer class='bg-dark p-3'>
<div class='ml-2 mt-2'>
<form>
<button class="btn btn-success" type="submit" onclick="logout()">logout</button>
</form>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const baseUrl = "http://localhost:8081";
const token = localStorage.getItem("token");
const loggedInUserID = parseInt(localStorage.getItem("loggedInUserID"));
if (token === null /* || isNaN(loggedInUserID) */) {
window.location.href = "/login/";
} else {
axios.get(`${baseUrl}/gameall/all`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});
/*
axios.get(`${baseUrl}/game/console/`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
${post.description}
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
<p class="card-text">${post.price}</p>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});*/
//acts as addpost api
$("#create-post-form").submit((event) => {
// prevents the page from refreshing
event.preventDefault();
const requestBody = {
text_body: $("#create-post-form-body").val(),
fk_poster_id: loggedInUserID
};
// create the post
axios.post(`${baseUrl}/posts/`, requestBody)
.then((response) => {
// reset form value.
$("#create-post-form-body").val("");
// fetch the post with the returned postID
axios.get(`${baseUrl}/posts/${response.data.postID}`)
.then((response) => {
const post = response.data;
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body sm-6">
<p class="card-text">${post.text_body}</p>
</div>
<div class="card-footer text-muted">
${post.created_at}
</div>
</div>
`;
$("#posts").append(postHtml);
})
.catch((error) => {
console.log(error);
});
});
});
}
function logout() {
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('id')
}
function searchPC() {
axios.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
function searchCon() {
axios.get(`${baseUrl}/game/console`)
.then((response) => {
const posts = response.data;
posts.forEach((post) => {
const postCHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postCHtml);
});
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>```
I think you need to use **html(htmlString) **
Description: Set the HTML contents of each element in the set of matched elements
replace $("#search").replaceWith(postPHtml);
with $("#search").html(postPHtml);
see:https://api.jquery.com/html/
I am working on vue.js rendering dynamic list, When user clicks on a button then the link in corresponding input field renders, then again I am pasting a link in input field and clicking add it adds the value to the second index which I don't want I know I have o use queue concept but here on ui I don't how to implement it
What I have done
new Vue({
el: '#app',
data() {
return {
anchorTags: [{
url: '',
value: ''
}]
}
},
methods: {
validateYouTubeUrl() {
var url = document.getElementById('youtubeUrl').value
this.anchorTags.push({
url: url,
value: url
});
}
}
})
.as-console-wrapper { max-height: 3em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" id="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorTags" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
So What I am trying to do is
To do it like quee like FIFO, when I enter some thing it is on top the again I enter something the latest one should be on top
I allowed myself to make some extra changes, moreover, to give you an answer (I used the v-model):
new Vue({
el: "#app",
data() {
return {
youtubeUrl: null,
anchorTags: []
};
},
methods: {
validateYouTubeUrl() {
this.anchorTags.push({
url: this.youtubeUrl,
value: this.youtubeUrl
});
}
},
computed: {
anchorList() {
return this.anchorTags.slice().reverse();
}
}
});
.as-console-wrapper {
max-height: 3em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" v-model="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorList" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
If that's not what you meant, edit your question and try to describe it in a more pathological way.
I am trying to figure out what I am missing here. I am trying to pre-fill some data for a user profile page. That pre-fill data is coming from a Firestore DB collection. I have been able to prefill existing fields when editing requests, however, I am stumped at the user profile portion. I've included a link to a video showing what I am seeing. Also here is an error I am getting:
vue-firestore.js?73c3:1 Uncaught (in promise) Error: This document (profile) is not exist or permission denied.
at Object.eval [as next] (vue-firestore.js?73c3:1)
at next (index.cjs.js?e89a:21048)
at eval (index.cjs.js?e89a:19341)
Video of my issue
I believe I am experiencing a problem with one of the following files. I can supply more info if needed.
Login.vue
<template>
<div class="login">
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Signup</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<h5 class="text-center">Login Please</h5>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" #keyup.enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="login">Login</button>
</div>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
<h5 class="text-center">Create New Account</h5>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" v-model="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="register">Signup</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {fb, db} from '../firebase'
export default {
name: "Login",
props: {
msg: String
},
data(){
return {
name: null,
email: null,
password: null
}
},
methods:{
login(){
fb.auth().signInWithEmailAndPassword(this.email, this.password)
.then(() => {
$('#login').modal('hide')
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
},
register(){
fb.auth().createUserWithEmailAndPassword(this.email, this.password)
.then((user) => {
$('#login').modal('hide')
// Add a new document in collection "profiles"
db.collection("profiles").doc("user.user.uid").set({
name: this.name,
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is the Profile.vue
<template>
<div class="profile">
<div class="container">
<div class="intro h-100">
<div class="row h-100 align-items-center">
<div class="col-md-6 ml-3">
<h3>Profile settings</h3>
<p>
Change your profile settings here
</p>
</div>
<div class="col-md-5">
<img src="/img/svg/profile.svg" width="300" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="profile-content">
<ul class="nav nav-pills ml-3" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false">Account settings</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="profile.phone" placeholder="Phone" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" v-model="profile.address" placeholder="Address" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" #click="updateProfile" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="container">
<div class="row">
<div class="col-md-">
<div class="alert alert-info">
Please use the Reset password email button for reseting the password. The form doens't work currently
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.name" placeholder="User name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.email" placeholder="Email address" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.password" placeholder="New password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="file" #change="uploadImage" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="button" #click="resetPassword" value="Reset password email" class="btn btn-success w-100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { fb, db } from '../firebase';
export default {
name: "Profile",
components: {
},
props: {
msg: String
},
data(){
return {
profile: {
name:null,
phone:null,
address:null,
postcode:null
},
account:{
name:null,
email:null,
photoUrl:null,
emailVerified:null,
password:null,
confirmPassword:null,
uid:null
}
}
},
firestore(){
const user = fb.auth().currentUser;
return {
profile: db.collection('profiles').doc(user.uid),
}
},
methods:{
resetPassword(){
const auth = fb.auth();
auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
Toast.fire({
type: 'success',
title: 'Email sent'
})
}).catch((error) => {
console.log(error);
});
},
updateProfile(){
this.$firestore.profile.update(this.profile);
},
uploadImage(){
}
},
created(){
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import jQuery from "jquery";
import { fb } from "./firebase";
import VueFirestore from "vue-firestore";
import Swal from "sweetalert2";
Vue.use(VueFirestore, {
key: "id",
enumerable: true
});
window.Swal = Swal;
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
window.$ = window.jQuery = jQuery;
Vue.use(VueFirestore);
import "popper.js";
import "bootstrap";
import "./assets/app.scss";
Vue.component("Navbar", require("./components/Navbar.vue").default);
Vue.component("NavAdmin", require("./views/NavAdmin.vue").default);
Vue.component("Requests", require("./views/Requests.vue").default);
Vue.component(
"ViewBulkRequest",
require("./views/ViewBulkRequest.vue").default
);
Vue.config.productionTip = false;
let app = "";
fb.auth().onAuthStateChanged(function(user) {
if (!app) {
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});
This was not resolved, we simply switched over to some new code. Thank you.
I am writing a filter application by using Vuejs with checkboxes. It works well when I use single checkbox. However, it removes the results when I check more than than 2 checkboxes.
For example, when I check Green and Red, it should show the Title 1 and Title 2.
Or when I check Green, Red, Active, Completed, it should show the Title 1 and Title 2.
You can check my code at: https://jsfiddle.net/dalenguyen/xLcvdy0n/1/
HTML code:
<div class="content">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Filter by</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Health</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths">
<label for="green">Green</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths">
<label for="red">Red</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths">
<label for="yellow">Yellow</label>
</div>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Status</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses">
<label for="active">Active</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses">
<label for="completed">Completed</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses">
<label for="cancelled">Cancelled</label>
</div>
</div>
<!-- /.box-body -->
</div>
<button type="button" class="btn btn-block btn-info" v-on:click="resetFilter">Reset</button>
</div>
<!-- /.box-body -->
</div>
</div>
<div class="col-md-9 col-sm-8">
<div class="col-md-4" v-for="project in filteredProjects">
<div class="box collapsed-box">
<div class="box-header with-border">
<h4 class="box-title">{{project['title']}}</h4>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-striped">
<tr>
<td>Status</td>
<td>{{project['Status']}}</td>
</tr>
<tr>
<td>Health</td>
<td>{{project['Health']}}</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
Vuejs code:
var app = new Vue({
el: '.content',
data: {
projects: [
{
"title": "Title 1",
"Status": "Active",
"Health": "Green",
},
{
"title": "Title 2",
"Status": "Completed",
"Health": "Red",
},
{
"title": "Title 3",
"Status": "Cancelled",
"Health": "Yellow",
},
]
,
checkedHealths: [],
checkedStatuses: []
},
computed: {
filteredProjects: function(){
let filterProjects = this.projects;
$.each(this.checkedHealths, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Health == key;
})
});
$.each(this.checkedStatuses, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Status.includes(key);
})
});
return filterProjects;
}
},
mounted: function(){
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%' // optional
});
jQuery('input').on('ifChecked', function(e){
if($(this).attr('name') === "Healths")
app.$data.checkedHealths.push($(this).val());
if($(this).attr('name') === "Statuses")
app.$data.checkedStatuses.push($(this).val());
});
jQuery('input').on('ifUnchecked', function(e){
if($(this).attr('name') === "Healths"){
let data = app.$data.checkedHealths;
app.$data.checkedHealths.splice(data.indexOf($(this).val()),1);
}
if($(this).attr('name') === "Statuses"){
let data = app.$data.checkedStatuses;
app.$data.checkedStatuses.splice(data.indexOf($(this).val()),1);
}
});
},
methods: {
resetFilter: function(){
$('input').iCheck('uncheck');
}
}
})
Your filterProjects method should look something like this.
filteredProjects: function(){
let filterProjects = this.projects;
if (this.checkedHealths.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedHealths.includes(project.Health);
})
}
if (this.checkedStatuses.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedStatuses.includes(project.Status)
})
}
return filterProjects;
}
Updated fiddle.
Essentially, your old filter code was checking each filter individually, where you needed to handle them all at once. The above code loops through the projects and checks if the project's value is in the selected filter values.
You're also using a lot of jQuery where you could just be using native methods and Vue.
I am currently creating a Dapp for Ethereum using Truffle and testrpc. On our register page, I have a button that signs the user up with all the information entered. However, when the button is clicked, the register function in the app.js javascript file is called, but does not execute passed the var regi = Register.deployed(); line. I am gettig an error in the console on the webpage as seen below. I have attempted to debug this for hours but with no success.
This is the app.js file. The register function is the function that takes the data inputted and sends it to the Register Contract.
The code below that is the index.html file. The <button id="confirmsignup" onclick="register()">Sign Up</button> tag is the button that calls register() in app.js when clicked.
Finally, the last one is the code for the Contract Register that sets up an account for the user.
var accounts;
var account;
var balance;
var logged;
function setStatus(message) {
var status = document.getElementById("status");
status.innerHTML = message;
};
function refreshBalance() {
var meta = MetaCoin.deployed();
meta.getBalance.call(account, {from: account}).then(function(value) {
var balance_element = document.getElementById("balance");
balance_element.innerHTML = value.valueOf();
}).catch(function(e) {
console.log(e);
setStatus("Error getting balance; see log.");
});
};
function sendCoin() {
var meta = MetaCoin.deployed();
var amount = parseInt(document.getElementById("amount").value);
var receiver = document.getElementById("receiver").value;
setStatus("Initiating transaction... (please wait)");
meta.sendCoin(receiver, amount, {from: account}).then(function() {
setStatus("Transaction complete!");
refreshBalance();
}).catch(function(e) {
console.log(e);
setStatus("Error sending coin; see log.");
});
getAccountBalance();
};
function getAccountBalance() {
var meta = MetaCoin.deployed();
var balance = meta.getBalance(msg.sender);
}
function register() {
var nickname = document.getElementById("userid").value;
var email = document.getElementById("Email").value;
var password = document.getElementById("password").value;
var rePassword = document.getElementById("reenterpassword").value;
var addr = document.getElementById("ethereumAddress").value;
logged = true;
var regi = Register.deployed();
web3.eth.defaultAccount = addr;
if (password == rePassword) {
regi.setAccountInfo(nickname, email, password, addr).then(function() {
console.log("The account was setup with the appropriate details");
}).catch(function(e) {
console.log(e);
});
alert("Congratulations! You registered an account with Cogitaire!");
} else {
alert("The passwords do not match!");
}
};
function displayInfo() {
var display = Register.deployed();
var idCheck = document.getElementById("idForCheck").value;
if (logged) {
console.log("The user is logged: " + logged);
display.getNickname.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('nickshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
display.getEmail.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('emailshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
} else {
alert("You are not logged in! Please log in to see your user information or enter address to see someone elses user information");
}
};
function logOff() {
var log = Register.deployed();
logged = false;
alert("You are now logged off!");
web3.eth.defaultAccount = '0xda9c209aafee487d729866bc0d58223a62bfe383';
};
function showLogin() {
registerSection.style.display = 'none';
loginSection.style.display = 'block';
};
function showRegister() {
registerSection.style.display = 'block';
loginSection.style.display = 'nice';
};
window.onload = function() {
var Web3 = require([web3]);
// create an instance of web3 using the HTTP provider.
// in mist web3 is already available, so check first if its available before instantiating
if (typeof web3 !== 'undefined') {
var web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
}
//var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
return;
}
getAddress.call().then(function(value) {
web3.eth.defaultAccount = value;
});
accounts = accs;
account = accounts[0];
refreshBalance();
});
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Cogitare</title>
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/bundle.js"></script>
<script src="javascripts/require.js"></script>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="navbar-brand topnav" src="img/BIRD2thin.jpg" alt="can't display rn">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a style="color:white;" href="./newProjectInfo.html">Submit An Idea</a>
</li>
<li>
<a style="color:white;" href="#">Services</a>
</li>
<li>
<a style="color:white;" href="#contact">Contact</a>
</li>
<li>
<a style="color:white;" href="#signup" data-toggle="modal" data-target=".bs-modal-lg">Sign In/Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Where ideas take flight</h1>
<h3>ejofaojwefojwejoaewoj</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
</i> <span class="network-name">Discover Projects</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a style="color:black" href="#signin" data-toggle="tab">Sign In</a></li>
<li class=""><a style="color:black" href="#signup" data-toggle="tab">Register</a></li>
<li class=""><a style="color:black" href="#why" data-toggle="tab">Show User Information</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>Click this button to show information about you!</p>
<!--<p></p><br> Please contact <a mailto:href="theoluan#gmail.com"></a>theoluan#gmail.com</a> with questions.</p>-->
<button id="display" onclick="displayInfo()">Display Information</button>
<br><label id="nickshow">test</label></br>
<br><label id="emailshow">test</label></br>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-medium" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordinput">Password</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<!--Register-->
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Nickname:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="theo" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<!-- Button -->
<!--<button id="confirmsignup" class="btn btn-success" onclick="register()">Sign Up</button>-->
<button id="confirmsignup" onclick="register()">Sign Up</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
contract Register {
//address public userAddr;
struct User {
address userAddress;
string nickname;
string email;
string password;
bool isLoggedIn;
}
mapping(address => User) users;
address public creator;
//bool public isLoggedIn;
function Register() {
creator = msg.sender;
}
function setAccountInfo(string nickname, string email, string password, address addr) {
users[addr].nickname = nickname;
users[addr].email = email;
users[addr].password = password;
}
function getNickname(address addr) returns (string) {
return users[addr].nickname;
}
function getEmail(address addr) returns (string) {
return users[addr].email;
}
function getAddress() constant returns (address) {
return creator;
}
function setLoggedStatus(address addr, bool condition) {
users[addr].isLoggedIn = condition;
}
function getLoggedStatus(address addr) constant returns (bool success) {
return users[addr].isLoggedIn;
}
}
I can't figure out why the code does not execute after the javascript line Register.deployed(). Any help that could possibly lead me in the right direction would be helpful. Thank you so much!