NoLog.cz/decide.nolog.cz
6
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
decide.nolog.cz/index.html

323 lines
9.7 KiB
HTML
Raw Normal View History

prototype
2013-10-22 11:16:08 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
option to restrict answers on a defined list of possibilities
2013-11-01 00:56:51 +01:00
<title>Croodle</title>
prototype
2013-10-22 11:16:08 +02:00
</head>
<body>
rewrite client in EmberJS Starting to rewrite client in EmberJS. Main features, which are not implemented yet: * api.php is not compatible with Ember Data yet. Data is stored in Locale Storage of the browser in this stage of development. * Encryption / decryption of data is not implemented yet. * There is an error on loading stored data due to embedded objects. Working on a fix, but loading a saved poll is not working for this reason yet. * Adding user to a poll is not implemented yet. * Any features for user interface like datepicker are not implemented yet. To test application you have to open #/create in browser. A route for index is not defined yet.
2013-12-30 17:01:24 +01:00
<!--
TEMPLATES
-->
<!-- application template -->
<script type="text/x-handlebars">
<div class="main">
<h1>Croodle</h1>
{{outlet}}
</div>
</script>
<!-- poll template -->
<script type="text/x-handlebars" id="poll">
<h2>title</h2>
<p>{{title}}</p>
<h2>description</h2>
<p>{{description}}</p>
<h2>type</h2>
<p>{{type}}</p>
<h2>options and user</h2>
<table>
<thead>
<tr>
<td>user</td>
{{#each option in options}}
<td>{{option.title}}</td>
{{/each}}
<td>&nbsp;</td>
</tr>
</thead>
<tbody>
{{#each user in users}}
<tr>
<td>{{user.name}}</td>
{{#each selection in selections}}
<td>{{selection.value}}</td>
{{/each}}
<td>&nbsp;</td>
</tr>
{{/each}}
<tr class='newUser'>
<td>{{input value=newUserName}}</td>
{{#each option in options}}
<td>{{input value=newUserSelection}}</td>
{{/each}}
<td><button {{action "save"}}> ok </button></td>
</tr>
</tbody>
</table>
<h2>creationDate</h2>
<p>{{creationDate}}</p>
</script>
<!-- create templates -->
<script type="text/x-handlebars" id="create">
{{outlet}}
</script>
<script type="text/x-handlebars" id="create/index">
<p>
type:<br/>
{{view Ember.Select
contentBinding="App.Types"
optionValuePath="content.id"
optionLabelPath="content.label"
valueBinding="type"}}
</p>
<p><button {{action "save"}}> ok </button></p>
</script>
<script type="text/x-handlebars" id="create/meta">
<p>title:<br/>{{input value=title}}</p>
<p>description:<br/>{{input value=description}}</p>
<p><button {{action "save"}}> ok </button></p>
</script>
<script type="text/x-handlebars" id="create/options">
<p>options<br/>
{{#each option in options}}
{{option.title}}<br/>
{{/each}}
</p>
<p>{{input value=newOptionTitle}} <button {{action "addOption"}}> add option </button></p>
<p><button {{action "save"}}> ok </button></p>
</script>
<script type="text/x-handlebars" id="create/settings">
<p>settings</p>
<p><button {{action "save"}}> ok </button></p>
</script>
<!-- DEPEDENCIES -->
<script src="lib/jquery-2.0.3.js"></script>
<script src="lib/handlebars-v1.2.0.js"></script>
<script src="lib/ember.js"></script>
<script src="lib/ember-data.js"></script>
<script src="lib/localstorage_adapter.js"></script>
<!-- EMBER APP CODE -->
<script type="text/javascript">
// app initialization
window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
// adapter initialization
App.ApplicationAdapter = DS.LSAdapter;
/*
* models
*/
// poll model
App.Poll = DS.Model.extend({
title : DS.attr('string'),
description : DS.attr('string', {defaultValue: ''}),
type : DS.attr('string'),
options : DS.hasMany('option', {async: true}),
users : DS.hasMany('user', {async: true}),
creationDate : DS.attr('date')
});
// option model
// used by poll model
App.Option = DS.Model.extend({
title : DS.attr('string')
});
// user model
// used by poll model
App.User = DS.Model.extend({
poll : DS.belongsTo('poll'),
name : DS.attr('string'),
selections : DS.hasMany('selection', {async: true, embedded: 'allways'}),
creationDate : DS.attr('date')
});
// selection model
// used by user model
App.Selection = DS.Model.extend({
option : DS.belongsTo('option'),
value : DS.attr('string')
});
App.Types = [
Ember.Object.create({
id : "FindADate",
label : "Find a date"
}),
Ember.Object.create({
id : "MakeAPoll",
label : "Make a poll"
})
];
/*
* routes
*/
// defining routes of app
App.Router.map(function(){
this.route('poll', { path: '/poll/:poll_id' });
this.resource('create', function(){
this.route('meta');
this.route('options');
this.route('settings');
});
});
App.CreateRoute = Ember.Route.extend({
model: function(){
return this.store.createRecord('poll', {
creationDate : new Date()
});
}
});
App.CreateIndexRoute = Ember.Route.extend({
model: function(){
return this.modelFor('create');
}
});
App.CreateMetaRoute = Ember.Route.extend({
model: function(){
return this.modelFor('create');
},
// redirect to create/index if type is not set
afterModel: function(create){
if (create.get('type') === undefined) {
this.transitionTo('create.index');
}
}
});
App.CreateOptionsRoute = Ember.Route.extend({
model: function(){
return this.modelFor('create');
},
// redirect to create/meta if title is not set
afterModel: function(create){
if (create.get('title') === undefined) {
this.transitionTo('create.meta');
}
}
});
App.CreateSettingsRoute = Ember.Route.extend({
model: function(){
return this.modelFor('create');
},
// redirect to create/options if less then two options are defined
afterModel: function(create){
if (create.get('options.length') < 2) {
this.transitionTo('create.options');
}
}
});
/*
* controller
*/
App.CreateIndexController = Ember.ObjectController.extend({
actions: {
save: function(){
// redirect to CreateMeta
this.transitionToRoute('create.meta');
}
}
});
App.CreateMetaController = Ember.ObjectController.extend({
actions: {
save: function(){
// redirect to CreateOptions
this.transitionToRoute('create.options');
}
}
});
App.CreateOptionsController = Ember.ObjectController.extend({
actions: {
addOption: function(){
// create new option
var newOptionId = this.get('model.options.length') + 1,
newOption = this.store.createRecord('option', {
id : newOptionId,
title : this.get('newOptionTitle')
});
// assign it to poll
this.get('model.options').pushObject(newOption);
// clear newOptionTitle input field
this.set('newOptionTitle', '');
},
save: function(){
// redirect to CreateSettings
this.transitionToRoute('create.settings');
}
}
});
App.CreateSettingsController = Ember.ObjectController.extend({
actions: {
save: function(){
// save poll
this.get('model').save();
// redirect to new poll
this.transitionToRoute('poll', this.get('model'));
}
}
});
App.PollController = Ember.ObjectController.extend({
actions: {
save: function(){
// push new user to store
var newUser = this.store.createRecord('user', {
name : this.get('newUserName'),
creationDate : new Date()
});
// push new selections to store and attend them to user
console.log(this.get('newUserSelection'));
// save new user
this.get('model.users').pushObject(newUser);
}
}
});
/*
* views
*/
App.PollSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
options: {embedded: 'always'}
}
});
</script>
prototype
2013-10-22 11:16:08 +02:00
</body>
</html>
Reference in a new issue Copy permalink