Updates for Tethys 4

tethysapp/dam_inventory/app.py

@@ -9,63 +9,16 @@ class DamInventory(TethysAppBase):
     """
 
     name = 'Dam Inventory'
-    index = 'dam_inventory:home'
-    icon = 'dam_inventory/images/dam_icon.png'
-    package = 'dam_inventory'
+    description = ''
+    package = 'dam_inventory'  # WARNING: Do not change this value
+    index = 'home'
+    icon = f'{package}/images/dam_icon.png'
     root_url = 'dam-inventory'
     color = '#244C96'
-    description = ''
     tags = ''
     enable_feedback = False
     feedback_emails = []
 
-    def url_maps(self):
-        """
-        Add controllers
-        """
-        UrlMap = url_map_maker(self.root_url)
-
-        url_maps = (
-            UrlMap(
-                name='home',
-                url='dam-inventory',
-                controller='dam_inventory.controllers.home'
-            ),
-            UrlMap(
-                name='add_dam',
-                url='dam-inventory/dams/add',
-                controller='dam_inventory.controllers.add_dam'
-            ),
-            UrlMap(
-                name='dams',
-                url='dam-inventory/dams',
-                controller='dam_inventory.controllers.list_dams'
-            ),
-            UrlMap(
-                name='assign_hydrograph',
-                url='dam-inventory/hydrographs/assign',
-                controller='dam_inventory.controllers.assign_hydrograph'
-            ),
-            UrlMap(
-                name='hydrograph',
-                url='dam-inventory/hydrographs/{hydrograph_id}',
-                controller='dam_inventory.controllers.hydrograph'
-            ),
-            UrlMap(
-                name='hydrograph_ajax',
-                url='dam-inventory/hydrographs/{dam_id}/ajax',
-                controller='dam_inventory.controllers.hydrograph_ajax'
-            ),
-            UrlMap(
-                name='dam_notification',
-                url='dam-inventory/dams/notifications',
-                controller='dam_inventory.consumers.NotificationsConsumer',
-                protocol='websocket'
-            ),
-        )
-
-        return url_maps
-
     def custom_settings(self):
         """
         Example custom_settings method.

tethysapp/dam_inventory/consumers.py

@@ -1,7 +1,9 @@
 import json
 from channels.generic.websocket import AsyncWebsocketConsumer
+from tethys_sdk.routing import consumer
 
 
+@consumer(name='dam_notification', url='dams/notifications')
 class NotificationsConsumer(AsyncWebsocketConsumer):
     async def connect(self):
         await self.accept()

tethysapp/dam_inventory/controllers.py

@@ -3,17 +3,17 @@
 from django.shortcuts import render, reverse, redirect
 from channels.layers import get_channel_layer
 from asgiref.sync import async_to_sync
-from tethys_sdk.permissions import login_required
+from tethys_sdk.routing import controller
 from tethys_sdk.gizmos import (Button, MapView, TextInput, DatePicker, 
                                SelectInput, DataTableView, MVDraw, MVView,
                                MVLayer, MessageBox)
-from tethys_sdk.permissions import permission_required, has_permission
+from tethys_sdk.permissions import has_permission
 from .model import Dam, add_new_dam, get_all_dams, assign_hydrograph_to_dam, get_hydrograph
 from .app import DamInventory as app
 from .helpers import create_hydrograph
 
 
-@login_required()
+@controller
 def home(request):
     """
     Controller for the app home page.
@@ -97,14 +97,14 @@ def home(request):
         height='100%',
         width='100%',
         layers=[dams_layer],
-        basemap='OpenStreetMap',
+        basemap=['OpenStreetMap'],
         view=view_options
     )
 
     add_dam_button = Button(
         display_text='Add Dam',
         name='add-dam-button',
-        icon='glyphicon glyphicon-plus',
+        icon='plus-square',
         style='success',
         href=reverse('dam_inventory:add_dam')
     )
@@ -127,7 +127,7 @@ def home(request):
     return render(request, 'dam_inventory/home.html', context)
 
 
-@permission_required('add_dams')
+@controller(url='dams/add', permissions_required='add_dams')
 def add_dam(request):
     """
     Controller for the Add Dam page.
@@ -188,7 +188,8 @@ def add_dam(request):
 
             # Only add the dam if custom setting doesn't exist or we have not exceed max_dams
             if not max_dams or num_dams < max_dams:
-                add_new_dam(location=location, name=name, owner=owner, river=river, date_built=date_built)
+                add_new_dam(location=location, name=name, owner=owner, 
+                            river=river, date_built=date_built)
             else:
                 messages.warning(request, 'Unable to add dam "{0}", because the inventory is full.'.format(name))
 
