Commit f5a47aa1 authored by gijs's avatar gijs

Split boucle and alternative into two different views, started range selector.

parent 1ee15b46
......@@ -60,7 +60,7 @@ window.W = window.W || {};
var json = this.toJSON();
return depthOf(json.mainline || json.sublines);
}
},
});
......@@ -89,7 +89,8 @@ window.W = window.W || {};
boucle: null,
// TODO: check if those 3 props can be merge in one
// null | { type: rangeType, value: null|number|[number, number]}
// alternativeMode = enum { inclusive, exclusive}
// null | { type: rangeType, mode: alternativeMode, value: null|number|[number, number]}
alternative: null,
alternative_mode: '', //choix dans un array (exclusive, inclusive, conditionnelle) Validation importante des conditions dans une boucle inclusive
// alternative_symbole: '',
......@@ -118,6 +119,16 @@ window.W = window.W || {};
}
},
getLevel: function () {
var parent = this.get('parent');
if (parent && parent.getLevel) {
return parent.getLevel() + 1;
}
return 1;
},
relations: [{
type: Backbone.HasMany,
key: 'sublines',
......
......@@ -13,6 +13,13 @@ window.W = window.W || {};
range: '3'
};
var alternativeMode = {
inclusive: '0',
exclusive: '1'
};
var tags = [">", "|", "//", "", "||"];
/**
* Instantiate with at least a label.
*/
......@@ -154,6 +161,48 @@ window.W = window.W || {};
}
});
W.BoucleField = W.RangeField.extend({
template: '#field-boucle-template'
});
W.AlternativeField = W.RangeField.extend({
template: '#field-alternative-template',
ui: _.extend(W.RangeField.prototype.ui, {
'mode': '[name="mode"]'
}),
/**
* Extend RangeField template context with the alternative mode
*/
templateContext: function () {
const context = W.RangeField.prototype.templateContext.apply(this);
const val = this.getOption('value');
return _.extend(context, {
mode: (val) ? val.mode : alternativeMode.inclusive,
alternativeMode: alternativeMode
})
},
/**
* Extend the returned value dictionary with the alternative mode
*/
value: function () {
var value = W.RangeField.prototype.value.apply(this);
if (value) {
return _.extend(value, { mode: this.ui.mode.val() });
}
return value;
}
});
/**
* Node editing form
*/
......@@ -198,7 +247,7 @@ window.W = window.W || {};
return {
aspectChoices: ["duratif", "itératif", "sémelfactif"],
alternativeChoices: ["inclusive", "exclusive"],
tagChoices: [">", "|", "//", ""],
tagChoices: tags,
rangeType: rangeType
}
},
......@@ -206,12 +255,12 @@ window.W = window.W || {};
onRender: function () {
this.toggleAspect();
const boucleField = new W.RangeField({
const boucleField = new W.BoucleField({
label: 'boucle',
value: this.model.get('boucle')
});
const alternativeField = new W.RangeField({
const alternativeField = new W.AlternativeField({
label: 'alternative',
value: this.model.get('alternative')
});
......@@ -320,7 +369,7 @@ window.W = window.W || {};
return {
aspectChoices: ["duratif", "itératif", "sémelfactif"],
alternativeChoices: ["inclusive", "exclusive"],
tagChoices: [">", "|", "//", ""],
tagChoices: tags,
altSymbol: this.getAltSymbol(),
hasIndications: this.hasIndications(),
rangeType: rangeType
......@@ -426,12 +475,14 @@ window.W = window.W || {};
if (alternative_n === alternative_p) {
return {
type: rangeType.exact,
value: parseInt(alternative_n)
value: parseInt(alternative_n),
mode: (alternative_mode == 'exclusive') ? alternativeMode.exclusive : alternativeMode.inclusive
}
} else {
return {
type: rangeType.range,
value: [parseInt(alternative_n), parseInt(alternative_p)]
value: [parseInt(alternative_n), parseInt(alternative_p)],
mode: (alternative_mode == 'exclusive') ? alternativeMode.exclusive : alternativeMode.inclusive
}
}
}
......@@ -444,7 +495,7 @@ window.W = window.W || {};
return (
this.model.get('indications')
|| this.model.get('commandement')
|| this.model.get('destiation')
|| this.model.get('destination')
|| this.model.get('code')
);
},
......@@ -522,7 +573,7 @@ window.W = window.W || {};
delete: function (e) {
e.stopImmediatePropagation();
// Todo: check cross-consistency of axis
var r = confirm("Vous êtes sur le point de supprimer la axe " + this.model.get('title') + ". Continuer?");
var r = confirm("vous êtes sur le point de supprimer l’axe " + this.model.get('title') + " et tous ses sous-axes. Continuer?");
if (r) {
this.trigger('change');
this.model.destroy();
......@@ -547,6 +598,14 @@ window.W = window.W || {};
this.$el.attr("data-toggled", !toggled);
},
collapse: function () {
this.$el.attr("data-toggled", true);
},
expand: function () {
this.$el.attr("data-toggled", false);
},
getAltSymbol: function () {
const parent = this.model.get("parent");
......@@ -641,6 +700,19 @@ window.W = window.W || {};
this.$('#aspect').get(0).disabled = !(e.target.checked);
},
onExpandUntill: function (level) {
if (this.model.getLevel() < level) {
this.expand();
} else {
this.collapse();
}
var subtree = this.getChildView('tree');
if (subtree) {
subtree.triggerMethod('expandUntill', level);
}
},
onRender: function () {
// attribut des attributs html pour styler en css
this.$el.attr("data-toggled", false);
......@@ -667,7 +739,14 @@ window.W = window.W || {};
childView: W.TreeNode,
childViewTriggers: {
// Propagate change events to the parent
'change': 'change'
},
onExpandUntill: function (level) {
this.children.each(function (child) {
child.triggerMethod('expandUntill', level);
});
}
});
......@@ -760,7 +839,8 @@ window.W = window.W || {};
ui: {
'save': '.save',
'edit': '.edit'
'edit': '.edit',
'expandLevel': '[name="expand-level"]'
},
events: {
......@@ -769,6 +849,7 @@ window.W = window.W || {};
'click .delete': 'delete',
'click .duplicate': 'duplicate',
'click .unfold': 'unfold',
'change @ui.expandLevel': 'expandUntill'
},
childViewEvents: {
......@@ -826,12 +907,12 @@ window.W = window.W || {};
success: function () {
button.text(button.data('label'));
},
error: (function () {
error: (function (model, status) {
button.text(button.data('label'));
button.prop('disabled', false);
this.hasChanges = true;
alert('Error while saving');
alert('Error while saving -- ' + status.status + ' -- ' + status.statusText);
}).bind(this)
});
},
......@@ -867,6 +948,11 @@ window.W = window.W || {};
});
},
expandUntill: function () {
var level = parseInt(this.ui.expandLevel.val(), 10);
this.getChildView('firstRegion').triggerMethod('expandUntill', level);
},
onRender: function () {
var mainline = this.model.get("mainline");
......
......@@ -43,10 +43,19 @@
{% include "playground/underscore/node-form.mtpl" %}
</script>
<!-- Perhaps remove -->
<script id="rangefield-template" type="text/template">
{% include "playground/underscore/rangefield.mtpl" %}
</script>
<script id="field-alternative-template" type="text/template">
{% include "playground/underscore/field-alternative.mtpl" %}
</script>
<script id="field-boucle-template" type="text/template">
{% include "playground/underscore/field-boucle.mtpl" %}
</script>
<script id="node-template-vue" type="text/template">
{% include "playground/underscore/node-vue.mtpl" %}
</script>
......
<label class="inline">
<input type="checkbox" name="toggle-range-field" <% if (enabled) { %>checked<% } %>>
<%= label %>
</label>
<label class="inline">
choisir
<select name="type">
<option value="<%= rangeType.exact %>" <% if (!type || type === rangeType.exact) { %>selected<% } %>>
exactement
</option>
<option value="<%= rangeType.minimal %>" <% if (type == rangeType.minimal) {%>selected<% } %>>
au moins
</option>
<option value="<%= rangeType.range %>" <% if (type == rangeType.range){ %>selected<% } %>>
entre
</option>
</select>
</label>
<section data-range-type="<%= rangeType.exact %>" class="type-fields inline">
<input type="number" name="exact" min="1" class="small-number" value="<%= (type == rangeType.exact) ? value : 1 %>" />
</section>
<section data-range-type="<%= rangeType.minimal %>" class="type-fields inline">
<input type="number" name="minimal" min="1" class="small-number" value="<%= (type == rangeType.minimal) ? value : 1 %>" />
</section>
<section data-range-type="<%= rangeType.range %>" class="type-fields inline">
<input type="number" name="range-min" min="1" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 1 %>" /> et
<input type="number" name="range-max" min="2" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 2 %>" />
</section>
axe(s)
<select name="mode">
<option value="<%= alternativeMode.inclusive %>" <% if (mode == alternativeMode.inclusive) { %>selected<% } %>>
inclusive
</option>
<option value="<%= alternativeMode.exclusive %>" <% if (mode == alternativeMode.exclusive) { %>selected<% } %>>
exclusive
</option>
</select>
\ No newline at end of file
<label class="inline">
<input type="checkbox" name="toggle-range-field" <% if (enabled) { %>checked<% } %>>
<%= label %>
</label>
<label class="inline">
effectuer l’axe
<select name="type">
<option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
indeterminé
</option>
<option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
exactement
</option>
<option value="<%= rangeType.minimal %>" <% if (type == rangeType.minimal) {%>selected<% } %>>
au moins
</option>
<option value="<%= rangeType.range %>" <% if (type == rangeType.range){ %>selected<% } %>>
entre
</option>
</select>
</label>
<section data-range-type="<%= rangeType.exact %>" class="type-fields inline">
<input type="number" name="exact" min="2" class="small-number" value="<%= (type == rangeType.exact) ? value : 2 %>" />
</section>
<section data-range-type="<%= rangeType.minimal %>" class="type-fields inline">
<input type="number" name="minimal" min="2" class="small-number" value="<%= (type == rangeType.minimal) ? value : 2 %>" />
</section>
<section data-range-type="<%= rangeType.range %>" class="type-fields inline">
<input type="number" name="range-min" min="2" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 2 %>" /> et
<input type="number" name="range-max" min="3" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 3 %>" />
</section>
fois
\ No newline at end of file
......@@ -17,7 +17,7 @@
<input type="text" name="condition" value="<%= condition %>">
</label>
<label class="inline"><input type="checkbox" name="imperative" <% if (imperative) { %>checked<% } %>>
Imperative
Impérative
</label>
<!-- terme -->
......@@ -71,17 +71,21 @@
</fieldset>
<fieldset name="extra-fields">
<legend>Extra</legend>
<legend></legend>
<section class="fields">
<!-- Commandement -->
<label><span class="label-text">commandement</span>
<input type="text" name="commandement" value="<%= commandement %>">
</label>
<!-- Destination -->
<label><span class="label-text">destination</span>
<input type="text" name="destination" value="<%= destination %>">
</label>
<!-- Code -->
<label><span class="label-text">code</span>
<input type="text" name="code" value="<%= code %>">
</label>
<!-- Indications -->
<label><span class="label-text">indications</span>
<textarea name="indications"><%= indications %></textarea>
</label>
......
......@@ -78,9 +78,7 @@
<% if (boucle) { %>
<span id="boucle">
&#10560;<sup>
<% if (boucle.type === rangeType.undetermined) { %>
indeterminé
<% } else if (boucle.type === rangeType.exact) { %>
<% if (boucle.type === rangeType.exact) { %>
<%= boucle.value %>
<% } else if (boucle.type === rangeType.minimal) { %>
<%= boucle.value %>+
......
......@@ -2,27 +2,31 @@
<input type="checkbox" name="toggle-range-field" <% if (enabled) { %>checked<% } %>>
<%= label %>
</label>
<select name="type">
<option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
indeterminé
</option>
<option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
exactement
</option>
<option value="<%= rangeType.minimal %>" <% if (type == rangeType.minimal) {%>selected<% } %>>
au moins
</option>
<option value="<%= rangeType.range %>" <% if (type == rangeType.range){ %>selected<% } %>>
entre
</option>
</select>
<label>
effectuer l’axe
<select name="type">
<option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
indeterminé
</option>
<option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
exactement
</option>
<option value="<%= rangeType.minimal %>" <% if (type == rangeType.minimal) {%>selected<% } %>>
au moins
</option>
<option value="<%= rangeType.range %>" <% if (type == rangeType.range){ %>selected<% } %>>
entre
</option>
</select>
fois
</label>
<section data-range-type="<%= rangeType.exact %>" class="type-fields inline">
<input type="number" name="exact" min="1" class="small-number" value="<%= (type == rangeType.exact) ? value : 1 %>" />
<input type="number" name="exact" min="2" class="small-number" value="<%= (type == rangeType.exact) ? value : 2 %>" />
</section>
<section data-range-type="<%= rangeType.minimal %>" class="type-fields inline">
<input type="number" name="minimal" min="0" class="small-number" value="<%= (type == rangeType.minimal) ? value : 0 %>" />
<input type="number" name="minimal" min="2" class="small-number" value="<%= (type == rangeType.minimal) ? value : 2 %>" />
</section>
<section data-range-type="<%= rangeType.range %>" class="type-fields inline">
<input type="number" name="range-min" min="0" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 0 %>" /> et
<input type="number" name="range-max" min="1" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 2 %>" />
<input type="number" name="range-min" min="2" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 2 %>" /> et
<input type="number" name="range-max" min="3" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 3 %>" />
</section>
\ No newline at end of file
......@@ -11,7 +11,15 @@
<button class="save" data-label-progress="Saving..." data-label="Enregistrer" <% if (!hasChanges) { %>disabled<% } %>>Enregistrer</button>
<button class="duplicate">Dupliquer</button>
<button class="delete">Supprimer</button>
<div>
<select name="expand-level">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<form></form>
</header>
<ol></ol>
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