Revision 1d70dbce djnro/templates/edumanage/welcome.html

b/djnro/templates/edumanage/welcome.html
3 3
{% load staticfiles %}
4 4

  
5 5
{% block currentpagetitle %}Management{% endblock %}
6
{% block manage %}active{% endblock %}
6 7

  
7
{% block extrahead %} <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script %}>
8
<script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script>
9
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
10
<script type="text/javascript">
11
	var lat = "{{MAP_CENTER.0}}";
12
	var lat = parseFloat(lat.replace(",","."));
13
	var lng = "{{MAP_CENTER.1}}";
14
	var lng = parseFloat(lng.replace(",","."));
15
	var zoomLevel = 6;
16
	var latlng = new google.maps.LatLng(lat,lng);
17
	var map = '';
18
	var bounds = '';
19
	var image = '';
20
	var infoWindow;
21

  
22
var styles = [{
23
	url: '{% static 'img/edugroup.png' %}',
24
	height: 54,
25
	width: 63,
26
	textColor: '#ffffff',
27
	textSize: 11
28
	},
29
	{
30
	url: '{% static 'img/edugroup.png' %}',
31
	height: 54,
32
	width: 63,
33
	textColor: '#ffffff',
34
	textSize: 11
35
	},
36
	{
37
	url: '{% static 'img/edugroup.png' %}',
38
	height: 54,
39
	width: 63,
40
	textColor: '#ffffff',
41
	textSize: 11
42
}];
43

  
44
function initialize() {
45
	image = new google.maps.MarkerImage('{% static 'img/edupin.png' %}',
46
	// This marker is 29 pixels wide by 40 pixels tall.
47
	new google.maps.Size(29, 40),
48
	// The origin for this image is 0,0.
49
	new google.maps.Point(0,0),
50
	// The anchor for this image is the base of the flagpole at 18,42.
51
	new google.maps.Point(14, 40)
52
);
53
var styleArray = [
54
{
55
	featureType: "all",
56
	stylers: [
57
	{ saturation: -60 },
58
	{gamma: 1.00 }
59
	]
60
	},{
61
	featureType: "poi.business",
62
	elementType: "labels",
63
	stylers: [
64
	{ visibility: "off" }
65
	]
66
	},
67
	{ "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },
68
	{ "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] },
69
	{'featureType': "administrative.country",
70
	'elementType': "labels",
71
	'stylers': [
72
	{ 'visibility': "off" }
73
	]}
74

  
75
];
76
var mapOptions = {
77
	center : latlng,
78
	zoom : zoomLevel,
79
	mapTypeId : google.maps.MapTypeId.ROADMAP,
80
	styles: styleArray,
81
	mapTypeId: google.maps.MapTypeId.ROADMAP,
82
	mapTypeControlOptions: {
83
	style: google.maps.MapTypeControlStyle.DEFAULT
84
	},
85
	navigationControl: true,
86
	mapTypeControl: false,
87
	};
88
	map = new google.maps.Map(document.getElementById("map_canvas"),
89
	mapOptions);
90

  
91
	bounds = new google.maps.LatLngBounds();
92
	infoWindow = new google.maps.InfoWindow();
93

  
94
}
95

  
96

  
97
function placeMarkers(){
98
var markers = new Array();
99
$.get("{% url get-service-points %}", function(data){
100
	$.each(data, function(index, jsonMarker) {
101
	var marker = createMarker(jsonMarker);
102
	if (marker){
103
	bounds.extend(marker.position);
104
	markers.push(marker);
105
	google.maps.event.addListener(marker, 'click', function() {
106
		infoWindow.setContent( "<div><h4>"+jsonMarker.name+"</h4>"+
107

  
108
	"<div class='tabbable'>"+
109
    "<ul class='nav nav-tabs'>"+
110
    "<li class='active'><a href='#tab1' data-toggle='tab'>{% trans 'Info' %}</a></li>"+
111
    "<li><a href='#tab2' data-toggle='tab'>{% trans 'More...' %}</a></li>"+
112
    "</ul>"+
113
    "<div class='tab-content'>"+
114
    "<div class='tab-pane active' id='tab1'>"+
115
    "<dl class='dl-horizontal'>"+
116
			"<dt>Name</dt><dd>"+jsonMarker.name+"&nbsp;</dd>"+
117
			"<dt>Address</dt><dd>"+jsonMarker.address+"&nbsp;</dd>"+
118
			"<dt>Encryption</dt><dd>"+jsonMarker.enc+"&nbsp;</dd>"+
119
			"<dt>SSID</dt><dd>"+jsonMarker.SSID+"&nbsp;</dd>"+
120
			"<dt>Number of APs</dt><dd>"+jsonMarker.AP_no+"&nbsp;</dd></dl>"+
121
    "</div>"+
122
    "<div class='tab-pane' id='tab2'>"+
123
    "<dl class='dl-horizontal'>"+
124
			"<dt>Port Restrict</dt><dd>"+jsonMarker.port_restrict+"&nbsp;</dd>"+
125
			"<dt>transp_proxy</dt><dd>"+jsonMarker.transp_proxy+"&nbsp;</dd>"+
126
			"<dt>IPv6</dt><dd>"+jsonMarker.IPv6+"&nbsp;</dd>"+
127
			"<dt>NAT</dt><dd>"+jsonMarker.NAT+"&nbsp;</dd>"+
128
			"<dt>Wired</dt><dd>"+jsonMarker.wired+"&nbsp;</dd></dl>"+
129
    "</div>"+
130
    "</div>"+
131
    "</div>"+
132
    "<div style='text-align:right;'><a href = '{% url edit-services  %}"+jsonMarker.key+"' class='btn btn-primary'>Edit</a></div>"+
133
    "</div>");
134
		infoWindow.open(map,marker);
135
     });
136
	}
137
	});
138
	var mcOptions = {gridSize: 50, maxZoom: 15, styles: styles};
139

  
140

  
141

  
142
	var markerCluster = new MarkerClusterer(map, markers, mcOptions);
143
	map.fitBounds(bounds)
144
	});
145
	}
146

  
147
	function createMarker(markerObj){
148
	var title = markerObj.name;
149
	var latLng = new google.maps.LatLng(markerObj.lat, markerObj.lng);
150
	var marker = new google.maps.Marker({
151
	'position' : latLng,
152
	'map' : map,
153
	'title': title,
154
	'icon': image,
155
	});
156
	return marker;
157
	}
158

  
159
	function clusterMarkers(markers){
160
	var markerCluster = new MarkerClusterer(map, markers);
161
	}
162

  
163
	$(document).ready(function() {
164
{% if services %}
165
	initialize();
166
	marks = placeMarkers();
167
	clusterMarkers(marks);
168
{% endif %}});</script>
169
{% endblock %}
170 8
{% block headtitle %}eduroam@Greece admin{% endblock %}
171
    {% block topmenu %}
172
    <ul class="nav">
173
        <li>
174
        	{% load tolocale %}
175
           <a class="brand" href="{% url manage %}" style="font-size: 14px;">{% if institution_exists %}{% tolocale institution LANGUAGE_CODE %}{% else %}Management{% endif %}</a>
176
        </li>
177

  
178 9

  
179
    </ul>
180
    {% endblock %}
181 10
{% block content %}
182
<div class="container-fluid">
183
	<div class="row-fluid">
184
		<div class="span2"></div>
185
		<div class="span10">
186
			<div class="row-fluid"><div class="span12">
187
				<ul class="breadcrumb" style="display: inline-table; padding: 0">
188
					{% block crumbs %}
189
	    			<li class="active">{% trans "Home" %}</li>
190
	    			{% endblock %}
191
	    		</ul>
192
			<p class="pull-right"><strong>{{user}}</strong> (<a href="{% url logout %}">{% trans "Logout" %}</a>)</p>
193
			</div></div>
11
<div class="row" style="margin: 0">
12
	<div class="col-md-2">
13
		<div class="push-top"></div>
14
		<div class="well sidebar-nav">
15
			<ul class="nav nav-list">
16
				<li {% block homeactive %}class="active"{% endblock %}>
17
					<a href="{% url manage %}">{% trans "Home" %}</a>
18
				</li>
19
				{% if institution_exists %}
20
				<li {% block instactive %}{% endblock %}>
21
					<a href="{% url institutions %}">{% trans "Institution" %} {% if not institutiondetails %}<font style="color: red; font-weight: bold; font-size: 14px;">(!)</font>{% endif %}</a>
22
				</li>
23
				{% endif %}
24
				{% if institutiondetails %}
25
				<li {% block servicesactive %}{% endblock %}>
26
					<a href="{% url services %}">{% trans "Locations" %} ({{services_num}})</a>
27
				</li>
28
				<li {% block serversactive %}{% endblock %}>
29
					<a href="{% url servers %}">{% trans "Servers" %} ({{servers_num}})</a>
30
				</li>
31
				<li {% block realmsactive %}{% endblock %}>
32
					<a href="{% url realms %}">{% trans "Realms" %} ({{realms_num}})</a>
33
				</li>
34
				<li {% block instrealmmon %}{% endblock %}>
35
					<a href="{% url instrealmmon %}">{% trans "Monitored Realms" %} ({{monrealms_num}})</a>
36
				</li>
37
				<li {% block contactsactive %}{% endblock %}>
38
					<a href="{% url contacts %}">{% trans "Contacts" %} ({{contacts_num}})</a>
39
				</li>
40
				{% if CAT_INSTANCES %}
41
				<li {% block catactive %}{% endblock %}>
42
					<a href="{% url catenroll %}">{% trans "eduroam CAT" %}</a>
43
				</li>
44
				{% endif %}
45

  
46
				{% endif %}
47
			</ul>
194 48
		</div>
195 49
	</div>
196
	<div class="row-fluid">
197
		<div class="span2">
198
			<div class="well sidebar-nav">
199
				<ul class="nav nav-list">
200
					<li {% block homeactive %}class="active"{% endblock %}>
201
						<a href="{% url manage %}">{% trans "Home" %}</a>
202
					</li>
203
					{% if institution_exists %}
204
					<li {% block instactive %}{% endblock %}>
205
						<a href="{% url institutions %}">{% trans "Institution" %} {% if not institutiondetails %}<font style="color: red; font-weight: bold; font-size: 14px;">(!)</font>{% endif %}</a>
206
					</li>
207
					{% endif %}
208
					{% if institutiondetails %}
209
					<li {% block servicesactive %}{% endblock %}>
210
						<a href="{% url services %}">{% trans "Locations" %} ({{services_num}})</a>
211
					</li>
212
					<li {% block serversactive %}{% endblock %}>
213
						<a href="{% url servers %}">{% trans "Servers" %} ({{servers_num}})</a>
214
					</li>
215
					<li {% block realmsactive %}{% endblock %}>
216
						<a href="{% url realms %}">{% trans "Realms" %} ({{realms_num}})</a>
217
					</li>
218
					<li {% block instrealmmon %}{% endblock %}>
219
						<a href="{% url instrealmmon %}">{% trans "Monitored Realms" %} ({{monrealms_num}})</a>
220
					</li>
221
					<li {% block contactsactive %}{% endblock %}>
222
						<a href="{% url contacts %}">{% trans "Contacts" %} ({{contacts_num}})</a>
223
					</li>
224
					{% if CAT_INSTANCES %}
225
					<li {% block catactive %}{% endblock %}>
226
						<a href="{% url catenroll %}">{% trans "eduroam CAT" %}</a>
227
					</li>
228
					{% endif %}
50
	<div class="col-lg-10">
51
		 <div class="row">
52
			<div class="col-md-12">
53
			{% block management_content %}
54
			{% if not institution_exists %}
55
		                <table class="table table-condensed">
56
				    <tr class="error"><td>You are not associated with any institution. Please contact your administrator<td></tr>
57
				</table>
58
			{% else %}
59
				<h4>{% trans "Home" %} - {% trans "Service Locations" %} </h4>
60
	              		<hr>
61
				{% if services %}
62
					<div id="map_canvas" data-group="{% static 'img/edugroup.png' %}" data-pin="{% static 'img/edupin.png' %}" data-center-lat="{{MAP_CENTER.0}}" data-center-lng="{{MAP_CENTER.1}}" data-service="{% url get-service-points %}" data-service-edit="{% url edit-services  %}" style="width:100%; height:450px;"></div>
63
				{% else %}
64
					<div>
65
						{% if institutiondetails %}
66
							{% trans "No services defined yet"%}!
67
							<a href="{% url edit-services %}" class="btn btn-primary">
68
								{% trans "Add new service" %}
69
							</a>
70
						{% else %}
71
							Specify your institution details to proceed <a class="btn btn-small btn-primary" href="{% url edit-institution institution.pk %}">{% trans "Edit" %}</a>
72
						{% endif %}
73
					</div>
74
				{% endif %}
75
			{% endif %}
76
			{% endblock %}
77
			</div>
78
		</div>
79
	</div>
80
</div>
229 81

  
230
					{% endif %}
231
				</ul>
232
			</div><!--/.well -->
233
		</div><!--/span-->
234
		<div class="span10">
235
			<div class="row-fluid">
236
				<!--/span-->
237
				<div class="span12">
238
				{% if not institution_exists %}
239
	                <table class="table table-condensed">
240
					    <tr class="error"><td>You are not associated with any institution. Please contact your administrator<td></tr>
241
					</table>
242
				  {% endif %}
243
				  {% if institution_exists %}
244
					{% block subcontent %}
245 82

  
83
{% endblock %}
246 84

  
247
					<h4>{% trans "Home" %} - {% trans "Service Locations" %} - {% tolocale institution LANGUAGE_CODE %}</h4>
248
              		<hr>
249
					{% if services %} <div id="map_canvas" style="width:100%; height:450px;"></div>
250
					{% else %}
251
					<div>{% if institutiondetails %}{% trans "No services defined yet"%}! <a href="{% url edit-services %}" class="btn btn-primary">{% trans "Add new service" %}</a>{% else %}Specify your institution details to proceed <a class="btn btn-small btn-primary" href="{% url edit-institution institution.pk %}">{% trans "Edit" %}</a>{% endif %}</div>
252
					{% endif %}
253 85

  
254
					{% endblock %}{% endif %}
255
				</div><!--/span-->
256
				<!--/span-->
257
			</div><!--/row-->
258
		</div><!--/span-->
259
	</div><!--/row-->
260
</div><!--/.fluid-container-->
86
{% block extrajs %}
87
<script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script>
88
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
89
<script type="text/javascript" src="{% static 'js/management-map.js' %}"></script>
261 90
{% endblock %}

Also available in: Unified diff