Added jquery datatables

edumanage/views.py

@@ -206,7 +206,16 @@ def get_service_points(request):
             response_location = {}
             response_location['lat'] = u"%s"%sl.latitude
             response_location['lng'] = u"%s"%sl.longitude
+            response_location['address'] = u"%s<br>%s"%(sl.address_street, sl.address_city)
+            response_location['enc'] = u"%s"%(sl.enc_level)
+            response_location['AP_no'] = u"%s"%(sl.AP_no)
             response_location['name'] = sl.loc_name.get(lang='en').name
+            response_location['port_restrict'] = u"%s"%(sl.port_restrict)
+            response_location['transp_proxy'] = u"%s"%(sl.transp_proxy)
+            response_location['IPv6'] = u"%s"%(sl.IPv6)
+            response_location['NAT'] = u"%s"%(sl.NAT)
+            response_location['wired'] = u"%s"%(sl.wired)
+            response_location['SSID'] = u"%s"%(sl.SSID)
             response_location['key'] = u"%s"%sl.pk
             locs.append(response_location)
         return HttpResponse(json.dumps(locs), mimetype='application/json')

static/css/style.css

@@ -8,4 +8,69 @@
 
 .side-menu > li:first-child > a {
     border-radius: 6px 6px 0 0;
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *
+ * Everything below this line is the same as demo_table.css. This file is
+ * required for 'cleanliness' of the markup
+ *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables features
+ */
+
+div.dataTables_length label {
+	float: left;
+	text-align: left;
+}
+
+div.dataTables_length select {
+	width: 75px;
+}
+
+div.dataTables_filter label {
+	float: right;
+}
+
+div.dataTables_info {
+	padding-top: 8px;
+}
+
+div.dataTables_paginate {
+	float: right;
+	margin: 0;
+}
+
+table.table {
+	clear: both;
+	margin-bottom: 6px !important;
+}
+
+table.table thead .sorting,
+table.table thead .sorting_asc,
+table.table thead .sorting_desc,
+table.table thead .sorting_asc_disabled,
+table.table thead .sorting_desc_disabled {
+	cursor: pointer;
+	*cursor: hand;
+}
+
+table.table thead .sorting { background: url('/static/img/sort_both.png') no-repeat center right; }
+table.table thead .sorting_asc { background: url('/static/img/sort_asc.png') no-repeat center right; }
+table.table thead .sorting_desc { background: url('/static/img/sort_desc.png') no-repeat center right; }
+
+table.table thead .sorting_asc_disabled { background: url('/static/img/sort_asc_disabled.png') no-repeat center right; }
+table.table thead .sorting_desc_disabled { background: url('/static/img/sort_desc_disabled.png') no-repeat center right; }
+
+table.dataTable th:active {
+	outline: none;
+}
+
+
+tr.even {
+	background: #eaeaea;
 }
\ No newline at end of file

static/js/datatables_bootstrap.js

+/* Default class modification */
+$.extend( $.fn.dataTableExt.oStdClasses, {
+	"sWrapper": "dataTables_wrapper form-inline"
+} );
+
+/* API method to get paging information */
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+{
+	return {
+		"iStart":         oSettings._iDisplayStart,
+		"iEnd":           oSettings.fnDisplayEnd(),
+		"iLength":        oSettings._iDisplayLength,
+		"iTotal":         oSettings.fnRecordsTotal(),
+		"iFilteredTotal": oSettings.fnRecordsDisplay(),
+		"iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+		"iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+	};
+}
+
+/* Bootstrap style pagination control */
+$.extend( $.fn.dataTableExt.oPagination, {
+	"bootstrap": {
+		"fnInit": function( oSettings, nPaging, fnDraw ) {
+			var oLang = oSettings.oLanguage.oPaginate;
+			var fnClickHandler = function ( e ) {
+				e.preventDefault();
+				if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+					fnDraw( oSettings );
+				}
+			};
+
+			$(nPaging).addClass('pagination').append(
+				'<ul>'+
+					'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
+					'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
+				'</ul>'
+			);
+			var els = $('a', nPaging);
+			$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
+			$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
+		},
+
+		"fnUpdate": function ( oSettings, fnDraw ) {
+			var iListLength = 5;
+			var oPaging = oSettings.oInstance.fnPagingInfo();
+			var an = oSettings.aanFeatures.p;
+			var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
+
+			if ( oPaging.iTotalPages < iListLength) {
+				iStart = 1;
+				iEnd = oPaging.iTotalPages;
+			}
+			else if ( oPaging.iPage <= iHalf ) {
+				iStart = 1;
+				iEnd = iListLength;
+			} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+				iStart = oPaging.iTotalPages - iListLength + 1;
+				iEnd = oPaging.iTotalPages;
+			} else {
+				iStart = oPaging.iPage - iHalf + 1;
+				iEnd = iStart + iListLength - 1;
+			}
+
+			for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
+				// Remove the middle elements
+				$('li:gt(0)', an[i]).filter(':not(:last)').remove();
+
+				// Add the new list items and their event handlers
+				for ( j=iStart ; j<=iEnd ; j++ ) {
+					sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+					$('<li '+sClass+'><a href="#">'+j+'</a></li>')
+						.insertBefore( $('li:last', an[i])[0] )
+						.bind('click', function (e) {
+							e.preventDefault();
+							oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
+							fnDraw( oSettings );
+						} );
+				}
+
+				// Add / remove disabled classes from the static elements
+				if ( oPaging.iPage === 0 ) {
+					$('li:first', an[i]).addClass('disabled');
+				} else {
+					$('li:first', an[i]).removeClass('disabled');
+				}
+
+				if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+					$('li:last', an[i]).addClass('disabled');
+				} else {
+					$('li:last', an[i]).removeClass('disabled');
+				}
+			}
+		}
+	}
+} );
\ No newline at end of file

