Skip to content

Instantly share code, notes, and snippets.

@subkitio

subkitio/todo-app.tpl-ejs.css

Last active January 10, 2016 05:28
Show Gist options
  • Save subkitio/04a6eb615bdda66e63a7 to your computer and use it in GitHub Desktop.
Save subkitio/04a6eb615bdda66e63a7 to your computer and use it in GitHub Desktop.
Download ZIP
Example Todo-App
Raw
todo-app.tpl-ejs.css
.navbar-fixed, .nav-wrapper, nav {
height: 56px;
}
.side-nav {
top: 56px;
}
.collection {
margin: 0px;
}
.preloader-container {
background-color: rgba(255, 255, 255, .5);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10000;
}
.preloader-wrapper {
margin: auto auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.large-text {
font-size: 2rem;
}
.warning {
background-color: red;
}
main {
padding: 10px;
}
Raw
todo-app.tpl-ejs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Subkits Todos</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet" />
<link href="//subkitio.service.subkit.io/todo-app.css" rel="stylesheet" />
</head>
<body ng-app="app">
<header class="navbar-fixed">
<nav>
<div class="nav-wrapper grey darken-4">
<a href="https://subkit.io" class="brand-logo center" target="_blank">SK Todos</a>
<a href="#" data-activates="mobile-menu" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<ul class="right hide-on-med-and-down">
<li><a href="https://subkit.io/doc" target="_blank">Docs</a></li>
<li><a href="https://gist.github.com/subkitio/04a6eb615bdda66e63a7" target="_blank">Gist</a></li>
</ul>
<ul class="side-nav" id="mobile-menu">
<li><a href="https://subkit.io/doc" target="_blank">Docs</a></li>
<li><a href="https://gist.github.com/subkitio/04a6eb615bdda66e63a7" target="_blank">Gist</a></li>
</ul>
</div>
</nav>
</header>
<main ng-controller="MainCtrl">
<section>
<div>
<span class="large-text">My Todos</span>
<a class="secondary-content">
<i class="small mdi-navigation-refresh orange-text text-darken-2" ng-click="refresh()"></i>
</a>
<a class="secondary-content">
<i class="small mdi-action-delete orange-text text-darken-2" ng-click="remove()"></i>
</a>
</div>
<div>
<input type="text" ng-model="newTodo.description" ng-blur="add(newTodo)" />
</div>
</section>
<section>
<ul class="collection">
<li class="collection-item" ng-repeat="todo in todos track by $index">
<div>
<input class="with-gap orange-text" type="checkbox" id="{{$index}}" ng-checked="todo.isDone" ng-click="update(todo)"/>
<label for="{{$index}}">
<span class="truncate">{{todo.description}}</span>
</label>
<a class="secondary-content">
<i class="small mdi-action-delete red-text text-darken-2" ng-click="remove(todo)"></i>
</a>
</div>
</li>
</ul>
</section>
<section class="preloader-container" ng-show="updating" class="ng-hide">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-red-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</section>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//subkitio.service.subkit.io/todo-app.js"></script>
</body>
</html>
Raw
todo-app.tpl-ejs.js
$(function(){
$('.button-collapse').sideNav();
});
(function(){
'use strict';
angular.module('app', [])
.controller('MainCtrl', function ($scope, $http) {
var BASE_URL = 'https://subkitio.service.subkit.io/todos/';
$scope.updating = false;
$scope.get = get;
$scope.refresh = get;
$scope.add = add;
$scope.update = update;
$scope.remove = remove;
$scope.todos = [];
get();
function get(){
$scope.updating = true;
$http
.get(BASE_URL)
.then(function(result){
$scope.todos = result.data;
})
.catch(failure)
.finally(function(){
$scope.updating = false;
});
}
function add(itm){
if(!itm.description) return;
$http
.post(BASE_URL, {
description: itm.description,
isDone: false
})
.then(itm.reset)
.then(get)
.catch(failure)
.finally(function(){
itm.description = '';
});
}
function update(itm){
$http
.put(BASE_URL + itm.id, {
id: itm.id,
isDone: !itm.isDone,
description: itm.description
})
.then(get)
.catch(failure);
}
function remove(itm){
$http
.delete(itm ? BASE_URL + itm.id : BASE_URL)
.then(get)
.catch(failure);
}
function failure(error){
Materialize.toast(error.message, 4000, 'warning');
}
});
})();
Raw
todos.task.js
const uuid = require('node-uuid');
const _ = require('lodash');
state.todos = state.todos || {};
this.GET = get;
this.POST = add;
this.PUT = change;
this.DELETE = remove;
this[req.method](req.params.id, req.body);
function get(id){
if(id && !state.todos[id]) return res.status(404).end();
if(id && state.todos[id]) return res.send(state.todos[id]);
res.send(_.toArray(state.todos));
}
function add(id, todo){
todo.id = id || uuid.v4();
state.todos[todo.id] = todo;
res.status(201).send(todo);
}
function change(id, todo){
if(!state.todos[id]) return res.status(404).end();
state.todos[id] = todo;
res.status(202).send(todo);
}
function remove(id){
if(id && !state.todos[id]) return res.status(404).end();
if(!id){
state.todos = {};
return res.status(204).end();
}
delete state.todos[id];
res.status(204).end();
}
@subkitio
Copy link
Author

How it looks like? Visit http://subkitio.service.subkit.io/todo-app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment