I took sample code for the IonicPopup and I've modified the wifi password entry to be a username and password entry. It works as expected, but if you click the Login button without entering a username or password, all that happens is e.preventDefault().
Is there a way I can add an animation to the popup, perhaps a "shake" animation, if either field is left blank?
$scope.promptLogin = function() {
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="text" placeholder="Username" ng-model="data.user"><br><input type="password" placeholder="Password" ng-model="data.pass">',
title: 'Enter Credentials',
subTitle: '',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Login</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.user || !$scope.data.pass) {
//don't allow the user to close unless he enters a user and pass
e.preventDefault();
} else {
//console.log($scope.data.user + " - " + $scope.data.pass);
}
}
}
]
});
};
Related
Having a JQuery Datatable (it's more complex I simplified it) as below:
I need to display a bootstrap modal form with a text input field on, whenever I click the "Assign Card" button.
The modal should should be populated with the data coming from the row in which the button was clicked.
Upon clicking the modal "Assign" button, normally I should post the inputed value and the "VisitorID" which like "John Doe" should come from the specific row.
On Assign I should post the "input value" and "VisitorID".
What I have so far:
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "VisitorID" },
{ "data": "FirstName" },
{ "data": "LastName" },
{
"data": "CheckedIn",
"render": function(d) {
return moment(d).format('DD-MM-YYYY HH:mm');
}
},
{"data": "CardNumber"},
],
columnDefs: [
{
targets: [0], // Visitor ID
visible: false
},
{
targets: [-1],
render: function(cardNUmber, b, data, d) {
return '<button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right">Assign Card</button>';
}
}
]
});
$('#visitorsTable').on('click',
'.btnAssignCard',
event => {
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
});
});
Remove the data-toggle and data-target from the button.
Then call the below function after
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
showMyModalSetInput(visitorFirstName + visitorLastName,visitorID );
The function will open the modal and pass the required values before opening. Also, for visitor id, you can add an extra hidden input.
function showMyModalSetInput(inputText, visitorID) {
$('#inputId').val(inputText);
$('#hiddenInputforVisitorID').val(visitorID);
$('#assignCardModal').modal('show');
}
I am using PeerJS to make audio calls between clients and it works. I am showing a Dialog to the user who is receiving a call with two buttons (Answer, and Decline). As shown below:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
// sweetAlert("BINGO")
bootbox.dialog({
className: "modal-danger nonumpad",
closeButton: false,
animate: true,
title: 'Call Recieved',
message: "Accept or Decline",
onEscape: null,
buttons: {
pickup: {
label: "<i class=\"fa fa-phone\"></i> Answer",
className: "btn-warning btn-lg pull-left",
callback: function(){
return false
}
},
hangup: {
label: "<i class=\"fa fa-phone\"></i> Decline",
className: "btn-warning btn-lg pull-left",
callback: function(){
return false;
}
}
}
});
});
My question here is, how can I send the action to the other user (who is making the call)?
The reason is because I want to show timer once the receiver press on "Answer" or show dialog to inform the caller that the receiver has pressed decline
From the PeerJS documentation:
Data connections
Connect
var conn = peer.connect('another-peers-id');
conn.on('open', function(){
conn.send('hi!');
});
Receive
peer.on('connection', function(conn) {
conn.on('data', function(data){
// Will print 'hi!'
console.log(data);
});
});
You can get the id of the peer making the call via call.peer and then open a data connection to send a message ('accept', 'decline', etc) to the caller
I am trying to add participants in a group chat but I am not getting any error but nothing is happening here is my code:
Meteor.methods({
addMember: function(groupId,email){
Groups.update({_id:groupId},
{$addToSet: {participants:{"emails":email}}}
);
}
});
My event:
Template.editGroup.events({
'click .add': function() {
var id = this._id;
swal({
title: "An input!",
text: "Add an email address:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Add email address"
},
function(email) {
if (email === false) return false;
if (email === "") {
swal.showInputError("You need to add email address!");
return false
}
Meteor.call("addMember",id,email)
})
}
})
The id is the first parameter of a meteor collection update.
See in: https://docs.meteor.com/api/collections.html#Mongo-Collection-update
try it
Meteor.methods({
addMember: function(groupId,email){
Groups.update(groupId,
{$addToSet: {participants:{"emails":email}}}
);
}
});
You should be using dot notation to update the emails field inside participants.
https://docs.mongodb.com/v3.2/core/document/#document-dot-notation
Just replace {$addToSet: {participants:{"emails":email}}} with
{$addToSet: {"participants.emails":email}}
I am new at this correct me if I'm wrong . I want to take the name data from the input with ng-model but i cant take the data at the onTap: function. I tried to alert $scope.name but it is empty doesnt work,then i tried $scope.name="" empty at the init but it doesnt change when the user writes his name.How can i get the name .Thank you.
`$scope.data = {
model: "Choose",
availableOptions: [
{id: '1', name: 'dummyText1'},
{id: '2', name: 'dummyText2'},
{id: '3', name: 'dummyText3'}
]
};`
var myPopup = $ionicPopup.show({
template:
'<div class="list list-inset">' +
'</label><label class="item item-input"><i class="icon ion-person placeholder-icon"></i>' +
'<input type="text" placeholder="Your name.." ng-model="name"></label>' +
'</div>' ,
title: 'Profile',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if ($scope.name != null) {
alert($scope.name);
e.preventDefault();
} else {
alert($scope.name);
}
}
}
]
});
here is the popup screenshot
Thank you again
I figured out with adding ng-change="foo(data)" to input ,now im able to use this data at scope .
Thank you.
EDIT: The question is no longer valid as I stopped using the NoUiSlider package. See my answer below to see what I've done for this.
I'm trying to have a live progress bar for each task and when I enter the page, I want the slider to have the start value from the collection field.
Currently it doesn't even show up. Once I change "start: progressNow" to "start:0", it only works on the client side and doesn't save/change anything on the DB.
Inside methods:
addTask: function (projectId, text, description, due, progress) {
check(projectId, String);
check(text, String);
if (!this.userId) {
throw new Meteor.Error(403, 'not-authorized');
}
Tasks.insert({
text: text,
createdAt: new Date(),
owner: this.userId,
username: Meteor.user().username || Meteor.user().profile.name,
projectId: projectId,
taskDescription: description,
due: due,
progress: 0
});
},
Event and rendered:
Template.task.events({
"change .slider": function () {
var progressVal = this.noUiSlider.value;
Tasks.update({
progress: progressVal
})
},
});
Template.task.rendered = function () {
var progressNow = return Tasks.findOne({_id: this._id}).progress;
this.$('.slider').noUiSlider({
start: progressNow,
connect: "lower",
step: 0,
format: wNumb({
decimals: 0,
}),
range: {
'smin': 0,
'max': 100
}
});
this.$('.slider').Link('lower').to(this.$('.range'));
};
Instead of using NoUiSlider package, I just made it with HTML5.
When a task is created, progress is automatically 0 (which is basically one line in task creation method.
Tasks.insert({
//other fields
progress: 0,
});
Simple HTML - {{progress}} is simply the progress field value.
<form>
<input type="range" value="{{progress}}" class="progress" name="progress" min="0" max="100">
</form>
<span class="spn-btn">{{progress}}</span>
Inside methods:
updateProgress: function(taskId, progress) {
Tasks.update(taskId,{
$set: { progress:progress}
});
}
Inside template events:
'change input[type="range"]': function (e,t) {
var progress = e.target.value;
Meteor.call("updateProgress", this._id, progress);
console.log('success!');
}
Cheers.