static/js/infobox_packed.js

+eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 8(a){a=a||{};9.p.1O.2h(2,33);2.M=a.1s||"";2.1A=a.1n||G;2.Y=a.1F||0;2.E=a.1y||1e 9.p.1V(0,0);2.z=a.X||1e 9.p.2x(0,0);2.T=a.S||t;2.1k=a.1j||"2d";2.1i=a.D||{};2.1C=a.1B||"35";2.K=a.1g||"31://2W.9.2Q/2J/2I/2G/1v.2D";3(a.1g===""){2.K=""}2.17=a.1x||1e 9.p.1V(1,1);2.V=a.1o||G;2.16=a.1m||G;2.1J=a.2j||"2g";2.14=a.1q||G;2.4=t;2.w=t;2.P=t;2.O=t;2.B=t;2.N=t}8.q=1e 9.p.1O();8.q.24=6(){5 i;5 f;5 a;5 d=2;5 c=6(e){e.21=Z;3(e.15){e.15()}};5 b=6(e){e.2Z=G;3(e.1Y){e.1Y()}3(!d.14){c(e)}};3(!2.4){2.4=1f.2P("2M");2.1d();3(s 2.M.1r==="r"){2.4.L=2.F()+2.M}v{2.4.L=2.F();2.4.1a(2.M)}2.2C()[2.1J].1a(2.4);2.1z();3(2.4.7.C){2.N=Z}v{3(2.Y!==0&&2.4.W>2.Y){2.4.7.C=2.Y;2.4.7.2z="2w";2.N=Z}v{a=2.1N();2.4.7.C=(2.4.W-a.Q-a.13)+"12";2.N=G}}2.1p(2.1A);3(!2.14){2.B=[];f=["2p","1L","2o","2n","1K","2m","2l","2k","2i"];1l(i=0;i<f.1I;i++){2.B.1H(9.p.u.19(2.4,f[i],c))}2.B.1H(9.p.u.19(2.4,"1L",6(e){2.7.1G="2f"}))}2.O=9.p.u.19(2.4,"2e",b);9.p.u.R(2,"2c")}};8.q.F=6(){5 a="";3(2.K!==""){a="<2b";a+=" 2a=\'"+2.K+"\'";a+=" 29=13";a+=" 7=\'";a+=" X: 28;";a+=" 1G: 27;";a+=" 26: "+2.1C+";";a+="\'>"}J a};8.q.1z=6(){5 a;3(2.K!==""){a=2.4.3d;2.w=9.p.u.19(a,\'1K\',2.25())}v{2.w=t}};8.q.25=6(){5 a=2;J 6(e){e.21=Z;3(e.15){e.15()}9.p.u.R(a,"3c");a.1v()}};8.q.1p=6(d){5 m;5 n;5 e=0,H=0;3(!d){m=2.3a();3(m 39 9.p.38){3(!m.23().37(2.z)){m.36(2.z)}n=m.23();5 a=m.34();5 h=a.W;5 f=a.22;5 k=2.E.C;5 l=2.E.1h;5 g=2.4.W;5 b=2.4.22;5 i=2.17.C;5 j=2.17.1h;5 o=2.20().32(2.z);3(o.x<(-k+i)){e=o.x+k-i}v 3((o.x+g+k+i)>h){e=o.x+g+k+i-h}3(2.16){3(o.y<(-l+j+b)){H=o.y+l-j-b}v 3((o.y+l+j)>f){H=o.y+l+j-f}}v{3(o.y<(-l+j)){H=o.y+l-j}v 3((o.y+b+l+j)>f){H=o.y+b+l+j-f}}3(!(e===0&&H===0)){5 c=m.30();m.2Y(e,H)}}}};8.q.1d=6(){5 i,D;3(2.4){2.4.2X=2.1k;2.4.7.2V="";D=2.1i;1l(i 2U D){3(D.2R(i)){2.4.7[i]=D[i]}}3(s 2.4.7.18!=="r"&&2.4.7.18!==""){2.4.7.2O="2N(18="+(2.4.7.18*2L)+")"}2.4.7.X="2K";2.4.7.11=\'1u\';3(2.T!==t){2.4.7.S=2.T}}};8.q.1N=6(){5 c;5 a={1c:0,1b:0,Q:0,13:0};5 b=2.4;3(1f.1t&&1f.1t.1W){c=b.2H.1t.1W(b,"");3(c){a.1c=A(c.1U,10)||0;a.1b=A(c.1T,10)||0;a.Q=A(c.1X,10)||0;a.13=A(c.1S,10)||0}}v 3(1f.2F.I){3(b.I){a.1c=A(b.I.1U,10)||0;a.1b=A(b.I.1T,10)||0;a.Q=A(b.I.1X,10)||0;a.13=A(b.I.1S,10)||0}}J a};8.q.2E=6(){3(2.4){2.4.2S.2T(2.4);2.4=t}};8.q.1E=6(){2.24();5 a=2.20().2B(2.z);2.4.7.Q=(a.x+2.E.C)+"12";3(2.16){2.4.7.1b=-(a.y+2.E.1h)+"12"}v{2.4.7.1c=(a.y+2.E.1h)+"12"}3(2.V){2.4.7.11=\'1u\'}v{2.4.7.11="1R"}};8.q.2A=6(a){3(s a.1j!=="r"){2.1k=a.1j;2.1d()}3(s a.D!=="r"){2.1i=a.D;2.1d()}3(s a.1s!=="r"){2.1Q(a.1s)}3(s a.1n!=="r"){2.1A=a.1n}3(s a.1F!=="r"){2.Y=a.1F}3(s a.1y!=="r"){2.E=a.1y}3(s a.1m!=="r"){2.16=a.1m}3(s a.X!=="r"){2.1w(a.X)}3(s a.S!=="r"){2.1P(a.S)}3(s a.1B!=="r"){2.1C=a.1B}3(s a.1g!=="r"){2.K=a.1g}3(s a.1x!=="r"){2.17=a.1x}3(s a.1o!=="r"){2.V=a.1o}3(s a.1q!=="r"){2.14=a.1q}3(2.4){2.1E()}};8.q.1Q=6(a){2.M=a;3(2.4){3(2.w){9.p.u.U(2.w);2.w=t}3(!2.N){2.4.7.C=""}3(s a.1r==="r"){2.4.L=2.F()+a}v{2.4.L=2.F();2.4.1a(a)}3(!2.N){2.4.7.C=2.4.W+"12";3(s a.1r==="r"){2.4.L=2.F()+a}v{2.4.L=2.F();2.4.1a(a)}}2.1z()}9.p.u.R(2,"2y")};8.q.1w=6(a){2.z=a;3(2.4){2.1E()}9.p.u.R(2,"1Z")};8.q.1P=6(a){2.T=a;3(2.4){2.4.7.S=a}9.p.u.R(2,"2v")};8.q.2u=6(){J 2.M};8.q.1D=6(){J 2.z};8.q.2t=6(){J 2.T};8.q.2s=6(){2.V=G;3(2.4){2.4.7.11="1R"}};8.q.2r=6(){2.V=Z;3(2.4){2.4.7.11="1u"}};8.q.2q=6(c,b){5 a=2;3(b){2.z=b.1D();2.P=9.p.u.3b(b,"1Z",6(){a.1w(2.1D())})}2.1M(c);3(2.4){2.1p()}};8.q.1v=6(){5 i;3(2.w){9.p.u.U(2.w);2.w=t}3(2.B){1l(i=0;i<2.B.1I;i++){9.p.u.U(2.B[i])}2.B=t}3(2.P){9.p.u.U(2.P);2.P=t}3(2.O){9.p.u.U(2.O);2.O=t}2.1M(t)};',62,200,'||this|if|div_|var|function|style|InfoBox|google||||||||||||||||maps|prototype|undefined|typeof|null|event|else|closeListener_|||position_|parseInt|eventListeners_|width|boxStyle|pixelOffset_|getCloseBoxImg_|false|yOffset|currentStyle|return|closeBoxURL_|innerHTML|content_|fixedWidthSet_|contextListener_|moveListener_|left|trigger|zIndex|zIndex_|removeListener|isHidden_|offsetWidth|position|maxWidth_|true||visibility|px|right|enableEventPropagation_|stopPropagation|alignBottom_|infoBoxClearance_|opacity|addDomListener|appendChild|bottom|top|setBoxStyle_|new|document|closeBoxURL|height|boxStyle_|boxClass|boxClass_|for|alignBottom|disableAutoPan|isHidden|panBox_|enableEventPropagation|nodeType|content|defaultView|hidden|close|setPosition|infoBoxClearance|pixelOffset|addClickHandler_|disableAutoPan_|closeBoxMargin|closeBoxMargin_|getPosition|draw|maxWidth|cursor|push|length|pane_|click|mouseover|setMap|getBoxWidths_|OverlayView|setZIndex|setContent|visible|borderRightWidth|borderBottomWidth|borderTopWidth|Size|getComputedStyle|borderLeftWidth|preventDefault|position_changed|getProjection|cancelBubble|offsetHeight|getBounds|createInfoBoxDiv_|getCloseClickHandler_|margin|pointer|relative|align|src|img|domready|infoBox|contextmenu|default|floatPane|apply|touchmove|pane|touchend|touchstart|dblclick|mouseup|mouseout|mousedown|open|hide|show|getZIndex|getContent|zindex_changed|auto|LatLng|content_changed|overflow|setOptions|fromLatLngToDivPixel|getPanes|gif|onRemove|documentElement|mapfiles|ownerDocument|en_us|intl|absolute|100|div|alpha|filter|createElement|com|hasOwnProperty|parentNode|removeChild|in|cssText|www|className|panBy|returnValue|getCenter|http|fromLatLngToContainerPixel|arguments|getDiv|2px|setCenter|contains|Map|instanceof|getMap|addListener|closeclick|firstChild'.split('|'),0,{}))
\ No newline at end of file

static/js/jquery_csrf_protect.js

+$(document).ajaxSend(function(event, xhr, settings) {
+    function getCookie(name) {
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+    function sameOrigin(url) {
+        // url could be relative or scheme relative or absolute
+        var host = document.location.host; // host + port
+        var protocol = document.location.protocol;
+        var sr_origin = '//' + host;
+        var origin = protocol + sr_origin;
+        // Allow absolute or scheme relative URLs to same origin
+        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
+            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
+            // or any other URL that isn't scheme relative or absolute i.e relative.
+            !(/^(\/\/|http:|https:).*/.test(url));
+    }
+    function safeMethod(method) {
+        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+    }
+
+    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
+        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
+    }
+});
\ No newline at end of file

templates/base.html

@@ -13,7 +13,8 @@
         padding: 9px 0;
       }
     </style>
