Skip to content

Commit 8bf18b3

Browse files
hernantzhernantz
committedNov 23, 2014
First attempt with marionette version
·
1.0.0
1 parent 7893840 commit 8bf18b3

File tree

3 files changed

+258
-74
lines changed

3 files changed

+258
-74
lines changed
 

‎app.js

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
window.App = {};
2+
window.sum = function (list) { return _.reduce(list, function (memo, num) { return memo + num; }, 0); };
3+
4+
App.thingstableTpl = _.template([
5+
'<h3>Things</h3>',
6+
'<table class="table">',
7+
' <thead>',
8+
' <tr>',
9+
' <th>Item</th>',
10+
' <th>$</th>',
11+
' <th></th>',
12+
' </tr>',
13+
' </thead>',
14+
' <tbody>',
15+
' </tbody>',
16+
' <tfoot>',
17+
' <tr>',
18+
' <td><strong>Total</strong></td>',
19+
' <td class="total">0</td>',
20+
' <td></td>',
21+
' </tr>',
22+
' </tfoot>',
23+
'</table>',
24+
'<button class="btn btn-default btn-machi btn-sm pull-right"><span class="glyphicon glyphicon-plus"></span> Moar!</button>'
25+
].join());
26+
27+
App.ppltableTpl = _.template([
28+
'<h3>People</h3>',
29+
'<table class="table">',
30+
' <thead>',
31+
' <tr>',
32+
' <th>Nickname</th>',
33+
' <% things.each(function (thing) { %> <th><%= thing.get(\'name\') %></th> <% }) %>',
34+
' <th>To Pay</th>',
35+
' <th>Paid</th>',
36+
' <th>Balance</th>',
37+
' <th></th>',
38+
' </tr>',
39+
' </thead>',
40+
' <tbody> </tbody>',
41+
' <tfoot>',
42+
' <tr>',
43+
' <td><strong class="tt" data-toggle="tooltip" data-placement="bottom" title="Pesos Por Pera">ppp</strong></td>',
44+
' <% things.each(function (thing) { %> <td><%= ppp(thing) %></td> <% }) %>',
45+
' <td></td>',
46+
' <td></td>',
47+
' <td></td>',
48+
' <td></td>',
49+
' </tr>',
50+
' </tfoot>',
51+
'</table>',
52+
'<button class="btn btn-default btn-machi btn-sm pull-right"><span class="glyphicon glyphicon-plus"></span> 1</button>'
53+
].join());
54+
55+
App.pplTmpl = _.template([
56+
'<td><input placeholder="Name" class="name" value="<%= name %>" /></td>',
57+
'<% things.each(function (thing) { %>',
58+
'<td><input type="checkbox" value="<%= thing.get(\'name\') %>" <% if (thing.containedIn(ownThings)) { %> checked <% } %> /></td>',
59+
'<% }) %>',
60+
'<td><%= toPay %></td>',
61+
'<td><input type="number" class="paid" value="<%= paid %>"></td>',
62+
'<td><%= balance %></td>',
63+
'<td><button type="button" class="close" aria-hidden="true">&times;</button></td>'
64+
].join());
65+
66+
App.thingTpl = _.template([
67+
'<td><input placeholder="Something" class="name" value="<%= name %>" /></td>',
68+
'<td><input type="number" class="cost" value="<%= cost %>" /></td>',
69+
'<td><button type="button" class="close" aria-hidden="true">&times;</button></td>'
70+
].join());
71+
72+
$(function () {
73+
var $pplData = $('#ppl-data'), $thingsData = $('#things-data'), $version = $('#version');
74+
75+
App.Things = Backbone.Collection.extend({
76+
model: Backbone.Model.extend({
77+
defaults: { 'name': '', 'cost': 0, },
78+
containedIn: function (list) { return _.contains(list, this.get('name')); }
79+
}),
80+
total: function () { return sum(this.pluck('cost')); },
81+
});
82+
83+
App.People = Backbone.Collection.extend({
84+
model: Backbone.Model.extend({ defaults: { 'name': '', 'paid': 0, ownThings: [] } }),
85+
});
86+
87+
App.ppl = new App.People(JSON.parse($pplData.val()));
88+
App.things = new App.Things(JSON.parse($thingsData.val()));
89+
90+
App.toJSON = function ($storage, data) { $storage.val(JSON.stringify(data.toJSON())); }
91+
App.title = function () { };
92+
App.dec = function (num) { return parseFloat(num.toFixed(2)) }
93+
App.base64 = function() { return 'data:text/html;base64,'+ window.btoa(document.documentElement.innerHTML) };
94+
App.ppp = function (thing) {
95+
var n = 0;
96+
App.ppl.each(function (p) { if (thing.containedIn(p.get('ownThings'))) { n++; } });
97+
return n ? App.dec(thing.get('cost') / n) : 0;
98+
};
99+
100+
App.toPay = function (p) {
101+
var total = 0;
102+
App.things.each(function (thing) { if (thing.containedIn(p.get('ownThings'))) { total += App.ppp(thing); } });
103+
return total;
104+
};
105+
106+
App.ThingRowView = Backbone.Marionette.ItemView.extend({
107+
collection: App.things,
108+
template: App.thingTpl,
109+
tagName: 'tr',
110+
events: {'click .close': 'rm', 'change input': 'update'},
111+
rm: function () { return this.collection.remove(this.model); },
112+
update: function () { this.model.set({'name': this.$('.name').val(), 'cost': parseFloat(this.$('.cost').val())}); }
113+
});
114+
115+
App.PplRowView = Backbone.Marionette.ItemView.extend({
116+
collection: App.ppl,
117+
things: App.things,
118+
template: App.pplTmpl,
119+
tagName: 'tr',
120+
events: {'click .close': 'rm', 'change input': 'update'},
121+
rm: function () { return this.collection.remove(this.model); },
122+
update: function () {
123+
var ownThings = [];
124+
this.$('input[type="checkbox"]:checked').each(function () { ownThings.push(this.value); });
125+
this.model.set({'name': this.$('.name').val(), 'paid': parseFloat(this.$('.paid').val()), 'ownThings': ownThings});
126+
},
127+
serializeData: function () {
128+
var toPay = App.toPay(this.model);
129+
var bal = App.dec(this.model.get('paid') - toPay);
130+
return _.extend({things: this.things, toPay: toPay, balance: bal}, this.model.toJSON());
131+
},
132+
});
133+
134+
App.ThingsView = Backbone.Marionette.CompositeView.extend({
135+
collection: App.things,
136+
childView: App.ThingRowView,
137+
childViewContainer: 'tbody',
138+
el: '#thingstable',
139+
template: App.thingstableTpl,
140+
events: {'click .btn-machi': 'add'},
141+
collectionEvents: {'change': 'setTotal', 'remove': 'render'},
142+
setTotal: function () { this.$('.total').text(this.collection.total()); },
143+
add: function () { this.collection.add({}); },
144+
onRender: function () { this.setTotal(); }
145+
});
146+
147+
App.PeopleView = Backbone.Marionette.CompositeView.extend({
148+
collection: App.ppl,
149+
childView: App.PplRowView,
150+
el: '#ppltable',
151+
childViewContainer: 'tbody',
152+
template: App.ppltableTpl,
153+
events: {'click .btn-machi': 'add'},
154+
collectionEvents: {'remove change': 'render'},
155+
initialize: function () { this.listenTo(App.things, 'add change remove', this.render); },
156+
setTotal: function () { this.$('.total').text(this.collection.total()); },
157+
add: function () { this.collection.add({}); },
158+
serializeData: function () { return _.extend({ things: App.things }, this.collection.toJSON()); },
159+
templateHelpers: { 'ppp': App.ppp },
160+
onRender: function () { App.toJSON($pplData, App.ppl); App.toJSON($thingsData, App.things); }
161+
});
162+
163+
App.ShareBtn = Backbone.View.extend({
164+
el: $('#share'),
165+
initialize: function () {
166+
this.listenTo(App.things, 'add change remove', this.render);
167+
this.listenTo(App.ppl, 'add change remove', this.render);
168+
},
169+
render: function () {
170+
var url = 'http://v.gd/create.php?format=simple&url=' + App.base64();// + '&shorturl=' + App.title();
171+
this.$el.attr('href', url);
172+
}
173+
});
174+
175+
//new README
176+
//release 2.0
177+
$('#save').on('click', function () { window.location = App.base64(); });
178+
179+
App.thingsView = new App.ThingsView().render();
180+
//App.peopleView = new App.PeopleView().render();
181+
//App.shareBtn = new App.ShareBtn().render();
182+
$('.tt').tooltip();
183+
});

