fazo96/homework
1
0
Fork 0
mirror of https://github.com/fazo96/homework.git synced 2025-01-24 14:24:20 +01:00
Code Issues Releases Wiki Activity

implemented notifications

Browse Source
This commit is contained in:
fazo96 2014-05-26 16:07:48 +02:00
parent eb081dd3cf
commit 10cfc2d638
3 changed files with 110 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app.coffee
View File

@ -22,53 +22,67 @@ if Meteor.isServer
notes.find( { userId: @userId } ) unless not @userId notes.find( { userId: @userId } ) unless not @userId
if Meteor.isClient if Meteor.isClient
Meteor.subscribe "my-notes" Meteor.subscribe "my-notes"
# Notes template # Notes template
Template.notes.notes = -> Template.notes.notes = -> notes.find().fetch()
notes.find().fetch()
Template.notes.events { Template.notes.events {
'click .delete': -> notes.remove @_id 'click .close-note': -> notes.remove @_id
'click .edit': -> 'click .edit': -> Session.set 'note', this
Template.edit.note = this; console.log Template.edit.note
UI.render Template.edit
} }
# Note Editor TODO: Make Reactive # Note Editor
Template.edit.show = -> Template.editor.show = -> Session.get 'note'
console.log Template.edit.note isnt undefined Template.editor.events {
Template.edit.note isnt undefined 'click .close': -> Session.set 'note', undefined
Template.edit.note = undefined
Template.edit.events {
'click .close': -> Template.edit.note = undefined
'click .save': -> null 'click .save': -> null
} }
# Auth # Notifications
Template.auth.alerts = [] alerts = []
Template.auth.errCallback = (err) -> alertDep = new Deps.Dependency
Template.auth.alert { msg: err.reason } errCallback = (err) -> notify { msg: err.reason }
# Show a notification
# TODO: make reactive notify = (data) ->
Template.auth.alert = (add,remove) -> alerts.push {
if add then Template.auth.alerts.push add title: data.title
if remove msg: data.msg
Template.auth.alerts.splice Template.auth.alerts.indexOf(remove), 1 id: data.id or alerts.length
Template.auth.alerts 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 { Template.auth.events {
'click .delete': (e,template) -> Template.auth.alert null, this
'keypress .login': (e,template) -> 'keypress .login': (e,template) ->
mail = template.find('#mail').value; pass = template.find('#pass').value if e.keyCode is 13 then pressLogin template
if e.keyCode is 13 # Login
Meteor.loginWithPassword mail, pass, Template.auth.errCallback
# Login # Login
'click #login': (e,template) -> 'click #login': (e,template) -> pressLogin template
mail = template.find('#mail').value; pass = template.find('#pass').value
Meteor.loginWithPassword mail, pass, Template.auth.errCallback
# Register # Register
'click #register': (e,template) -> 'click #register': (e,template) ->
mail = template.find('#mail').value; pass = template.find('#pass').value 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 # User Logged In
Template.userInfo.events { Template.userInfo.events {

58
index.html
View File

@ -10,10 +10,11 @@
</h1> </h1>
</div> </div>
<div class="center-block" id="quicknotes"> <div class="center-block" id="quicknotes">
{{> edit}} {{> notes}} {{#if currentUser}} {{#if currentUser}}
<div align="center"> {{> userInfo}} </div> {{> editor}} {{> notes}} {{> userInfo}}
{{else}}
{{> auth}}
{{/if}} {{/if}}
{{#unless currentUser}} <div align="center">{{> auth}}</div>{{/unless}}
</div> </div>
</div> </div>
</body> </body>
@ -22,45 +23,43 @@
<ul class="list-group"> <ul class="list-group">
{{#each notes}} {{#each notes}}
<li class="note list-group-item"> <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}} {{content}}
<button type="button" class="delete close">&times;</button> <button type="button" class="close-note close">&times;</button>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</template> </template>
<template name="auth"> <template name="auth">
<p align="center"> <div align="center">
Register a new Account or login <p>Register a new Account or login</p>
</p> {{> notifications }}
{{#each alerts}} <input type="text" id="mail" class="form-control login" placeholder="Email">
<div class="alert alert-warning"> <input type="password" id="pass" class="form-control login" placeholder="Password">
{{msg}} <br>
<button type="button" class="delete close">&times;</button> <p>Password must be at least 8 characters. Email must be a valid email</p>
</div> <button type="button" id="register" class="btn-auth btn btn-info">Register</button>
{{/each}} <button type="button" id="login" class="btn-auth btn btn-info">Login</button>
<input type="text" id="mail" class="form-control login" placeholder="Email"> </div>
<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>
</template> </template>
<template name="userInfo"> <template name="userInfo">
<input type="text" id="newNote" class="form-control" placeholder="Add new note"> <div align="center">
<p>Logged in as {{in}}</p> <input type="text" id="newNote" class="form-control" placeholder="Add new note">
<button type="button" id="logout" class="btn btn-danger">Logout</button> <p>Logged in as {{in}}</p>
<button type="button" id="logout" class="btn btn-danger">Logout</button>
</div>
</template> </template>
<template name="edit"> <template name="editor">
{{> notifications }}
{{#if note}} {{#if note}}
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<input type="text" class="form-control title" placeholder="Title"> <input type="text" class="form-control title" placeholder="Title">
<button type="button" class="close">&times;</button> <button type="button" class="close close-editor">&times;</button>
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
@ -69,3 +68,12 @@
</div> </div>
{{/if}} {{/if}}
</template> </template>
<template name="notifications">
{{#each notification}}
<div class="alert alert-{{type}}">
<p align="center">{{msg}}</p>
<button type="button" class="close close-notification">&times;</button>
</div>
{{/each}}
</template>

49
style.css
View File

@ -1,36 +1,51 @@
.page-header { /* Generics */
text-align: center;
}
input { input {
text-align:center; text-align:center;
} }
.page-header {
text-align: center;
}
.container { .container {
max-width: 700px; max-width: 700px;
} }
#quicknotes {
max-width: 500px;
}
.delete {
margin-top: -2px;
}
.close { .close {
margin-right: 5px; clear:both;
} }
.edit { /* Custom Classes */
clear: right;
.edit-note {
float: left; float: left;
margin-right: 10px;
}
.btn-auth {
width: 100px;
}
.close-note {
float: right;
margin-top: -24px;
}
.close-notification{
float: right;
margin-top: -22px;
} }
.area { .area {
resize: none; resize: none;
} }
/* IDs */
#quicknotes {
max-width: 500px;
}
#newNote { #newNote {
max-width: 250px; max-width: 250px;
margin-bottom: 10px; margin-bottom: 10px;
@ -39,7 +54,3 @@ input {
#mail { #mail {
margin-bottom: 10px; margin-bottom: 10px;
} }
.btn-login {
width: 100px;
}