-    
+	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
+	<script src="/static/js/bootstrap.min.js"></script>
 {% block extrahead %}{% endblock %}
 </head>
 <body>
@@ -110,7 +111,5 @@
 
     </div><!--/.fluid-container-->
 	{% endblock %}
-	<script src="http://code.jquery.com/jquery-latest.js"></script>
-	<script src="/static/js/bootstrap.min.js"></script>
 </body>
 </html>
\ No newline at end of file

templates/edumanage/servers.html

 {% extends "edumanage/welcome.html"%}
+{% load i18n %}
+{% block extrahead %}
+<script type="text/javascript" src="/static/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="/static/js/datatables_bootstrap.js"></script>
+<script type="text/javascript">
+$(document).ready(function(){
+	 {% if servers %}
+var oTable = $('#table').dataTable({
+	"sPaginationType": "bootstrap",
+	"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
+	"aoColumns": [{
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bVisible": true,
+        "bSearchable": false,
+        "bSortable": false
+    }],
+    "aaSorting": [[0, 'desc']],
+    "iDisplayLength": 25,
+    "oSearch": {"bSmart": false, "bRegex":true},
+    "oLanguage": {
+    	"sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> {% trans "servers" %}',
+        "sProcessing":   "Processing...",
+        "sZeroRecords": '{% trans "No records to display" %}',
+        "sInfo":         "Showing _START_ to _END_ of _TOTAL_ entries",
+        "sInfoEmpty":    "{% trans "Showing 0 to 0 of 0 entries" %}",
+        "sInfoFiltered": "(filtered from _MAX_ total entries)",
+        "sInfoPostFix":  "",
+        "sSearch":       '{% trans "Search:" %}',
+        "sUrl":          "",
+        "oPaginate": {
+            "sFirst":    '{% trans "First" %}',
+            "sPrevious": '{% trans "Previous" %}',
+            "sNext":     '{% trans "Next" %}',
+            "sLast":     '{% trans "Last" %}'
+        }
+    }
+});
 
+oTable.fnDraw();
+
+{% endif %}
+});
+</script>
+{% endblock %}
 
 	{% block navbar %}
 			