‎index.html

+18-74
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,39 @@
11
<!DOCTYPE html>
2-
<html ng-app="MasUnoApp">
2+
<html>
33
<head>
44
<title>+1</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link href="css/bootstrap.min.css" rel="stylesheet">
7-
<link href="css/styles.css" rel="stylesheet">
86
<meta charset="utf-8">
9-
<script src="js/angular.min.js"></script>
10-
<script src="js/almuerzo.js"></script>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="styles.css">
119
</head>
12-
<body ng-controller="Almuerzo" data-ng-init="init()">
13-
10+
<body>
1411
<div class="container">
1512
<div class="header">
1613
<h2><a href="index.html"><i class="glyphicon glyphicon-plus"></i> 1</a></h2>
1714
</div>
1815

19-
<div class="row">
20-
<h3>Comidas</h3>
21-
22-
<table class="table">
23-
<thead>
24-
<tr>
25-
<th>Item</th>
26-
<th>Precio</th>
27-
<th></th>
28-
</tr>
29-
</thead>
30-
<tbody>
31-
<tr ng-repeat="comida in comidas">
32-
<td><input placeholder="Comida" ng-model="comida.name"></td>
33-
<td><input type="number" ng-model="comida.cost"></td>
34-
<td><button ng-click="menosComida($index)" type="button" class="close" aria-hidden="true">&times;</button></td>
35-
</tr>
36-
<tr>
37-
<td><strong>Total</strong></td>
38-
<td>{{ costoTotal() }}</td>
39-
<td></td>
40-
</tr>
41-
<tabody>
42-
</table>
43-
<button ng-click="masComida()" class="btn btn-default btn-machi btn-sm pull-right"><span class="glyphicon glyphicon-plus"></span> Moar!</button>
44-
</div>
45-
46-
<div class="row">
47-
<h3>Comensales</h3>
48-
49-
<table class="table">
50-
<thead>
51-
<tr>
52-
<th>Nombre</th>
53-
<th ng-repeat="comida in comidas">{{ comida.name }}</th>
54-
<th>A pagar</th><th>Pagado</th><th>Vuelto</th>
55-
<th></th>
56-
</tr>
57-
</thead>
58-
<tbody>
59-
<tr ng-repeat="comensal in comensales">
60-
<td><input placeholder="Comensal" ng-model="comensal.name"></td>
61-
<td ng-repeat="comida in comidas"><input type="checkbox" ng-model="comensal.comidas[comida.name]"></td>
62-
<td>{{ aPagar($index) }}</td>
63-
<td><input type="number" ng-model="comensal.paid"></td>
64-
<td>{{ comensal.paid - aPagar($index)}}</td>
65-
<td><button ng-click="menosComensales($index)" type="button" class="close" aria-hidden="true">&times;</button></td>
66-
</tr>
67-
<tr>
68-
<td><strong data-toggle="tooltip" data-placement="bottom" title="Pesos Por Pera">ppp</strong></td>
69-
<td ng-repeat="comida in comidas">{{ precioPorPera($index) }}</td>
70-
<td></td>
71-
<td></td>
72-
<td></td>
73-
<td></td>
74-
</tr>
75-
<tabody>
76-
</table>
77-
78-
<button ng-click="masComensales()" class="btn btn-default btn-machi btn-sm pull-right"><span class="glyphicon glyphicon-plus"></span> 1</button>
79-
</div>
16+
<div class="row" id="thingstable"> </div>
17+
<div class="row" id="ppltable"> </div>
8018

