toggle categories in editcourse-view

Openki · Aug 5, 2013 · 01a4ae0 · 01a4ae0
1 parent abe3461
commit 01a4ae0
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 33 deletions.
diff --git a/client/css/screen.css b/client/css/screen.css
@@ -290,9 +290,26 @@ clear: left;
 
 .course_edit ul {
 	list-style-type: none;
-	display: block
+	display: block;
 }
 
+#editform_categories{
+padding: 20px 0 0 0;
+}
+
+#show_categories_to_edit ul{
+    padding: 0 0 20px 0;
+    margin: 0 0 20px 0;
+}
+
+#show_categories_to_edit li{
+    float:left;
+    font-size:0.8em;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+
 div.participants {
 	background-color: #EEE;
 	padding: 1em;

diff --git a/client/views/courses/details/course.edit.html b/client/views/courses/details/course.edit.html
@@ -6,38 +6,37 @@ <h2>{{#if _id}}Kurs Editieren{{else}}Neuen Kurs Vorschlagen{{/if}}</h2>
     <p>  Desc: <textarea cols="65" rows="10" id="editform_description" name="editform_description">{{description}}</textarea></p>
 
      <p>  Teilnehmer Min:  <input type="text" id="editform_subscr_min" value="{{subscribers_min}}" size="2"/>  Max: <input type="text" id="editform_subscr_max" value="{{#if subscribers_max}}{{subscribers_max}}{{/if}}" size="2"/></p>
-
-    <tr>
-        <th>Category: </th><td>
-            <select id="addform_category">
-
-                {{#each available_categories false}}
-                    <option value="{{_id}}">{{name}}</option>
-                {{else}}
-                    Keine Kategorien definiert!
-                {{/each}}
-            </select>
-        </td>
-    </tr>
-
-
-     <div id='editform_categories'>  Categories:
-		<ul class='categories'>
-		{{#each available_categories false}}
-			<li>
-				<label><input type='checkbox' name='{{_id}}' value="1" {{checked _id ../categories}}>&nbsp;{{name}}</label>
-				<ul class='subcategories'>
-				{{#each available_categories _id}}
-					<li>
-						<label><input type='checkbox' name='{{_id}}' value="1" {{checked _id ../../categories}}>&nbsp;{{name}}</label>
-					</li>
-				{{/each}}
-				</ul>
-			</li>
-		{{/each}}
-		</ul>
+
+     <div id='editform_categories'>  
+
+         <div id="show_categories_to_edit">
+            Edit {{>show_categories}}
+         </div>
+
+         <div id="edit_categories" style="display:none;">
+             Edit Categories:
+
+            <ul class='categories'>
+            {{#each available_categories false}}
+                <li id="cat_{{_id}}" >
+                    <label><input type='checkbox' class='checkbox' name='{{_id}}' value="1"  {{checked _id ../categories}}>&nbsp;{{name}}</label>
+
+
+                    <!--<ul class='subcategories' style="display:{{show_subcats _id ../categories}}">-->
+                    <ul class='subcategories' style="display:{{show_subcats _id ../categories}}">
+                    {{#each available_categories _id}}
+                        <li>
+                            <label><input type='checkbox' class='checkbox_sub'  id="cat_sub_{{_id}}" name='{{_id}}' value="1" {{checked _id ../../categories}}>&nbsp;{{name}}</label>
+                        </li>
+                    {{/each}}
+                    </ul>
+
+                </li>
+            {{/each}}
+            </ul>
+		</div>
      </div>
-     <div>  Special Tags:
+     <div style="clear:left;">  Special Tags:
      	<li>
      		<label> <input type='checkbox' name='DIY' value='1'> DIY </label>
      	</li>

diff --git a/client/views/courses/details/course.edit.js b/client/views/courses/details/course.edit.js
@@ -26,6 +26,15 @@ Template.course_edit.checked = function(id, cats) {
 		return (id in cats) ? 'checked' : ''
 	}
 }
+Template.course_edit.show_subcats = function(id, cats) {
+	if (cats === undefined) return;
+	if (cats.length) {
+		return cats.indexOf(id) >= 0 ? 'block' : 'none'
+	} else {
+		return (id in cats) ? 'block' : 'none'
+	}
+}
+
 
 // to be put on server ...........
 
@@ -64,5 +73,36 @@ Template.course_edit.events({
 
 	'click input.cancel': function() {
 		Session.set("isEditing", false);
+	},
+
+	'click #show_categories_to_edit': function(event){
+	    $('#show_categories_to_edit').toggle();	    
+	    $('#edit_categories').toggle();
+	},
+
+	'change .checkbox': function(){
+	    //$('#' + event.currentTarget.id +" .subcategories").toggle();
+	    $('#cat_' + this._id +" .subcategories").toggle();
+
+	    // todo: deselect all children
+	    var is_checked = $('#cat_' + this._id +" .checkbox").first().prop('checked');
+	    if(!is_checked)
+	        $('#cat_' + this._id +" .checkbox_sub").prop('checked', false);
+
+
+
+	},
+
+	'change .checkbox_sub': function(event){
+
+	    //$('#' + event.currentTarget.id).parent().parent().parent().parent().find(".checkbox").prop('checked', false);
+
+
+	    // check parent
+
+	    //$('.myCheckbox').prop('checked', true);
+	    //$('.myCheckbox').prop('checked', false);
 	}
 });
+
+
diff --git a/client/views/courses/details/course.show_categories.html b/client/views/courses/details/course.show_categories.html
@@ -1,3 +1,3 @@
 <template name="show_categories">
-	Category: <ul class="categorylist">{{#each loadcategories categories}}<li>{{name}}</li>{{/each}}</ul>
+	Categories: <ul class="categorylist">{{#each loadcategories categories}}<li>{{name}}</li>{{/each}}</ul>
 </template>