@@ -11,21 +77,36 @@
 
 	            	
 	              <h4>My Servers</h4>
-	              <div><a href="{% url edit-servers %}">Add new server</a></div>
-	              
+	              <div><a href="{% url edit-servers %}" class="btn btn-primary">Add new server</a></div>
+	              <div class="span10"></div>
 	              {% if servers %}
-	              <table class="table .table-bordered">
-	               <thead>
+	              <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" width="100%" id="table">
+					<thead>
 					<tr>
-					<th>Name</th>
-					<th>Action</th>
-					<th>Action</th>
+						<th>Name</th>
+						<th>Type</th>
+						<th>Port</th>
+						<th>acct_port</th>
+						<th>timeout</th>
+						<th>retry</th>
+						<th>status_server</th>
+						<th>proto</th>
+						<th style="text-align: center;">Action</th>
 					</tr>
 					</thead>
+
 					<tbody>
 	                {% for server in servers %}
-	              	<tr>
-	                	<td>{{server}}</td> <td><a href="{% url edit-servers server.pk %}">edit</a> </td><td><a href="{% url edit-servers server.pk %}">delete</a></td>
+	              	<tr class="GradeC">
+	                	<td>{{server.name}}</td>
+	                	<td>{{server.get_ertype_display}}</td>
+	                	<td>{{server.port}}</td>
+	                	<td>{{server.acct_port}}</td>
+	                	<td>{{server.timeout}}</td>
+	                	<td>{{server.retry}}</td>
+	                	<td>{{server.status_server}}</td>
+	                	<td>{{server.proto}}</td>
+	                	<td style="text-align: center;"><a href="{% url edit-servers server.pk %}" class="btn btn-small">edit</a> <a href="{% url edit-servers server.pk %}" class="btn btn-small btn-warning">delete</a></td>
 	                </tr>
 	              	{% endfor %}
 	              	</tbody>

