From: Jordan Augé Date: Mon, 29 Jul 2013 14:50:45 +0000 (+0200) Subject: portal: updated views X-Git-Tag: myslice-0.2-1~86^2 X-Git-Url: http://git.onelab.eu/?p=myslice.git;a=commitdiff_plain;h=f89424cffcb881206feeb0506705c470d4a73092 portal: updated views plugin googlemaps: move to new api --- diff --git a/auth/views.py b/auth/views.py index 43ca56ea..f650c14e 100644 --- a/auth/views.py +++ b/auth/views.py @@ -7,7 +7,7 @@ from django.http import HttpResponseRedirect from auth.backend import MyCustomBackend -from myslice.viewutils import the_user +from myslice.viewutils import topmenu_items, the_user from myslice.config import Config def login_user(request): @@ -41,6 +41,7 @@ def login_user(request): state='' #Welcome to MySlice' env['state']=state env['username']=the_user(request) + env['topmenu_items'] = topmenu_items('', request) return render_to_response('view-login.html',env, context_instance=RequestContext(request)) # hard question : where should we redirect requests to logout if user is not logged in ? diff --git a/myslice/viewutils.py b/myslice/viewutils.py index a5f89f58..fd364bc2 100644 --- a/myslice/viewutils.py +++ b/myslice/viewutils.py @@ -14,14 +14,16 @@ standard_topmenu_items = [ # True: { 'label':'Logout', 'href':'/logout/'}} def topmenu_items (current,request=None): - result=deepcopy(standard_topmenu_items) has_user=request.user.is_authenticated() if has_user: - result.append({ 'label':'Request a slice', 'href': '/portal/slice/request/'}) + result=deepcopy(standard_topmenu_items) + result.append({ 'label':'Request a slice', 'href': '/portal/slice_request/'}) + else: + result = [] + result.append({ 'label':'Register', 'href': '/portal/user/register/'}) for d in result: #if d['label'].lower()find(current)>=0: d['is_active']=True if d['label'] == current: d['is_active']=True - print "CURRENT=", current if not request: return result # result.append (login_out_items [ has_user] ) return result diff --git a/plugins/googlemap/googlemap.js b/plugins/googlemap/googlemap.js index 2b0b88ac..8c3c0958 100644 --- a/plugins/googlemap/googlemap.js +++ b/plugins/googlemap/googlemap.js @@ -4,278 +4,351 @@ * License: GPLv3 */ -// xxx TODO -- this one could use a bit of cleaning like what was done for the first plugins -// especially wrt using 'instance' and 'data' in such a confusing way +/* + * It's a best practice to pass jQuery to an IIFE (Immediately Invoked Function + * Expression) that maps it to the dollar sign so it can't be overwritten by + * another library in the scope of its execution. + */ -(function( jQuery ){ +(function($){ - var methods = { - init : function( options ) { + // routing calls + jQuery.fn.GoogleMap = function( method ) { + if ( methods[method] ) { + return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'object' || ! method ) { + return methods.init.apply( this, arguments ); + } else { + jQuery.error( 'Method ' + method + ' does not exist on jQuery.GoogleMap' ); + } + }; - return this.each(function(){ - - var $this = jQuery(this), - data = $this.data('GoogleMap'), GoogleMap = jQuery('
', {text : $this.attr('title')}); - - // If the plugin hasn't been initialized yet - if ( ! data ) { + /*************************************************************************** + * Public methods + ***************************************************************************/ + + var methods = { + + /** + * @brief Plugin initialization + * @param options : an associative array of setting values + * @return : a jQuery collection of objects on which the plugin is + * applied, which allows to maintain chainability of calls + */ + init : function( options ) { + + return this.each(function(){ - /* Plugin initialization */ + var $this = $(this); - //google.load('maps', '3', { other_params: 'sensor=false' }); - //google.setOnLoadCallback(initialize); + /* An object that will hold private variables and methods */ + var plugin = new GoogleMaps(options); + $this.data('Manifold', plugin); - $this.data('map', null); - $this.data('markerCluster', null); - $this.data('markers', []); + plugin.initialize(); - var myLatlng = new google.maps.LatLng(options.latitude, options.longitude); - var myOptions = { - zoom: options.zoom, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP - } - - var map = new google.maps.Map(document.getElementById("map"), myOptions); - $this.data('map', map); + /* Events */ + $this.on('show.GoogleMaps', methods.show); + + $this.set_query_handler(options.query_uuid, plugin.query_handler); + $this.set_record_handler(options.query_uuid, plugin.record_handler); + $this.set_record_handler(options.query_all_uuid, plugin.record_handler_all); + + }); // this.each + }, // init + + /** + * @brief Plugin destruction + * @return : a jQuery collection of objects on which the plugin is + * applied, which allows to maintain chainability of calls + */ + destroy : function( ) { + + return this.each(function() { + var $this = $(this); + var hazelnut = $this.data('Manifold'); - /* End of plugin initialization */ + // Unbind all events using namespacing + $(window).unbind('Manifold'); - jQuery(this).data('GoogleMap', { - plugin_uuid: options.plugin_uuid, - query_uuid: options.query_uuid, - target : $this, - current_resources: Array(), - GoogleMap : GoogleMap + // Remove associated data + hazelnut.remove(); + $this.removeData('Manifold'); }); - /* Events */ - $this.on('show.GoogleMaps', methods.show); - - - /* Subscribe to query updates */ - jQuery.subscribe('/results/' + options.query_uuid + '/changed', {instance: $this}, update_map); - jQuery.subscribe('/update-set/' + options.query_uuid, {instance: $this}, on_resource_changed); - jQuery.subscribe('/query/' + options.query_uuid + '/changed', {instance: $this}, query_changed); - - //data = jQuery(this).data(); - - // TODO: Change the status of a node based on the actions in GoogleMap plugin or in other plugins (e.g. DataTables) - // Can we publish a value in results row['sliver'] ??? - // Today, the value is attached or undefined - // But can we think about a added/removed status ??? - // This plugin would update the map based on the results published - - } - }); - }, - destroy : function( ) { - - return this.each(function(){ - var $this = jQuery(this), data = $this.data('GoogleMap'); - jQuery(window).unbind('GoogleMap'); - data.GoogleMap.remove(); - $this.removeData('GoogleMap'); - }) - - }, -/* - reposition : function( ) { // ... }, - update : function( ) { // ... }, - hide : function( ) { // ... }, -*/ - show : function( content ) { - google.maps.event.trigger(map, 'resize'); - } - }; + }, // destroy - jQuery.fn.GoogleMap = function( method ) { - /* Method calling logic */ - if ( methods[method] ) { - return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); - } else if ( typeof method === 'object' || ! method ) { - return methods.init.apply( this, arguments ); - } else { - jQuery.error( 'Method ' + method + ' does not exist on jQuery.GoogleMap' ); - } + show : function( ) { + google.maps.event.trigger(map, 'resize'); + } // show - }; + }; // var methods; - /* Private methods */ - function query_changed(e,query){ - var data = e.data.instance.data(); - /* Compare current and advertised query to get added and removed fields */ - previous_query=data.current_query; - /* Save the query as the current query */ - data.current_query=query; - - var rows=[]; - if(typeof(data.results)!="undefined" && data.results.length>0){ - jQuery.each(data.results, function(i, row){ - jQuery.each(query.filter, function (idx, filter){ - if(get_value(row[filter[0]])==filter[2]){ - rows.push(row); - } - }); - }); - data.markerCluster=[]; - data.markers=[]; - var myLatlng = new google.maps.LatLng(34.397, 150.644); - var myOptions = { - zoom: 2, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP - } - map = new google.maps.Map(jQuery('#map')[0],myOptions); - data.map=map; - //map.clearMarkers(); - update_map(e, rows); - } - } - function update_map(e, rows) { - var data = e.data.instance.data(); - var instance_ = e.data.instance; - //$plugindiv.closest('.need-spin').spin(false); - instance_.closest('.need-spin').spin(false); + /*************************************************************************** + * Plugin object + ***************************************************************************/ + function GoogleMaps(options) + { + /* member variables */ + this.options = options; - if (rows === undefined || !rows || rows.length==0) { - messages.warning ("Empty result in googlemap.update_map - nothing to show"); - return; - } + // query status + this.received_all = false; + this.received_set = false; + this.in_set_buffer = Array(); + + var object = this; + + /** + */ + this.initialize = function() { + this.map = null; + this.markerCluster = null; + this.markers = []; + this.coords = new Array(); - if(rows.length==0) { - rows=data.results; + var myLatlng = new google.maps.LatLng(options.latitude, options.longitude); + var myOptions = { + zoom: options.zoom, + center: myLatlng, + mapTypeId: google.maps.MapTypeId.ROADMAP } + + this.map = new google.maps.Map(document.getElementById("map"), myOptions); + this.infowindow = new google.maps.InfoWindow(); + } - if(typeof(data.results)=="undefined" || data.results==null){ - data.results=rows; + /** + */ + this.new_record = function(record) + { + + // get the coordinates + var latitude=get_value(record['latitude']); + var longitude=get_value(record['longitude']); + var hash = latitude + longitude; + + // check to see if we've seen this hash before + if(this.coords[hash] == null) { + // get coordinate object + var myLatlng = new google.maps.LatLng(latitude, longitude); + // store an indicator that we've seen this point before + this.coords[hash] = 1; + } else { + // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters + var lat = latitude + (Math.random() -.5) / 1500; + var lng = longitude + (Math.random() -.5) / 1500; + + // get the coordinate object + var myLatlng = new google.maps.LatLng(lat, lng); + } + // If the node is attached to the slice, action will be Remove; else action will be add to slice + if (typeof(record['sliver']) != 'undefined') { + data.current_resources.push(record['urn']); + action="del"; + action_class="ui-icon-circle-minus"; + action_message="Remove from slice"; + }else{ + action="add"; + action_class="ui-icon-circle-plus"; + action_message="Add to slice"; + } + // XXX not working + if (!(record['latitude'])) { + return true; } - var map = data.map; - var markerCluster = data.markerCluster; - var markers = data.markers; - var coords = new Array(); - var infowindow = new google.maps.InfoWindow(); - /* - if(typeof(markers)!="undefined" && markers.length>0){ - map.clearMarkers(); - }*/ - - data.current_resources = Array(); - - jQuery.each(data.results, function(i, result){ - // get the coordinates - var latitude=get_value(result['latitude']); - var longitude=get_value(result['longitude']); - var hash = latitude + longitude; - - // check to see if we've seen this hash before - if(coords[hash] == null) { - // get coordinate object - var myLatlng = new google.maps.LatLng(latitude, longitude); - // store an indicator that we've seen this point before - coords[hash] = 1; - } else { - // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters - var lat = latitude + (Math.random() -.5) / 1500; - var lng = longitude + (Math.random() -.5) / 1500; - - // get the coordinate object - var myLatlng = new google.maps.LatLng(lat, lng); - } - // If the node is attached to the slice, action will be Remove; else action will be add to slice - if (typeof(result['sliver']) != 'undefined') { - data.current_resources.push(result['urn']); - action="del"; - action_class="ui-icon-circle-minus"; - action_message="Remove from slice"; - }else{ - action="add"; - action_class="ui-icon-circle-plus"; - action_message="Add to slice"; - } - // XXX not working - if (!(result['latitude'])) { - return true; - } - //jQuery(".map-button").click(button_click); - if(jQuery.inArray(result,rows)>-1){ - var marker = new google.maps.Marker({ - position: myLatlng, - title: get_value(result['ip']), - // This should be done by the rendering - content: '

Agent: ' + get_value(result['ip']) + ' (' + get_value(result['urn']) + ')
Platform: ' + get_value(result['platform'])+'

' + - '
'+ - ''+action_message+ - '
' - }); - - google.maps.event.addListener(marker, 'click', function() { - infowindow.content = this.content; - infowindow.open(map, this); - // onload of the infowindow on the map, bind a click on a button - google.maps.event.addListener(infowindow, 'domready', function() { - jQuery('.map-button').unbind('click'); - jQuery(".map-button").click({instance: instance_}, button_click); - }); - }); - markers.push(marker); + //jQuery(".map-button").click(button_click); + //if(jQuery.inArray(record, rows)>-1){ + var marker = new google.maps.Marker({ + position: myLatlng, + title: get_value(record['hostname']), + // This should be done by the rendering + content: '

Agent: ' + get_value(record['ip']) + ' (' + get_value(record['resource_hrn']) + ')
Platform: ' + get_value(record['platform'])+'

' + + '
'+ + ''+action_message+ + '
' + }); + + this.addInfoWindow(marker, object.map); + object.markers.push(marker); + //} + + }; + + this.addInfoWindow = function(marker, map) { + google.maps.event.addListener(marker, 'click', function () { + if(object.infowindow){ + object.infowindow.close(); } + object.infowindow.setContent(marker.content);// = new google.maps.InfoWindow({ content: marker.content }); + object.infowindow.open(map, marker); + // onload of the infowindow on the map, bind a click on a button + google.maps.event.addListener(object.infowindow, 'domready', function() { + jQuery('.map-button').unbind('click'); +// jQuery(".map-button").click({instance: instance_, infoWindow: object.infowindow}, button_click); + }); }); - markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false}); - google.maps.event.addListener(markerCluster, "clusterclick", function (cluster) { - var markers = cluster.getMarkers(); - var bounds = new google.maps.LatLngBounds(); - /* - * date: 24/05/2012 - * author: lbaron - * Firefox JS Error - replaced $.each by JQuery.each - */ - jQuery.each(markers, function(i, marker){ - bounds.extend(marker.getPosition()); + } + + + this.set_checkbox = function(record) + { + // XXX urn should be replaced by the key + // XXX we should enforce that both queries have the same key !! + //checkbox_id = "#hazelnut-checkbox-" + object.options.plugin_uuid + "-" + unfold.escape_id(record[ELEMENT_KEY].replace(/\\/g, '')) + //$(checkbox_id, object.table.fnGetNodes()).attr('checked', true); + } + + this.record_handler = function(e, event_type, record) + { + // elements in set + switch(event_type) { + case NEW_RECORD: + /* NOTE in fact we are doing a join here */ + if (object.received_all) + // update checkbox for record + object.set_checkbox(record); + else + // store for later update of checkboxes + object.in_set_buffer.push(record); + break; + case CLEAR_RECORDS: + // nothing to do here + break; + case IN_PROGRESS: + manifold.spin($(this)); + break; + case DONE: + if (object.received_all) + manifold.spin($(this), false); + object.received_set = true; + break; + } + }; + + this.record_handler_all = function(e, event_type, record) + { + // all elements + switch(event_type) { + case NEW_RECORD: + // Add the record to the table + object.new_record(record); + break; + case CLEAR_RECORDS: + // object.table.fnClearTable(); + break; + case IN_PROGRESS: + manifold.spin($(this)); + break; + case DONE: + + // MarkerClusterer + object.markerCluster = new MarkerClusterer(object.map, object.markers, {zoomOnClick: false}); + google.maps.event.addListener(object.markerCluster, "clusterclick", function (cluster) { + var markers = cluster.getMarkers(); + var bounds = new google.maps.LatLngBounds(); + /* + * date: 24/05/2012 + * author: lbaron + * Firefox JS Error - replaced $.each by JQuery.each + */ + jQuery.each(markers, function(i, marker){ + bounds.extend(marker.getPosition()); + }); + + //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); + object.map.fitBounds(bounds); }); - //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); - map.fitBounds(bounds); - }); - data.markerCluster=markerCluster; + + if (object.received_set) { + /* XXX needed ? XXX We uncheck all checkboxes ... */ + $("[id^='datatables-checkbox-" + object.options.plugin_uuid +"']").attr('checked', false); + + /* ... and check the ones specified in the resource list */ + $.each(object.in_set_buffer, function(i, record) { + object.set_checkbox(record); + }); + + manifold.spin($(this), false); + } + object.received_all = true; + break; + } + }; + + + this.query_handler = function(e, event_type, query) + { + // This replaces the complex set_query function + // The plugin does not need to remember the query anymore + switch(event_type) { + // Filters + case FILTER_ADDED: + case FILTER_REMOVED: + case CLEAR_FILTERS: + // XXX Here we might need to maintain the list of filters ! + /* Process updates in filters / current_query must be updated before this call for filtering ! */ + object.table.fnDraw(); + break; + + // Fields + /* Hide/unhide columns to match added/removed fields */ + case FIELD_ADDED: + var object = this; + $.each(added_fields, function (index, field) { + var index = object.getColIndex(field,cols); + if(index != -1) + object.table.fnSetColumnVis(index, true); + }); + break; + case FIELD_REMOVED: + var object = this; + $.each(removed_fields, function (index, field) { + var index = object.getColIndex(field,cols); + if(index != -1) + object.table.fnSetColumnVis(index, false); + }); + break; + case CLEAR_FIELDS: + alert('GoogleMaps::clear_fields() not implemented'); + break; + } // switch + + } + function button_click(e){ - var data = e.data.instance.data().GoogleMap; var op_value=this.id.split("/"); if(op_value.length>0){ - jQuery.publish('selected', op_value[0]+'/'+op_value[1]); var value = op_value[1]; - - if (op_value[0] == 'add') { - data.current_resources.push(value); - } else { - tmp = jQuery.grep(data.current_resources, function(x) { return x != value; }); - data.current_resources = tmp; - } - - /* inform slice that our selected resources have changed */ - jQuery.publish('/update-set/' + data.query_uuid, [data.current_resources, true, e.data.instance]); + manifold.raise_event(object.options.query_uuid, (op_value[0] == 'add')?SET_ADD:SET_REMOVED, value); } - } - - function on_resource_changed(e, resources, instance) - { - /* TODO OPENLAB : this query determines which checkboxes must be checked */ - if (instance == e.data.instance) - return; - data = e.data.instance.data().GoogleMap; - - previous_resources = data.current_resources; - data.current_resources = resources; - - /* TODO We uncheck all checkboxes ... */ - //jQuery('datatables-checkbox-' + data.options.plugin_uuid).attr('checked', false); - /* ... and check the ones specified in the resource list */ - //jQuery.each(data.current_resources, function(index, urn) { - // jQuery('#datatables-checkbox-' + data.options.plugin_uuid + "-" + urn).attr('checked', true) - //}); - - } + } // function button_click() + } + + // clear and replace +// jQuery.each(data.results, function(i, row){ +// jQuery.each(query.filter, function (idx, filter){ +// if(get_value(row[filter[0]])==filter[2]){ +// rows.push(row); +// } +// }); +// }); +// data.markerCluster=[]; +// data.markers=[]; +// var myLatlng = new google.maps.LatLng(34.397, 150.644); +// var myOptions = { +// zoom: 2, +// center: myLatlng, +// mapTypeId: google.maps.MapTypeId.ROADMAP +// } +// map = new google.maps.Map(jQuery('#map')[0],myOptions); +// data.map=map; +// //map.clearMarkers(); +// update_map(e, rows); +// } +// } })( jQuery ); diff --git a/plugins/googlemap/googlemap.py b/plugins/googlemap/googlemap.py index d6ea883a..59c7eb66 100644 --- a/plugins/googlemap/googlemap.py +++ b/plugins/googlemap/googlemap.py @@ -6,9 +6,10 @@ class GoogleMap (Plugin): # pass columns as the initial set of columns # if None then this is taken from the query's fields # latitude,longitude, zoom : the starting point - def __init__ (self, query, latitude=43., longitude=7., zoom=4, **settings): + def __init__ (self, query, query_all_uuid = None, latitude=43., longitude=7., zoom=4, **settings): Plugin.__init__ (self, **settings) self.query=query + self.query_all_uuid = query_all_uuid self.latitude=latitude self.longitude=longitude self.zoom=zoom @@ -35,4 +36,4 @@ class GoogleMap (Plugin): return reqs # the list of things passed to the js plugin - def json_settings_list (self): return ['plugin_uuid','query_uuid', 'latitude', 'longitude', 'zoom', ] + def json_settings_list (self): return ['plugin_uuid','query_uuid', 'query_all_uuid', 'latitude', 'longitude', 'zoom', ] diff --git a/plugins/hazelnut/hazelnut.js b/plugins/hazelnut/hazelnut.js index d1a470fe..f685ced1 100644 --- a/plugins/hazelnut/hazelnut.js +++ b/plugins/hazelnut/hazelnut.js @@ -124,7 +124,7 @@ var ELEMENT_KEY = 'resource_hrn'; }; // var methods; /*************************************************************************** - * Hazelnut object + * Plugin object ***************************************************************************/ function Hazelnut(options) @@ -269,7 +269,7 @@ var ELEMENT_KEY = 'resource_hrn'; this.getColIndex = function(key, cols) { var tabIndex = $.map(cols, function(x, i) { if (x.sTitle == key) return i; }); return (tabIndex.length > 0) ? tabIndex[0] : -1; - } + }; // DEPRECATED // /** // DEPRECATED // * @brief diff --git a/portal/views.py b/portal/views.py index 4f1ea08d..9f31b7d4 100644 --- a/portal/views.py +++ b/portal/views.py @@ -172,6 +172,12 @@ class UserRegisterView(RegistrationView): request=request) return new_user + def get_context_data(self, **kwargs): + context = super(UserRegisterView, self).get_context_data(**kwargs) + context['topmenu_items'] = topmenu_items('Register', self.request) + context['username'] = the_user (self.request) + return context + def registration_allowed(self, request): """ Indicate whether account registration is currently permitted, @@ -475,7 +481,20 @@ def slice_request(request): else: form = SliceRequestForm() # An unbound form +# template_env = {} +# template_env['form'] = form +# template_env['topmenu_items'] = topmenu_items('Request a slice', request) +# template_env['unfold1_main'] = render(request, 'slice_request_.html', { +# 'form': form, +# }) +# from django.shortcuts import render_to_response +# from django.template import RequestContext +# return render_to_response ('view-unfold1.html',template_env, +# context_instance=RequestContext(request)) + return render(request, 'slice_request.html', { 'form': form, + 'topmenu_items': topmenu_items('Request a slice', request), + 'username': the_user (request) }) diff --git a/trash/sliceview.py b/trash/sliceview.py index b1714876..0036221c 100644 --- a/trash/sliceview.py +++ b/trash/sliceview.py @@ -54,7 +54,7 @@ def _slice_view (request, slicename): # TODO The query to run is embedded in the URL main_query = Query.get('slice').filter_by('slice_hrn', '=', slicename) - query_resource_all = Query.get('resource').select('resource_hrn', 'hostname', 'type', 'authority') + query_resource_all = Query.get('resource').select('resource_hrn', 'hostname', 'type', 'network_hrn', 'latitude', 'longitude') # Get default fields from metadata unless specified if not main_query.fields: @@ -65,7 +65,7 @@ def _slice_view (request, slicename): # TODO Get default fields main_query.select( 'slice_hrn', - 'resource.resource_hrn', 'resource.hostname', 'resource.type', 'resource.authority', + 'resource.resource_hrn', 'resource.hostname', 'resource.type', 'resource.network_hrn', #'lease.urn', 'user.user_hrn', # 'application.measurement_point.counter' @@ -159,6 +159,8 @@ def _slice_view (request, slicename): # tab's sons preferably turn this off togglable = False, query = sq_resource, + query_all_uuid = query_resource_all.query_uuid, + checkboxes = True, # center on Paris latitude = 49., longitude = 2.2, diff --git a/views/templates/view-login.html b/views/templates/view-login.html index d68f8cff..a7f0a337 100644 --- a/views/templates/view-login.html +++ b/views/templates/view-login.html @@ -23,7 +23,7 @@ Currently hard wired users are:

Welcome to the OneLab portal !

-

New to OneLab? Please register or learn more about the project.

+

New to OneLab? Please register or learn more about the project.