Seperated from theme.html and Created new template for hieararchy tree

1 files changed, 619 insertions, 0 deletions

diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
new file mode 100644
index 0000000..ff7f674
--- /dev/null
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
@@ -0,0 +1,619 @@
+{% load i18n %}
+{% load cache %}
+
+{% load ndf_tags %}
+{% get_group_name groupid as group_name_tag %}
+
+<style>
+
+  	#app-set-item li { padding:0.5em }
+
+	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
+        content: "\f07b";
+    }
+    .jqtree-tree i {
+        margin-right: 4px;
+    }
+</style>
+
+
+<script type="text/javascript">
+
+  	// $(document).ready(function() {
+  	function plotHierarchyTree() {
+		// Funtion for loading tree for showing collection list left side panel
+		doc();
+
+		// Function for manipulating tree when user visits to page directly via browser url
+		{% if selected %} TreeTillNode(); {% endif %}
+    }
+    // });
+
+
+  	function TreeTillNode () {
+
+		// This gives the last hierarchy node id from browser url.
+		var url = "{{selected}}";
+
+		var tree_build = $(".themes").not(".jqtree-loading");
+		var node = tree_build.tree('getNodeById', url);
+		tree_build.tree('openNode', node);
+
+		// Javascript function to be used for checking objects in specific time of interval
+		setTimeout(function(){
+
+		// console.log($(".themes"))
+		if( ($(".themes").length > 0) ) { TreeTillNode() }
+		}, 100 );
+    }
+
+
+	function doc() {
+		
+		var $tree = $('.themes');
+		var user = "{{user.is_authenticated}}";
+		var unfold = "{{unfold}}";
+
+		if(unfold == "true"){
+			unfold = true
+		}
+		else{
+			unfold = false
+		}
+
+		$tree.tree({
+			autoOpen: unfold,
+
+    		onCreateLi: function(node, $li) {
+					
+				if (node.node_type == "Topic"){
+					$li.find('.jqtree-title').before('&nbsp <span class="fi-page"></span> &nbsp;');				        	
+				}
+				else{
+					$li.find('.jqtree-title').before('&nbsp <span class="fi-folder" style="color:orange"></span> &nbsp;');				        		
+				}
+    			   
+				if (node.node_type == "Topic"){        					
+					$li.find('.jqtree-element').append(
+
+            				'&nbsp;&nbsp;<a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' 
+        			);	            			
+				}
+				else{
+					if (user == "True"){
+
+    					$li.find('.jqtree-element').append(
+        					{% user_access_policy groupid request.user as user_access %}
+        					{% if user_access == "allow" %}
+
+                				'&nbsp;&nbsp;<a href="/{{groupid}}/topics/'+node.id+'/"> <i class="fi-pencil edit"></i></a> &nbsp;&nbsp; <a id='+node.id+' class="objectsCheckbox"> <input type="checkbox"> </a>' 
+                			
+                			{% endif %}
+        				);
+					}
+				}
+    		}
+		});
+		
+		// bind 'tree.click' event
+		$tree.bind(
+		    'tree.click',
+		    function(event) {
+		        // The clicked node is 'event.node'
+		        var node = event.node;
+
+		        var parent_arr = [];
+	            var parent_node = node;
+	            parent_arr.push(node.id);
+
+	            // Bellow code manipulates the parent hierarchy of clicked node in a tree
+	            while (parent_node) {
+	                if (parent_node.name !== undefined){           
+	                  $tree.tree('openNode', parent_node);
+	                  parent_node = parent_node.parent;
+	                  if (parent_node.name !== undefined){
+	                    parent_arr.push(parent_node.id);                                          
+	                  }
+	                }
+	                else{
+	                  break;
+	                }
+	            }
+	            var nav_list = parent_arr.reverse();
+		        // alert(nav_list);
+
+		        // If its topic node i.e no children of this node then show the detail view for topic
+		  		if( node.children[0] == null ){
+
+		  			if (node.node_type == "Topic"){
+		  				location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+"";
+		  			}
+			        
+		  		}
+		  		
+		    }
+		);
+
+		$tree.bind(
+		    'tree.contextmenu',
+		    function(event) {
+		        // The clicked node is 'event.node'
+		        var node = event.node;
+		        {% user_access_policy groupid request.user as user_access %}
+        		{% if user_access == "allow" %}
+			        var msg = confirm("Do you want to delete this topic ?");
+			        if (msg == true) {
+
+			        	$.ajax({
+			            	url: "{% url 'delete_themes' groupid %}",
+			             	type: 'POST',
+			             	data:{
+			             		deleteobj: node.id,
+			             		csrfmiddlewaretoken: '{{ csrf_token }}'
+			             	},
+			             	success: function(result){
+			             		alert("Topic "+node.name+" deleted successfully");
+			             		location.reload(true);
+			             	},
+			             	
+			            });
+
+					}
+				{% endif %} 
+
+		    }
+		);
+                 
+
+	};
+
+
+	// method to handle hover on topics
+	function showTopicStats(){
+      // Javascript function to be used for checking objects in specific time of interval
+      setTimeout(function(){
+      	//  On hover of topic node manipulate resources only once
+
+		$(".jqtree-title.jqtree_common").hover( function(){
+
+			topic_id = $(this).siblings("a").attr("id");
+			// var topic_name = $(this).siblings("a").attr("name");
+			var data_info = $(this).attr("data-info");
+			var hover_context = this;
+			if ( ! data_info && topic_id ){
+				$(".topic_stats").css("display", "none");
+
+				$.ajax({
+	            	url: "{% url 'get_topic_contents' groupid %}",
+	             	type: 'POST',
+	             	data:{
+	             		node_id: topic_id,
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(data){
+	             		
+	             		count = display_top_res(data)
+
+	             		if (data != "{}"){
+
+	             			$(".topic_stats").html(count);
+	             			$(hover_context).attr("data-info", data)
+
+	             			$(".topic_stats").css("display", "block");
+	             			
+	             		}
+	             		else{
+	             			$(hover_context).attr("data-info", data);	             			
+	             		}
+
+	             	},
+	             	
+	            });
+
+
+			}
+			else{ 
+				
+				if (topic_id){
+					var data = $(this).attr("data-info");
+					count = display_top_res(data)
+					$(".topic_stats").html(count);
+	     			$(".topic_stats").css("display", "block");
+				}
+
+			}
+		});
+		
+        // console.log($(".jqtree-element.jqtree_common"))
+        if( ($(".jqtree-title.jqtree_common").length <= 0) ) { 
+        	showTopicStats() 
+        }
+
+      }, 1000 );
+	}
+
+
+	function display_top_res(data){
+		data_obj = JSON.parse(data);
+ 		count = ""
+
+ 		if (data != "{}"){
+ 			var k = Object.keys(data_obj); // To get the keys from incomming data
+
+ 			for (var m = 0; m < k.length; m++) { 
+ 				var key = k[m];  
+ 				var len = data_obj[key].length;  // length of list as a value of key
+ 				// alert(key+": "+len);
+ 				count += key+": "+len+"<br/>";
+ 			} 			
+
+ 		}
+ 		else{
+ 			count += "No Resources !<br/>";
+ 		}
+
+ 		return count
+
+	}
+
+	showTopicStats();
+
+	    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
+    		setTimeout(function(){
+		      }, 1000);
+
+			alert($(this).siblings("a").attr("id"));
+		});
+
+		$("#add_theme_item").click(function() {
+			      $.ajax({
+		        type: "POST",
+		        url: "{% url 'add_theme_item' groupid %}",
+		        datatype: "html",
+		        data:{
+		          context_theme: "{{node.pk}}",
+		          name: $(".name_id").val(),
+		          csrfmiddlewaretoken: '{{ csrf_token }}'
+		        },
+		        success: function(data) {
+
+		          var item = $(".name_id").val();
+
+		          if ($.trim(data) === "failure") {
+		            alert("Theme item "+ item +" already available, Please choose different name");
+		          }
+
+		          if ($.trim(data) === "success") {
+		            location.reload(true);
+		          }
+
+		          $(".name_id").val("");
+		        }
+		      });
+
+		});
+
+		// script for fold themes_cards hierarchy
+		$(".fold").click(function() {
+			$(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}";
+			});
+		});
+
+		// script for unfold themes hierarchy
+	    $(".unfold").click(function() {
+	    	$(function() {
+	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?unfold=true";	
+	    	});
+	    });	
+
+	    $(".tree_browser").click(function() {
+			$(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}";
+			});
+		});
+
+	    // script for delete themes
+	    $(document).on('click',".button.deleteObjects",function(){
+	    	var selectedobject = $(".objectsCheckbox input:checked")
+
+	    	if(selectedobject.length > 0)
+	    	{
+           		$('#myModal').foundation('reveal', 'open');
+
+           		var i = 0;
+             	var str = "";  
+	            $.map(selectedobject,function(each){
+	                if(i == 0)
+	                {
+	                	str = str.concat(each.parentElement.id)
+	                }
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+	                
+	                i= i+1
+	            })
+
+           		$.ajax({
+		            url: "{% url 'delete_themes' groupid %}",
+		            type: 'POST',
+		            data:{
+		            	context_theme: "{{node.pk}}",
+		            	deleteobjects: str,
+		            	csrfmiddlewaretoken: '{{ csrf_token }}'
+		            },
+             		success: function(result){
+
+             			$("#deletion_results").html("");
+                        for(var obj in result)
+                        {
+	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
+                        }
+
+             		},
+             	});
+
+           	}
+           	else
+           	{
+        		alert("select object to delete")
+        	}
+
+	    });
+
+		// Script for delete themes after confirm delete.
+		$(document).on('click',".button.confirmDeleteObjects",function(){
+	        var selectedobject = $(".objectsCheckbox input:checked")
+
+	        if(selectedobject.length > 0)
+	        {
+	            var i = 0;
+	            var str = "";  
+
+	            $.map(selectedobject,function(each){
+	            	if(i == 0)
+	            	{
+	            		str = str.concat(each.parentElement.id)
+	            	}
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+
+	                i= i+1
+	            });
+
+	            $.ajax({
+	            	url: "{% url 'delete_themes' groupid %}",
+	             	type: 'POST',
+	             	data:{
+		            	context_theme: "{{node.pk}}",
+	             		deleteobjects: str,
+	             		confirm:"yes",
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(result){
+	             		alert("Themes deleted successfully");
+	             		$('#myModal').foundation('reveal', 'close');
+	             		location.reload(true);
+	             	},
+	             	
+	            });
+	             
+	        }
+	        else{
+	        alert("select object to delete")
+	        }
+
+		});
+
+		// Script for selecting all objects 
+		$(document).on('click',".checkedAll",function(){
+			if($(this).is(":checked")==true)
+			{
+				$('.objectsCheckbox input').prop( "checked", true );
+			}
+			else
+			{
+				$('.objectsCheckbox input').prop( "checked", false );
+			}
+		});
+
+		// Script for cancel option for deleting themes
+		$(document).on('click',".button.cancelDeleteObjects",function(){
+             $('#myModal').foundation('reveal', 'close');
+		});
+
+
+    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
+    		setTimeout(function(){
+		      }, 1000);
+
+			alert($(this).siblings("a").attr("id"));
+		});
+
+		// Script for selecting all objects 
+		$(document).on('click',".checkedAll",function(){
+			if($(this).is(":checked")==true)
+			{
+				$('.objectsCheckbox input').prop( "checked", true );
+			}
+			else
+			{
+				$('.objectsCheckbox input').prop( "checked", false );
+			}
+		});
+
+		// Script for cancel option for deleting themes
+		$(document).on('click',".button.cancelDeleteObjects",function(){
+             $('#myModal').foundation('reveal', 'close');
+		});
+
+	    // script for delete themes
+	    $(document).on('click',".button.deleteObjects",function(){
+	    	var selectedobject = $(".objectsCheckbox input:checked")
+
+	    	if(selectedobject.length > 0)
+	    	{
+           		$('#myModal').foundation('reveal', 'open');
+
+           		var i = 0;
+             	var str = "";  
+	            $.map(selectedobject,function(each){
+	                if(i == 0)
+	                {
+	                	str = str.concat(each.parentElement.id)
+	                }
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+	                
+	                i= i+1
+	            })
+
+           		$.ajax({
+		            url: "{% url 'delete_themes' groupid %}",
+		            type: 'POST',
+		            data:{
+		            	context_theme: "{{node.pk}}",
+		            	deleteobjects: str,
+		            	csrfmiddlewaretoken: '{{ csrf_token }}'
+		            },
+             		success: function(result){
+
+             			$("#deletion_results").html("");
+                        for(var obj in result)
+                        {
+	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
+                        }
+
+             		},
+             	});
+
+           	}
+           	else
+           	{
+        		alert("select object to delete")
+        	}
+
+	    });
+
+
+		// Script for delete themes after confirm delete.
+		$(document).on('click',".button.confirmDeleteObjects",function(){
+	        var selectedobject = $(".objectsCheckbox input:checked")
+
+	        if(selectedobject.length > 0)
+	        {
+	            var i = 0;
+	            var str = "";  
+
+	            $.map(selectedobject,function(each){
+	            	if(i == 0)
+	            	{
+	            		str = str.concat(each.parentElement.id)
+	            	}
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+
+	                i= i+1
+	            });
+
+	            $.ajax({
+	            	url: "{% url 'delete_themes' groupid %}",
+	             	type: 'POST',
+	             	data:{
+		            	context_theme: "{{node.pk}}",
+	             		deleteobjects: str,
+	             		confirm:"yes",
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(result){
+	             		alert("Themes deleted successfully");
+	             		$('#myModal').foundation('reveal', 'close');
+	             		location.reload(true);
+	             	},
+	             	
+	            });
+	             
+	        }
+	        else{
+	        alert("select object to delete")
+	        }
+
+		});
+
+
+  </script>
+
+
+	{% if themes_hierarchy %}  <!-- bool -->
+
+		<h2> {{node.name}}</h2> 
+		<div class="row">
+		<div class="large-4 columns">
+
+			{% if user_access == "allow" %}
+
+	          <a class="button tiny" data-reveal-id="view_add_page" title="Add Theme Item">
+	            +&nbsp;Add Theme Item
+	          </a>
+
+	          <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
+
+	              <h3>Add New Theme Item:</h3>
+	              <!-- To enter name of theme item -->
+	              <div>
+	                <input class="name_id" name="name" type="text" placeholder="Enter name...">
+	              </div>   <br/>           
+
+	              <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
+
+	              <a class="close-reveal-modal">&#215;</a>
+
+	          </div>          
+	        {% endif %}
+	    </div>
+
+        <div class="large-4 columns">
+
+			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Tree Browser" %} </b></a> &nbsp;&nbsp;&nbsp;
+			<ul id="hover1" class="f-dropdown" data-dropdown-content>
+				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
+				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
+			</ul> 
+			
+			<a class="collapsible_tree" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Collapsible Tree" %} </b></a>
+
+		</div>
+
+		<div class="large-4 columns">
+		{% if user.is_authenticated %}
+    		{% if user_access == "allow" %}
+    		
+    			<input class="button tiny deleteObjects right" type="button" value="Delete">
+    			<span class="right"><input class="checkedAll" type="checkbox"> Select All &nbsp;&nbsp;</span>
+
+    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
+        
+			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
+			        
+			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
+			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
+			        <div id="deletion_results"></div>
+			        <a class="close-reveal-modal">&#215;</a>
+
+		      	</div>		
+
+    		{% endif %}
+		{% endif %}
+		</div>
+		</div>
+		<hr/>
+
+	{% endif %}