templates/edumanage/services.html

 {% extends "edumanage/welcome.html"%}
+{% load i18n %}
+{% block extrahead %}
+<script type="text/javascript" src="/static/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="/static/js/datatables_bootstrap.js"></script>
+<script type="text/javascript">
+$(document).ready(function(){
+	 {% if services %}
+var oTable = $('#table').dataTable({
+	"sPaginationType": "bootstrap",
+	"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
+	"aoColumns": [{
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    }, {
+        "bSearchable": true,
+        "bSortable": true
+    },{
+        "bSearchable": true,
+        "bSortable": true
+    },{
+        "bVisible": true,
+        "bSearchable": false,
+        "bSortable": false
+    }],
+    "aaSorting": [[0, 'desc']],
+    "iDisplayLength": 25,
+    "oSearch": {"bSmart": false, "bRegex":true},
+    "oLanguage": {
+    	"sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> {% trans "services" %}',
+        "sProcessing":   "Processing...",
+        "sZeroRecords": '{% trans "No records to display" %}',
+        "sInfo":         "Showing _START_ to _END_ of _TOTAL_ entries",
+        "sInfoEmpty":    "{% trans "Showing 0 to 0 of 0 entries" %}",
+        "sInfoFiltered": "(filtered from _MAX_ total entries)",
+        "sInfoPostFix":  "",
+        "sSearch":       '{% trans "Search:" %}',
+        "sUrl":          "",
+        "oPaginate": {
+            "sFirst":    '{% trans "First" %}',
+            "sPrevious": '{% trans "Previous" %}',
+            "sNext":     '{% trans "Next" %}',
+            "sLast":     '{% trans "Last" %}'
+        }
+    }
+});
 
+oTable.fnDraw();
+
+{% endif %}
+});
+</script>
+{% endblock %}
 			{% block homeactive %}{% endblock %}
     		{% block servicesactive %}class="active"{% endblock %}
             {% block subcontent %}
               <h4>Services</h4>
