a542c46a12
Therefore has to move creation of new user from view to controller. ember-validations had problems with views. Removed not working validation of newUserSelections temporary. isValid is false until a property observed by ember-validations got changed; therefore form is not valid until username got changed even if anonymous users are allowed. Will be fixed by validation on new user selections.
355 lines
No EOL
15 KiB
HTML
355 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Croodle</title>
|
|
|
|
<link href="css/normalize.css" rel="stylesheet">
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/datepicker3.css" rel="stylesheet">
|
|
<link href="css/croodle.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!--
|
|
TEMPLATES
|
|
-->
|
|
|
|
<!-- application template -->
|
|
<script type="text/x-handlebars">
|
|
<div class="container-fluid">
|
|
<h1>Croodle</h1>
|
|
{{outlet}}
|
|
</div>
|
|
</script>
|
|
|
|
<!-- index template -->
|
|
<script type="text/x-handlebars" id="index">
|
|
<div class="index">
|
|
|
|
<div class="box teaser">
|
|
<h2>
|
|
Croodle simplifies scheduling and decision-making ...<br/>
|
|
... while keeping your data private
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<div class="box features">
|
|
<h3>Features</h3>
|
|
<ul>
|
|
<li>
|
|
Easily schedule a date or make a poll with as much
|
|
people as you like.
|
|
</li>
|
|
<li>
|
|
All your private data is encrypted inside your
|
|
browser.
|
|
So even the server doesn't know what your schedule
|
|
or poll is about.
|
|
</li>
|
|
<li>
|
|
Define as much options as you like. Select dates
|
|
via calendar or define your options as free text.
|
|
</li>
|
|
<li>
|
|
Use pre defined answer options like <i>yes</i>,
|
|
<i>no</i>, <i>maybe</i> or allow your user to enter
|
|
free text.
|
|
</li>
|
|
<li>
|
|
An automatically updated evaluation allways gives you
|
|
an overview which options are preferred.
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="have-a-try">
|
|
<span class="glyphicon glyphicon-share-alt"></span>
|
|
{{#link-to 'create'}}have a try right now{{/link-to}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="box features">
|
|
<h3>Become your own hoster</h3>
|
|
<p>
|
|
You don't have to trust our server. You could easily
|
|
host croodle yourself. All you need is a web space
|
|
with PHP and SSL encryption enabled. You find the
|
|
source code and installation instructions on
|
|
<a href="https://github.com/jelhan/croodle">GitHub</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- loading template -->
|
|
<script type="text/x-handlebars" id="loading">
|
|
<div id="loading" class="box">
|
|
<div class="loading-animation-container">
|
|
<div id="loading-animation-circle-1" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-2" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-3" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-4" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-5" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-6" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-7" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-8" class="loading-animation-circle"></div>
|
|
</div>
|
|
loading your poll . . .
|
|
</div>
|
|
</script>
|
|
|
|
<!-- error template -->
|
|
<script type="text/x-handlebars" id="error">
|
|
<div class="box">
|
|
<h2>error</h2>
|
|
<p>{{model}}</p>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- poll template -->
|
|
<script type="text/x-handlebars" id="poll">
|
|
<div id="poll">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-5">
|
|
<div class="box meta-data">
|
|
<h2 class="title">{{title}}</h2>
|
|
<p class="description">{{description}}</p>
|
|
<p class="creationDate">created on {{creationDate}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-5 col-lg-offset-2">
|
|
<div class="box share-link">
|
|
<p>Share the link and invite other people to participate in your poll.</p>
|
|
<p class="link"><a {{bind-attr href=pollUrl}}>{{pollUrl}}</a></p>
|
|
<p class="notice">Everyone who knows the link could read the data.
|
|
If your poll consists of private data you may only share the
|
|
link via encrypted channels like PGP encrypted email or instant
|
|
messaging with OTR.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="table-scroll">
|
|
<table class="user-selections-table table table-striped table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
{{#each option in options}}
|
|
<th>
|
|
{{#if isFindADate}}
|
|
{{formattedDate option.title 'll'}}
|
|
{{/if}}
|
|
|
|
{{#if isMakeAPoll}}
|
|
{{option.title}}
|
|
{{/if}}
|
|
</th>
|
|
{{/each}}
|
|
<th> </th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr class='newUser'>
|
|
{{! ToDo:
|
|
should be all together in just one form;
|
|
not in several forms for each input.
|
|
This work-around is due to a problem of
|
|
ember-forms in dealing with propertys of
|
|
handlebar each helper
|
|
}}
|
|
<td>
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-form-label text="name" extraClass="sr-only"}}
|
|
{{em-input property="newUserName" placeholder="Enter your name..."}}
|
|
{{/em-form}}
|
|
</td>
|
|
{{#each newUserSelection in controller.newUserSelections}}
|
|
<td>
|
|
{{#em-form model=newUserSelection submit_button=false}}
|
|
{{#if isFreeText}}
|
|
{{em-input property="value"}}
|
|
{{else}}
|
|
{{em-select
|
|
property="value"
|
|
contentBinding="answers"
|
|
optionValuePath="content.label"
|
|
optionLabelPath="content.label"
|
|
prompt="choose an answer"}}
|
|
{{/if}}
|
|
{{/em-form}}
|
|
</td>
|
|
{{/each}}
|
|
<td>
|
|
<div class="form-group">
|
|
<button {{action "addNewUser"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> save </button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
{{#each user in users}}
|
|
<tr>
|
|
<td>{{user.name}}</td>
|
|
{{#each selection in user.selections}}
|
|
<td>
|
|
{{#if isFreeText}}
|
|
{{selection.value}}
|
|
{{else}}
|
|
<span {{bind-attr class="selection.value"}}>{{selection.value}}</span>
|
|
{{/if}}
|
|
</td>
|
|
{{/each}}
|
|
<td> </td>
|
|
</tr>
|
|
{{/each}}
|
|
|
|
{{#unless isFreeText}}
|
|
<tr class='evaluation evaluation-header'>
|
|
<td {{bind-attr colspan=fullRowColspan}}>Evaluation</td>
|
|
</tr>
|
|
|
|
{{#each answer in evaluation}}
|
|
<tr class='evaluation'>
|
|
<td>
|
|
{{answer.label}}
|
|
</td>
|
|
|
|
{{#each option in answer.options}}
|
|
<td>
|
|
{{option}}
|
|
</td>
|
|
{{/each}}
|
|
|
|
<td> </td>
|
|
</tr>
|
|
{{/each}}
|
|
{{/unless}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- create templates -->
|
|
<script type="text/x-handlebars" id="create">
|
|
{{outlet}}
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/index">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-select
|
|
property="pollType"
|
|
label="poll type"
|
|
prompt="-select-"
|
|
contentBinding="App.PollTypes"
|
|
optionValuePath="content.id"
|
|
optionLabelPath="content.label"
|
|
prompt="Please select a poll type"}}
|
|
{{em-form-submit text="next"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/meta">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-input
|
|
property="title"
|
|
label="title"
|
|
placeholder="Enter a title..."}}
|
|
{{em-text
|
|
property="description"
|
|
label="description"
|
|
placeholder="Enter a description if you like..."
|
|
rows=4}}
|
|
{{em-form-submit text="next"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/options">
|
|
<div class="box">
|
|
{{#if isMakeAPoll}}
|
|
<form role="form">
|
|
<div class="form-group">
|
|
<label class="control-label">options</label>
|
|
<fieldset>
|
|
{{#each option in options}}
|
|
{{view Ember.TextField valueBinding="option.title" class="form-control"}}<br/>
|
|
{{/each}}
|
|
{{em-form-control-help text="You have to enter at least two options."}}
|
|
</fieldset>
|
|
</div>
|
|
<div class="form-group">
|
|
<button {{action "moreOptions" target="view"}} class="btn btn-default"> add another option </button>
|
|
<button {{action "submitMakeAPoll"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
|
|
</div>
|
|
</form>
|
|
{{/if}}
|
|
|
|
{{#if isFindADate}}
|
|
<div id="datepicker">
|
|
{{view App.Datepicker}}
|
|
{{em-form-control-help text="You have to select at least two dates."}}
|
|
<div class="form-group">
|
|
<button {{action "submitFindADate"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/settings">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-select
|
|
property="answerType"
|
|
label="available answers"
|
|
prompt="-select-"
|
|
contentBinding="App.AnswerTypes"
|
|
optionValuePath="content.id"
|
|
optionLabelPath="content.label"
|
|
prompt="Please define available answers"}}
|
|
{{em-checkbox label="Allow anonym participation?" property="anonymousUser"}}
|
|
{{em-checkbox label="Force an answer?" property="forceAnswer"}}
|
|
{{em-form-submit text="save"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<!-- configuration -->
|
|
<script type="text/javascript">
|
|
// enable ember query-params-new feature
|
|
window.ENV = {
|
|
FEATURES: {
|
|
'query-params-new': true
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- loading libaries -->
|
|
<script src="js/lib/sjcl.js"></script>
|
|
<script src="js/lib/jquery.js"></script>
|
|
<script src="js/lib/handlebars.js"></script>
|
|
<script src="js/lib/ember.js"></script>
|
|
<script src="js/lib/ember-data.js"></script>
|
|
<script src="js/lib/embedded-adapter.js"></script>
|
|
<script src="js/lib/ember_forms.js"></script>
|
|
<script src="js/lib/ember-validations.js"></script>
|
|
<script src="js/lib/bootstrap.js"></script>
|
|
<script src="js/lib/bootstrap-datepicker.js"></script>
|
|
<script src="js/lib/moment.min.js"></script>
|
|
<script src="js/croodle.js"></script>
|
|
</body>
|
|
</html> |