mirror of
https://github.com/fazo96/homework.git
synced 2025-01-10 12:14:22 +01:00
implemented notifications
This commit is contained in:
fazo96
parent
eb081dd3cf
commit
10cfc2d638
80
app.coffee
80
app.coffee
@ -22,53 +22,67 @@ if Meteor.isServer
|
||||
notes.find( { userId: @userId } ) unless not @userId
|
||||
|
||||
if Meteor.isClient
|
||||
|
||||
Meteor.subscribe "my-notes"
|
||||
|
||||
# Notes template
|
||||
Template.notes.notes = ->
|
||||
notes.find().fetch()
|
||||
Template.notes.notes = -> notes.find().fetch()
|
||||
Template.notes.events {
|
||||
'click .delete': -> notes.remove @_id
|
||||
'click .edit': ->
|
||||
Template.edit.note = this; console.log Template.edit.note
|
||||
UI.render Template.edit
|
||||
'click .close-note': -> notes.remove @_id
|
||||
'click .edit': -> Session.set 'note', this
|
||||
}
|
||||
|
||||
# Note Editor TODO: Make Reactive
|
||||
Template.edit.show = ->
|
||||
console.log Template.edit.note isnt undefined
|
||||
Template.edit.note isnt undefined
|
||||
Template.edit.note = undefined
|
||||
Template.edit.events {
|
||||
'click .close': -> Template.edit.note = undefined
|
||||
# Note Editor
|
||||
Template.editor.show = -> Session.get 'note'
|
||||
Template.editor.events {
|
||||
'click .close': -> Session.set 'note', undefined
|
||||
'click .save': -> null
|
||||
}
|
||||
|
||||
# Auth
|
||||
Template.auth.alerts = []
|
||||
Template.auth.errCallback = (err) ->
|
||||
Template.auth.alert { msg: err.reason }
|
||||
|
||||
# TODO: make reactive
|
||||
Template.auth.alert = (add,remove) ->
|
||||
if add then Template.auth.alerts.push add
|
||||
if remove
|
||||
Template.auth.alerts.splice Template.auth.alerts.indexOf(remove), 1
|
||||
Template.auth.alerts
|
||||
|
||||
# Notifications
|
||||
alerts = []
|
||||
alertDep = new Deps.Dependency
|
||||
errCallback = (err) -> notify { msg: err.reason }
|
||||
# Show a notification
|
||||
notify = (data) ->
|
||||
alerts.push {
|
||||
title: data.title
|
||||
msg: data.msg
|
||||
id: data.id or alerts.length
|
||||
type: data.type or "danger"
|
||||
}; alertDep.changed()
|
||||
# Clear all notifications
|
||||
clearNotifications = -> alerts.clear(); alertDep.changed()
|
||||
# Get all the notifications
|
||||
Template.notifications.notification = -> alertDep.depend(); alerts
|
||||
Template.notifications.events {
|
||||
'click .close-notification': (e,template) ->
|
||||
alerts.splice alerts.indexOf(this), 1
|
||||
alertDep.changed()
|
||||
}
|
||||
pressLogin = (template) ->
|
||||
mail = template.find('#mail').value; pass = template.find('#pass').value
|
||||
Meteor.loginWithPassword mail, pass, (err) ->
|
||||
errCallback err; if Meteor.userId() then clearNotifications()
|
||||
# Login and Register
|
||||
Template.auth.events {
|
||||
'click .delete': (e,template) -> Template.auth.alert null, this
|
||||
'keypress .login': (e,template) ->
|
||||
mail = template.find('#mail').value; pass = template.find('#pass').value
|
||||
if e.keyCode is 13 # Login
|
||||
Meteor.loginWithPassword mail, pass, Template.auth.errCallback
|
||||
if e.keyCode is 13 then pressLogin template
|
||||
# Login
|
||||
'click #login': (e,template) ->
|
||||
mail = template.find('#mail').value; pass = template.find('#pass').value
|
||||
Meteor.loginWithPassword mail, pass, Template.auth.errCallback
|
||||
'click #login': (e,template) -> pressLogin template
|
||||
# Register
|
||||
'click #register': (e,template) ->
|
||||
mail = template.find('#mail').value; pass = template.find('#pass').value
|
||||
Accounts.createUser { email: mail, password: pass }, Template.auth.errCallback
|
||||
if not mail or mail.contains '@' is no or mail.endsWith '.' is yes or mail.endsWith '@' is yes
|
||||
notify { msg: "Invalid Email" }
|
||||
else
|
||||
try
|
||||
Accounts.createUser {
|
||||
email: mail,
|
||||
password: pass
|
||||
}, (e) -> errCallback e; if Meteor.userId() then clearNotifications()
|
||||
catch err
|
||||
notify { msg: err }
|
||||
}
|
||||
# User Logged In
|
||||
Template.userInfo.events {
|
||||
|
||||
44
index.html
44
index.html
@ -10,10 +10,11 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="center-block" id="quicknotes">
|
||||
{{> edit}} {{> notes}} {{#if currentUser}}
|
||||
<div align="center"> {{> userInfo}} </div>
|
||||
{{#if currentUser}}
|
||||
{{> editor}} {{> notes}} {{> userInfo}}
|
||||
{{else}}
|
||||
{{> auth}}
|
||||
{{/if}}
|
||||
{{#unless currentUser}} <div align="center">{{> auth}}</div>{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -22,45 +23,43 @@
|
||||
<ul class="list-group">
|
||||
{{#each notes}}
|
||||
<li class="note list-group-item">
|
||||
<button type="button" class="edit close"><i class="fa fa-pencil-square-o"></i></button>
|
||||
<button type="button" class="edit-note close"><i class="fa fa-pencil-square-o"></i></button>
|
||||
{{content}}
|
||||
<button type="button" class="delete close">×</button>
|
||||
<button type="button" class="close-note close">×</button>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<template name="auth">
|
||||
<p align="center">
|
||||
Register a new Account or login
|
||||
</p>
|
||||
{{#each alerts}}
|
||||
<div class="alert alert-warning">
|
||||
{{msg}}
|
||||
<button type="button" class="delete close">×</button>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div align="center">
|
||||
<p>Register a new Account or login</p>
|
||||
{{> notifications }}
|
||||
<input type="text" id="mail" class="form-control login" placeholder="Email">
|
||||
<input type="password" id="pass" class="form-control login" placeholder="Password">
|
||||
<br>
|
||||
<p>Password must be at least 8 characters. Email must be a valid email</p>
|
||||
<button type="button" id="register" class="btn-login btn btn-info">Register</button>
|
||||
<button type="button" id="login" class="btn-login btn btn-info">Login</button>
|
||||
<button type="button" id="register" class="btn-auth btn btn-info">Register</button>
|
||||
<button type="button" id="login" class="btn-auth btn btn-info">Login</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="userInfo">
|
||||
<div align="center">
|
||||
<input type="text" id="newNote" class="form-control" placeholder="Add new note">
|
||||
<p>Logged in as {{in}}</p>
|
||||
<button type="button" id="logout" class="btn btn-danger">Logout</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="edit">
|
||||
<template name="editor">
|
||||
{{> notifications }}
|
||||
{{#if note}}
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<input type="text" class="form-control title" placeholder="Title">
|
||||
<button type="button" class="close">×</button>
|
||||
<button type="button" class="close close-editor">×</button>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
@ -69,3 +68,12 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
<template name="notifications">
|
||||
{{#each notification}}
|
||||
<div class="alert alert-{{type}}">
|
||||
<p align="center">{{msg}}</p>
|
||||
<button type="button" class="close close-notification">×</button>
|
||||
</div>
|
||||
{{/each}}
|
||||
</template>
|
||||
|
||||
45
style.css
45
style.css
@ -1,8 +1,9 @@
|
||||
.page-header {
|
||||
/* Generics */
|
||||
input {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
input {
|
||||
.page-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -10,27 +11,41 @@ input {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
#quicknotes {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.delete {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.close {
|
||||
margin-right: 5px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.edit {
|
||||
clear: right;
|
||||
/* Custom Classes */
|
||||
|
||||
.edit-note {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-auth {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.close-note {
|
||||
float: right;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.close-notification{
|
||||
float: right;
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
.area {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* IDs */
|
||||
|
||||
#quicknotes {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#newNote {
|
||||
max-width: 250px;
|
||||
margin-bottom: 10px;
|
||||
@ -39,7 +54,3 @@ input {
|
||||
#mail {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user