-              <div><a href="{% url edit-services %}">Add new service</a></div>
+              <div><a href="{% url edit-services %}" class="btn btn-primary">Add new service</a></div>
+	              <div class="span10"></div>
               {% load tolocale %}
               {% if services %}
-                <table class="table .table-bordered">
+               <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" width="100%" id="table">
 	               <thead>
 					<tr>
 					<th>Name</th>
-					<th>Street</th>
-					<th>City</th>
-					<th>Action</th>
-					<th>Action</th>
+					<th>Address</th>
+					<th>SSID</th>
+					<th>enc_level</th>
+					<th>port_restrict</th>
+					<th>transp_proxy</th>
+					<th>NAT</th>
+					<th>IPv6</th>
+					<th>AP no</th>
+					<th>wired</th>
+					<th>Actions</th>
 					</tr>
 					</thead>
 					<tbody>
 	                {% for service in services %}
-	              	<tr>
-	                	<td>{% tolocale service LANGUAGE_CODE%}</td><td>{{service.address_street}}</td><td>{{service.address_city}}</td> <td><a href="{% url edit-services service.pk%}">edit</a> </td><td><a href="{% url edit-services service.pk%}">delete</a></td>
+	              	<tr class="GradeC">
+	                	<td>{% tolocale service LANGUAGE_CODE%}</td>
+	                	<td>{{service.address_street}}<br>{{service.address_city}}</td>
+	                	<td>{{service.SSID}}</td>
+	                	<td>{{service.enc_level}}</td>
+	                	<td>{{service.port_restrict}}</td>
+	                	<td>{{service.transp_proxy}}</td>
+	                	<td>{{service.NAT}}</td>
+	                	<td>{{service.IPv6}}</td>
+	                	<td>{{service.AP_no}}</td>
+	                	<td>{{service.wired}}</td>               	
+	                	<td style="text-align: center;"><a href="{% url edit-services service.pk %}" class="btn btn-small">edit</a> <a href="{% url edit-services service.pk %}" class="btn btn-small btn-warning">delete</a></td>
 	                </tr>
 	              	{% endfor %}
 	              	</tbody>