8119
<div class="row">
82-
<button ng-click="guardar()" class="btn btn-default btn-machi"><i class="glyphicon glyphicon-floppy-disk"></i> Guardar</button>
83-
<a ng-show="mostrarCompartir()" target="_blank" href="http://tinyurl.com/api-create.php?url={{ compartirUrl() | escape }}" class="btn btn-default btn-machi"><i class="glyphicon glyphicon-share"></i> Compartir</a>
20+
<button id="save" class="btn btn-default btn-machi"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
21+
<a id="share" href="#" target="_blank" class="btn btn-default btn-machi"><i class="glyphicon glyphicon-share"></i> Share</a>
8422
</div>
8523
</div>
8624

8725
<div class="container footer">
88-
<p><i class="glyphicon glyphicon-leaf" tooltip="" data-toggle="tooltip" data-placement="top" title="Veganos al poder!"></i></p>
26+
<p><i class="tt glyphicon glyphicon-leaf" data-toggle="tooltip" data-placement="top" title="Veganos al poder!"></i></p>
8927
</div>
9028

91-
<script src="js/jquery-2.0.3.min.js"></script>
92-
<script src="js/bootstrap.min.js"></script>
93-
</script>
29+
<input type="hidden" id="things-data" value='[{"name":"Sandwich de Bondiola","cost":113.25},{"name":"Gaseosa","cost":25}]' />
30+
<input type="hidden" id="ppl-data" value='[{"name":"e_chango","paid":100, "ownThings":["Gaseosa"]},{"name":"j2gatti","paid":50, "ownThings":["Gaseosa"]},{"name":"pdelboca","paid":0}]' />
31+
32+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
33+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
34+
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
35+
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.min.js"></script>
37+
<script type="text/javascript" src="app.js"></script>
9438
</body>
9539
</html>

‎styles.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
background: #ED1848;
3+
color: white;
4+
}
5+
6+
.row {
7+
padding: 25px 0;
8+
}
9+
10+
.header {
11+
text-align: center;
12+
}
13+
14+
.header i {
15+
font-size: 0.7em;
16+
}
17+
18+
.header a {
19+
text-decoration: none;
20+
color: white;
21+
}
22+
23+
.header a:hover {
24+
text-shadow: rgba(0, 0, 0, 0.2) 0px 3px;
25+
}
26+
27+
input {
28+
background: rgba(0, 0, 0, 0.1);
29+
border-radius: 3px;
30+
box-shadow: none;
31+
color: white;
32+
border: 0;
33+
padding: 5px;
34+
}
35+
36+
.btn-machi {
37+
color: white;
38+
font-weight: bold;
39+
background-image: linear-gradient(to bottom, #EA0536, #911832);
40+
}
41+
42+
43+
.btn-machi:hover {
44+
color: white;
45+
box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset;
46+
background-image: linear-gradient(to bottom, red, #911832);
47+
}
48+
49+
.btn-machi:focus, .btn-machi:active {
50+
color: white;
51+
background: #EA0536;
52+
}
53+
54+
.footer {
55+
text-align: right;
56+
margin-top: 60px;
57+
}

0 commit comments

Comments
 (0)
Please sign in to comment.