@@ -259,15 +260,15 @@ def add_dam(request):
     location_input = MapView(
         height='300px',
         width='100%',
-        basemap='OpenStreetMap',
+        basemap=['OpenStreetMap'],
         draw=drawing_options,
         view=initial_view
     )
 
     add_button = Button(
         display_text='Add',
         name='add-button',
-        icon='glyphicon glyphicon-plus',
+        icon='plus-square',
         style='success',
         attributes={'form': 'add-dam-form'},
         submit=True
@@ -294,7 +295,7 @@ def add_dam(request):
     return render(request, 'dam_inventory/add_dam.html', context)
 
 
-@login_required()
+@controller(name='dams', url='dams')
 def list_dams(request):
     """
     Show all dams in a table view.
@@ -335,7 +336,7 @@ def list_dams(request):
     return render(request, 'dam_inventory/list_dams.html', context)
 
 
-@login_required()
+@controller(url='hydrographs/assign')
 def assign_hydrograph(request):
     """
     Controller for the Add Hydrograph page.
@@ -398,7 +399,7 @@ def assign_hydrograph(request):
     add_button = Button(
         display_text='Add',
         name='add-button',
-        icon='glyphicon glyphicon-plus',
+        icon='plus-square',
         style='success',
         attributes={'form': 'add-hydrograph-form'},
         submit=True
@@ -423,7 +424,7 @@ def assign_hydrograph(request):
     return render(request, 'dam_inventory/assign_hydrograph.html', context)
 
 
-@login_required()
+@controller(url='hydrographs/{hydrograph_id}')
 def hydrograph(request, hydrograph_id):
     """
     Controller for the Hydrograph Page.
@@ -437,7 +438,7 @@ def hydrograph(request, hydrograph_id):
     return render(request, 'dam_inventory/hydrograph.html', context)
 
 
-@login_required()
+@controller(url='hydrographs/{dam_id}/ajax')
 def hydrograph_ajax(request, dam_id):
     """
     Controller for the Hydrograph Page.

tethysapp/dam_inventory/public/css/map.css

@@ -1,4 +1,4 @@
-.popover-content {
+.popover-body {
     width: 400px;
     max-height: 300px;
     overflow-y: auto;

tethysapp/dam_inventory/public/js/map.js

@@ -38,18 +38,18 @@ $(function() {
                                 '</div>';
 
             // Clean up last popup and reinitialize
-            $(popup_element).popover('destroy');
+            $(popup_element).popover('dispose');
 
             // Delay arbitrarily to wait for previous popover to
             // be deleted before showing new popover.
             setTimeout(function() {
                 popup.setPosition(coordinates);
 
                 $(popup_element).popover({
-                  'placement': 'top',
-                  'animation': true,
-                  'html': true,
-                  'content': popup_content
+                    'placement': 'top',
+                    'animation': true,
+                    'html': true,
+                    'content': popup_content
                 });
 
                 $(popup_element).popover('show');
@@ -60,7 +60,7 @@ $(function() {
 
         } else {
             // remove pop up when selecting nothing on the map
-            $(popup_element).popover('destroy');
+            $(popup_element).popover('dispose');
         }
     });
 });

tethysapp/dam_inventory/templates/dam_inventory/base.html

@@ -17,12 +17,12 @@
   {% url 'dam_inventory:add_dam' as add_dam_url %}
   {% url 'dam_inventory:dams' as list_dam_url %}
   {% url 'dam_inventory:assign_hydrograph' as assign_hydrograph_url %}
-  <li class="title">Navigation</li>
-  <li class="{% if request.path == home_url %}active{% endif %}"><a href="{{ home_url }}">Home</a></li>
-  <li class="{% if request.path == list_dam_url %}active{% endif %}"><a href="{{ list_dam_url }}">Dams</a></li>
+  <li class="nav-item title">Navigation</li>
+  <li class="nav-item"><a class="nav-link{% if request.path == home_url %} active{% endif %}" href="{{ home_url }}">Home</a></li>
+  <li class="nav-item"><a class="nav-link{% if request.path == list_dam_url %} active{% endif %}" href="{{ list_dam_url }}">Dams</a></li>
   {% if can_add_dams %}
-  <li class="{% if request.path == add_dam_url %}active{% endif %}"><a href="{{ add_dam_url }}">Add Dam</a></li>
-  <li class="{% if request.path == assign_hydrograph_url %}active{% endif %}"><a href="{{ assign_hydrograph_url }}">Assign Hydrograph</a></li>
+  <li class="nav-item"><a class="nav-link{% if request.path == add_dam_url %} active{% endif %}" href="{{ add_dam_url }}">Add Dam</a></li>
+  <li class="nav-item"><a class="nav-link{% if request.path == assign_hydrograph_url %} active{% endif %}" href="{{ assign_hydrograph_url }}">Assign Hydrograph</a></li>
   {% endif %}
 {% endblock %}
 

tethysapp/dam_inventory/templates/dam_inventory/home.html

@@ -1,5 +1,5 @@
 {% extends "dam_inventory/base.html" %}
-{% load tethys_gizmos staticfiles %}
+{% load tethys_gizmos static %}
 
 {% block import_gizmos %}
   {% import_gizmo_dependency plotly_view %}
@@ -11,9 +11,9 @@
 {% endblock %}
 
 {% block after_app_content %}
-{% gizmo message_box %}
+  {% gizmo message_box %}
   <script>
-    var notification_ws = new WebSocket('ws://' + window.location.host + '/dam-inventory/dams/notifications/ws/');
+    var notification_ws = new WebSocket('ws://' + window.location.host + '/apps/dam-inventory/dams/notifications/ws/');
     var n_div = $("#notification");
     var n_title = $("#notificationLabel");
     var n_content = $('#notification .lead');
@@ -23,7 +23,7 @@
       if (data["message"] = "New Dam") {
         n_title.html('Dam Notification');
         n_content.html('A new dam has been added. Refresh this page to load it.');
-        n_div.modal();
+        n_div.modal('show');
       }
     };
   </script>

tethysapp/dam_inventory/templates/dam_inventory/hydrograph.html

@@ -2,8 +2,8 @@
 {% load tethys_gizmos %}
 
 {% block app_navigation_items %}
-  <li class="title">App Navigation</li>
-  <li class=""><a href="{% url 'dam_inventory:dams' %}">Back</a></li>
+  <li class="nav-item title">App Navigation</li>
+  <li class="nav-item "><a class="nav-link" href="{% url 'dam_inventory:dams' %}">Back</a></li>
 {% endblock %}
 
 {% block app_content %}