@@ -28,5 +117,5 @@
               {% else %}
               <div>No services defined yet (<a href="{% url edit-services %}">edit</a>)</div>
               {% endif %}
-           
+
 		{% endblock %}
\ No newline at end of file

templates/edumanage/welcome.html

@@ -10,7 +10,8 @@
 	var map = '';
 	var bounds = '';
 	var image = '';
-
+	var infoWindow;
+	
 var styles = [{
 	url: '/static/img/edugroup.png',
 	height: 54,
@@ -79,10 +80,13 @@ var mapOptions = {
 	};
 	map = new google.maps.Map(document.getElementById("map_canvas"),
 	mapOptions);
+	
 	bounds = new google.maps.LatLngBounds();
+	infoWindow = new google.maps.InfoWindow();
 
 }
 
+
 function placeMarkers(){
 var markers = new Array();
 $.get("{% url get-service-points %}", function(data){
@@ -90,10 +94,43 @@ $.get("{% url get-service-points %}", function(data){
 	var marker = createMarker(jsonMarker);
 	if (marker){
 	bounds.extend(marker.position);
-	markers.push(marker)
+	markers.push(marker);
+	google.maps.event.addListener(marker, 'click', function() {
+		infoWindow.content = "<div><h4>"+jsonMarker.name+"</h4>"+
+			
+	"<div class='tabbable'>"+ 
+    "<ul class='nav nav-tabs'>"+
+    "<li class='active'><a href='#tab1' data-toggle='tab'>Main</a></li>"+
+    "<li><a href='#tab2' data-toggle='tab'>Advanced</a></li>"+
+    "</ul>"+
+    "<div class='tab-content'>"+
+    "<div class='tab-pane active' id='tab1'>"+
+    "<dl class='dl-horizontal'>"+
+			"<dt>Name</dt><dd>"+jsonMarker.name+"</dd>"+
+			"<dt>Address</dt><dd>"+jsonMarker.address+"</dd>"+
+			"<dt>Encryption</dt><dd>"+jsonMarker.enc+"</dd>"+
+			"<dt>SSID</dt><dd>"+jsonMarker.SSID+"</dd>"+
+			"<dt>Number of APs</dt><dd>"+jsonMarker.AP_no+"</dd></dl>"+
+    "</div>"+
+    "<div class='tab-pane' id='tab2'>"+
+    "<dl class='dl-horizontal'>"+
+			"<dt>Port Restrict</dt><dd>"+jsonMarker.port_restrict+"</dd>"+
+			"<dt>transp_proxy</dt><dd>"+jsonMarker.transp_proxy+"</dd>"+
+			"<dt>IPv6</dt><dd>"+jsonMarker.IPv6+"</dd>"+
+			"<dt>NAT</dt><dd>"+jsonMarker.NAT+"</dd>"+
+			"<dt>Wired</dt><dd>"+jsonMarker.wired+"</dd></dl>"+
+    "</div>"+
+    "</div>"+
+    "</div>"+
+    "<div style='text-align:right;'><a href = '{% url edit-services  %}"+jsonMarker.key+"' class='btn btn-primary'>Edit</a></div>"+
+    "</div>";
+		infoWindow.open(map,marker);
+     });
 	}
 	});
 	var mcOptions = {gridSize: 50, maxZoom: 15, styles: styles};
+	
+	
 
 	var markerCluster = new MarkerClusterer(map, markers, mcOptions);
 	map.fitBounds(bounds)