Commit 889ead92 authored by gijs's avatar gijs

Row editing as form

parent c00d8c98
......@@ -56,24 +56,28 @@ fieldset legend {
margin-left: -1em;
}
fieldset.toggable section.fields {
display: none;
}
fieldset.toggable.activated section.fields {
.fieldgroup {
display: block;
}
label {
display: block;
margin-bottom: .5em;
}
label.inline {
display: inline-block;
}
label .label-text {
width: 9em;
margin-right: .25em;
text-align: left;
display: inline-block;
}
.axis-edit-form {
display: none;
/* display: none; */
position: absolute;
background: white;
z-index: 1;
......@@ -299,6 +303,22 @@ li li li li li li li li .axis-title { color: rgb(204,194, 16); }
content: "▶";
}
[name="extra-fields"] .fields {
display: none;
}
[name="extra-fields"].expanded .fields {
display: block;
}
[name="extra-fields"] legend:before {
content: "▶ ";
}
[name="extra-fields"].expanded legend:before {
content: "▼ ";
}
/* show the destination of line beeing moved */
.placeholder { outline: 1px dotted black; }
......@@ -317,6 +337,16 @@ li li li li li li li li .axis-title { color: rgb(204,194, 16); }
li + li > .axis-title #alt_symbole { visibility: hidden; }
input[type="text"] {
width: 20em;
}
input.small-number {
width: 4em;
}
textarea {
vertical-align: top;
width: 20em;
height: 5em;
}
\ No newline at end of file
......@@ -3,7 +3,7 @@ window.W = window.W || {};
;
(function(undefined) {
(function (undefined) {
'use strict';
W.ScoreModel = Backbone.RelationalModel.extend({
......@@ -15,7 +15,7 @@ window.W = window.W || {};
urlRoot: '/api/scores/',
url: function() {
url: function () {
var original_url = Backbone.Model.prototype.url.call(this);
var parsed_url = original_url + (original_url.charAt(original_url.length - 1) == '/' ? '' : '/');
......@@ -33,11 +33,11 @@ window.W = window.W || {};
}
}],
getDepth: function() {
getDepth: function () {
// Methode pour le vue "slider"
// based on http://stackoverflow.com/questions/13523951/how-to-check-the-depth-of-an-object
var depthOf = function(object) {
var depthOf = function (object) {
var level = 1;
if (object.hasOwnProperty("sublines")) {
......@@ -97,10 +97,16 @@ window.W = window.W || {};
// Pas vraiment une propriété de l'objet.
// Si l'objet est focused, il faut que la classe axis-focus
// soit sur ses éléments handle et options.
parent: null
parent: null,
adresse: '', // string
actant: '', // string
commandement: '', // string
destination: '', // string
code: '', // string
indications: '' // long string
},
validate: function(attrs) {
validate: function (attrs) {
// TODO: bidon, à supprimer
if (attrs.id > 3) {
return 'Mauvais id.';
......
This diff is collapsed.
......@@ -35,6 +35,10 @@
{% include "playground/underscore/node.mtpl" %}
</script>
<script id="node-form-template" type="text/template">
{% include "playground/underscore/node-form.mtpl" %}
</script>
<script id="node-template-vue" type="text/template">
{% include "playground/underscore/node-vue.mtpl" %}
</script>
......@@ -65,10 +69,8 @@
<script src="{% static 'playground/js/apps.js' %}"></script>
<script src="{% static 'playground/js/main.js' %}"></script>
<script>
$(document).ready(function()
{
$('.axis-fermer-infos').click(function()
{
$(document).ready(function () {
$('.axis-fermer-infos').click(function () {
$(this).parent().parent().hide();
});
// $('.deplieTout').click(function(){
......@@ -81,4 +83,4 @@
</body>
</html>
</html>
\ No newline at end of file
<fieldset>
<!-- condition -->
<label class="inline"><span class="label-text">condition</span>
<input type="text" name="condition" value="<%= condition %>">
</label>
<label class="inline"><input type="checkbox" name="imperative">
Imperative
</label>
<!-- terme -->
<label><span class="label-text">terme</span>
<input type="text" name="terme" value="<%= terme %>">
</label>
<!-- boucle -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="boucle" <% if (boucle) { %>checked<% } %>>
Boucle
</label>
<label class="inline">de
<input type="number" name="boucle-min" value="<%= ((boucle) ? boucle[0] : 0) %>" min="0" class="small-number">
</label>
<label class="inline">a
<input type="number" name="boucle-max" value="<%= ((boucle) ? boucle[1] : 0) %>" min="0" class="small-number">
</label>
</section>
<!-- alternative -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="alternative" <% if (alternative) { %>checked<% } %>>
Alternative
</label>
<label class="inline">choisir entre
<input type="number" name="alternative-min" value="<%= ((alternative) ? alternative[0] : 0) %>" min="0" class="small-number">
</label>
<label class="inline">et
<input type="number" name="alternative-max" value="<%= ((alternative) ? alternative[1] : 0) %>" min="0" class="small-number">
axes
</label>
</section>
<!-- aspect -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="aspect-toggle">
aspect
</label>
<label class="inline">
<select name="aspect">
<% _.each(aspectChoices, function(a) {%>
<option value="<%= a %>" <% if (aspect==a) { %>selected<% } %>><%= a %></option>
<% }); %>
</select>
</label>
</section>
<!-- contingent -->
<label>
<input type="checkbox" name="contingent" <% if (contingent) { %>checked<% } %>>
axe contingent
</label>
<!-- modulé -->
<label>
<input type="checkbox" name="module" <% if (module_) { %>checked<% } %>>
axe modulé
</label>
<!-- actant -->
<label><span class="label-text">actant</span>
<input type="text" name="actant" value="<%= actant %>">
</label>
<!-- adresse -->
<label><span class="label-text">adresse</span>
<input type="text" name="adresse" value="<%= adresse %>">
</label>
</fieldset>
<fieldset name="extra-fields">
<legend>Extra</legend>
<section class="fields">
<label><span class="label-text">commandement</span>
<input type="text" name="commandement" value="<%= commandement %>">
</label>
<label><span class="label-text">destination</span>
<input type="text" name="destination" value="<%= destination %>">
</label>
<label><span class="label-text">code</span>
<input type="text" name="code" value="<%= code %>">
</label>
<label><span class="label-text">indications</span>
<textarea name="indications"><%= indications %></textarea>
</label>
</section>
</fieldset>
<button type="submit">OK</button>
\ No newline at end of file
<div class="axis-title axis-title-view" tabindex="0">
<span class="prefix">
<span id="alt_symbole">
<%= altSymbol %>
</span>
<span class="invis condition">
<% if (condition && !(condition == 'condition')) { %>
<span class="trigger_conditions_vue">#</span>
......@@ -10,10 +14,6 @@
<% } %>
</span>
<span id="alt_symbole">
<%= altSymbol %>
</span>
<span class="tag view_tag el_tag"><% if (tag) { %><%= tag %><% } else { %>&gt;<% }%></span>
</span>
<span class="axis-title-edit"><%- title %></span>
......
......@@ -31,104 +31,7 @@
<button class="toggle"></button>
<% } %>
<form class="axis-edit-form">
<fieldset>
<legend>Général</legend>
<label><input type="checkbox" name="contingent">
contingent
</label>
<label><input type="checkbox" name="module">
modulé
</label>
<label>aspect
<select name="aspect">
<% _.each(tagChoices, function(tagChoice) {%>
<option value="<%= tagChoice %>" <% if (tag==tagChoice) { %>selected<% } %>><%= tagChoice %></option>
<% }); %>
</select>
</label>
<label>indications
<textarea name="textarea" rows="3" cols="50"></textarea>
</label>
<label>terme
<input type="text" name="terme" value="">
</label>
</fieldset>
<fieldset name="boucle" class="toggable">
<legend>
<label><input type="checkbox" name="boucle-toggle" <% if (boucle_check) { %>checked<% } %>>
Boucle
<select name="boucle-type-select" <% if (!boucle_check) { %>disabled<% } %>>
<option value="range">Range</option>
<option value="duration">Duration</option>
<option value="untill">Untill</option>
</select>
</label>
</legend>
<section class="fields" name="boucle-range-fields">
<label class="inline">de
<input type="number" name="de" value="0" class="small-number">
</label>
<label class="inline">a
<input type="number" name="a" value="0" class="small-number">
</label>
</section>
<section class="fields" name="boucle-duration-fields">
<label>pendant
<input type="number" name="repeat-period" class="small-number">
<select>
<option>secondes</option>
<option>minutes</option>
<option>heures</option>
<option>jours</option>
<option>semaines</option>
<option>moins</option>
<option>années</option>
</select>
</label>
</section>
<section class="fields" name="boucle-untill-fields">
<label>Jusque'à
<input type="text" name="untill">
</label>
</section>
</fieldset>
<fieldset name="alternative" class="toggable">
<legend>
<label><input type="checkbox" name="alternative-toggle">
Alternative
<select name="alternative-type-select" disabled>
<% _.each(alternativeChoices, function(alternativeChoice) {%>
<option value="<%= alternativeChoice %>" <% if (alternative_mode==alternativeChoice) { %>selected<% } %>><%= alternativeChoice %></option>
<% }); %>
</select>
</label>
</legend>
<section class="fields">
<label class="inline">entre
<input type="number" name="entre" value="<%= alternative_n %>" min="0" class="small-number">
</label>
<label class="inline">et
<input id="foo" type="number" name="et" value="<%= alternative_p %>" class="small-number">
</label>
</section>
</fieldset>
<button type="submit">OK</button>
</form>
<form></form>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment