Merge pull request #238 from wmo-raf/dev

Updates and Bug Fixes

nmhs_cms/settings/dev.py

@@ -17,7 +17,7 @@
     pass
 
 # Disable caching in dev
-WAGTAIL_CACHE = False
+WAGTAIL_CACHE = env.bool('WAGTAIL_CACHE', default=False)
 
 INSTALLED_APPS = ["daphne"] + INSTALLED_APPS + ["wagtail.contrib.styleguide"]
 
@@ -32,6 +32,21 @@
 GDAL_LIBRARY_PATH = env.str('GDAL_LIBRARY_PATH', None)
 GEOS_LIBRARY_PATH = env.str('GEOS_LIBRARY_PATH', None)
 
+CACHES = {
+    'default': {
+        'BACKEND': 'django.core.cache.backends.filebased.FileBasedCache',
+        'LOCATION': os.path.join(BASE_DIR, 'cache'),
+        'KEY_PREFIX': 'nmhs_cms_default',
+        'TIMEOUT': 14400,  # 4 hours (in seconds)
+    },
+    'pagecache': {
+        'BACKEND': 'django.core.cache.backends.memcached.PyMemcacheCache',
+        'LOCATION': env('MEMCACHED_URI', default=""),
+        'KEY_PREFIX': 'nmhs_cms_pagecache',
+        'TIMEOUT': 14400,  # 4 hours (in seconds)
+    },
+}
+
 LOGGING = {
     "version": 1,
     "disable_existing_loggers": False,

nmhs_cms/templates/navigation/navbar.html

@@ -3,10 +3,10 @@
 {% wagtail_site as current_site %}
 <header class="header-nav">
     <div id="google_language_translator"></div>
+    <div class="nav-top-scroll-active-alert"></div>
     <div class="top-nav-wrapper is-hidden-touch container">
         <div class="level top-nav">
             <div class="level-left">
-
                 <a class="level-item main-logo" href="{{ current_site.root_url }}"
                    style="font-weight: 600; font-size: 30px; letter-spacing: 0.2em;color: black;">
                     {% if settings.base.OrganisationSetting.logo %}
@@ -109,11 +109,10 @@
                         <img src="{{ country_flag.url }}" alt="Logo">
                     </a>
                 {% endif %}
-
-                <div class="latest-active-alert"></div>
+                <div class="nav-left-circle-active-alert"></div>
 
             </div>
-            
+
         </div>
     </div>
     <nav class="navbar is-justify-content-center is-align-content-center bottom-nav" role="navigation"
@@ -148,7 +147,7 @@
             </div>
         </div>
     </nav>
-    <div class="is-hidden-desktop latest-active-alert">
+    <div class="is-hidden-desktop nav-left-circle-active-alert">
     </div>
 
 </header>
@@ -182,11 +181,23 @@
                         return response.text();
                     })
                     .then(data => {
-                        const latestActiveAlert = document.querySelectorAll('.latest-active-alert')
                         if (data) {
-                            latestActiveAlert.forEach((alertContainer) => {
-                                alertContainer.innerHTML = data;
-                            });
+                            const $alert = $(data);
+                            const $alertContainer = $alert.filter("div").first();
+
+                            if ($alertContainer.length > 0) {
+                                const alertStyle = $alertContainer.data('alertStyle');
+                                if (alertStyle) {
+                                    if (alertStyle === 'nav_left') {
+                                        const navCircleAlertContainer = $('.nav-left-circle-active-alert')
+                                        navCircleAlertContainer.html(data);
+
+                                    } else if (alertStyle === 'nav_top') {
+                                        const navTopScrollActiveAlertContainer = $('.nav-top-scroll-active-alert')
+                                        navTopScrollActiveAlertContainer.html(data);
+                                    }
+                                }
+                            }
                         }
                     }).catch(error => {
                     console.error("NAVBAR_LATEST_ACTIVE_ALERT_ERROR:", error);

pages/cap/migrations/0020_othercapsettings.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.2.7 on 2024-06-14 10:42
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('cap', '0019_alter_capalertpage_options_alter_capalertpage_guid_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='OtherCAPSettings',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('active_alert_style', models.CharField(choices=[('nav_left', 'Left of the Navbar'), ('nav_top', 'Top of the Navbar')], default='nav_left', help_text='Choose the style of active alerts', max_length=50, verbose_name='Active Alert Style')),
+                ('site', models.OneToOneField(editable=False, on_delete=django.db.models.deletion.CASCADE, to='wagtailcore.site')),
+            ],
+            options={
+                'verbose_name': 'Other Settings',
+                'verbose_name_plural': 'Other Settings',
+            },
+        ),
+    ]

pages/cap/models.py

@@ -382,6 +382,26 @@ def get_cap_geojson_url(request=None):
         return geojson_url
 
 
+@register_setting(name="other-cap-settings")
+class OtherCAPSettings(BaseSiteSetting):
+    ACTIVE_ALERT_STYLE_CHOICES = [
+        ("nav_left", _("Left of the Navbar")),
+        ("nav_top", _("Top of the Navbar")),
+    ]
+
+    active_alert_style = models.CharField(max_length=50, choices=ACTIVE_ALERT_STYLE_CHOICES, default="nav_left",
+                                          verbose_name=_("Active Alert Style"),
+                                          help_text=_("Choose the style of active alerts"))
+
+    panels = [
+        FieldPanel("active_alert_style"),
+    ]
+
+    class Meta:
+        verbose_name = _("Other Settings")
+        verbose_name_plural = _("Other Settings")
+
+
 class CAPAlertWebhook(ClusterableModel):
     name = models.CharField(max_length=255, verbose_name=_("Name"))
     url = models.URLField(max_length=255, unique=True, verbose_name=_("Webhook URL"))

pages/cap/templates/cap/widgets/nav_left_alert.html

@@ -0,0 +1,109 @@
+{% load static wagtailiconchooser_tags i18n %}
+
+{% if latest_active_alert %}
+    <style>
+
+        .banner-alert-container {
+            width: 100%;
+        }
+
+        .banner-alert-item {
+            position: relative;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .banner-alert-item-icon {
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .banner-alert-icon-wrapper {
+            position: relative;
+            width: 50px;
+            height: 50px;
+            border: 3px solid #fff;
+            padding: 10px;
+            border-radius: 50%;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
+            }
+            100% {
+                box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+            }
+        }
+
+        .banner-alert-icon-wrapper svg {
+            height: 80%;
+            width: 80%;
+            fill: currentColor;
+        }
+
+        .banner-alert-item-title {
+            font-size: 13px;
+            font-weight: 700;
+        }
+
+        .banner-alert-event {
+            font-size: 12px;
+            font-weight: 600;
+        }
+
+        .banner-alert-severity-label {
+            font-size: 11px;
+        }
+
+        /*768px and lower*/
+        @media screen and (max-width: 1023px) {
+            .banner-alert-container {
+                background-color: #f3f5fa;
+                padding: 4px 0;
+            }
+        }
+
+        @media only screen and (min-width: 1024px) and (max-width: 1150px) {
+            .banner-alert-item-info {
+                display: none;
+            }
+        }
+    </style>
+
+    <div class="banner-alert-container" data-alert-style="{{ alert_style }}">
+        <a href="{{ latest_active_alert.url }}">
+            <div class="banner-alert-item">
+                <div class="banner-alert-item-icon">
+                    <div class="banner-alert-icon-wrapper"
+                         style="background-color: {{ latest_active_alert.severity.color }}; border-color: {{ latest_active_alert.severity.border_color }};
+                                 {% if latest_active_alert.severity.icon_color %}color:{{ latest_active_alert.severity.icon_color }};{% endif %} ">
+                        {% if latest_active_alert.event_icon %}
+                            {% svg_icon name=latest_active_alert.event_icon %}
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="banner-alert-item-info">
+                    <div class="banner-alert-item-title">
+                        {% translate "Alert" %}
+                    </div>
+                    <div class="banner-alert-event">
+                        {{ latest_active_alert.event|truncatechars:20 }}
+                    </div>
+                    <div class="banner-alert-severity-label">
+                        {{ latest_active_alert.severity.label }}
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+{% endif %}

pages/cap/templates/cap/widgets/nav_top_alert.html

@@ -0,0 +1,82 @@
+{% load static wagtailiconchooser_tags i18n %}
+
+<style>
+
+    .top-alert-wrapper {
+        height: 60px;
+        background-color: #f8f9fb;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .top-alert-wrapper .top-alert-container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .top-alert-wrapper .alert-icon-wrapper {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        border: 3px solid #fff;
+        padding: 10px;
+        border-radius: 50%;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        animation: pulse 2s infinite;
+    }
+
+    .top-alert-wrapper .alert-icon svg {
+        height: 80%;
+        width: 80%;
+    }
+
+    .top-alert-wrapper .alert-title {
+        margin-left: 10px;
+    }
+
+    .top-alert-wrapper .alert-warning {
+        font-weight: 600;
+    }
+
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
+        }
+        100% {
+            box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+        }
+    }
+
+
+</style>
+
+<div class="top-alert-wrapper" data-alert-style="{{ alert_style }}">
+    <div class="container top-alert-container">
+        <div class="alert-icon-wrapper"
+             style="background-color: {{ latest_active_alert.severity.color }}; border-color: {{ latest_active_alert.severity.border_color }};
+                     {% if latest_active_alert.severity.icon_color %}color:{{ latest_active_alert.severity.icon_color }};{% endif %} ">
+            {% if latest_active_alert.event_icon %}
+                {% svg_icon name=latest_active_alert.event_icon %}
+            {% endif %}
+        </div>
+        <div class="alert-title">
+            <div class="alert-warning">
+                {% translate "Alert" %}
+            </div>
+            <a href="{{ latest_active_alert.url }}">
+                {% if latest_active_alert.properties.headline %}
+                    {{ latest_active_alert.properties.headline }}
+                {% else %}
+                    {{ latest_active_alert.title }}
+                {% endif %}
+            </a>
+        </div>
+
+    </div>
+
+</div>

pages/cap/utils.py

@@ -168,7 +168,7 @@ def create_cap_pdf_document(cap_alert, template_name):
         "alerts_url": cap_alert.get_parent().get_full_url().strip("/"),
     })
 
-    html = weasyprint.HTML(string=html_string, url_fetcher=django_url_fetcher, base_url=site.root_url)
+    html = weasyprint.HTML(string=html_string, url_fetcher=django_url_fetcher, base_url='file://')
 
     buffer = io.BytesIO()
     html.write_pdf(buffer)

pages/cap/views.py

@@ -21,7 +21,7 @@
 from .models import (
     CapAlertPage,
     get_currently_active_alerts,
-    get_all_published_alerts,
+    get_all_published_alerts, OtherCAPSettings,
 )
 from .utils import serialize_and_sign_cap_alert
 
@@ -262,13 +262,18 @@ def get_home_map_alerts(request):
 
 
 def get_latest_active_alert(request):
+    active_alert_style = OtherCAPSettings.for_request(request).active_alert_style or "nav_left"
+
     alerts = get_currently_active_alerts()
     active_alert_infos = []
 
     context = {}
 
     for alert in alerts:
         for alert_info in alert.infos:
+            alert_info.update({
+                "title": alert.title,
+            })
             active_alert_infos.append(alert_info)
 
     if len(active_alert_infos) == 0:
@@ -277,7 +282,14 @@ def get_latest_active_alert(request):
         })
     else:
         context.update({
-            'latest_active_alert': active_alert_infos[0]
+            'latest_active_alert': active_alert_infos[0],
+            'alert_style': active_alert_style
         })
 
-    return render(request, "cap/active_alert.html", context)
+    if active_alert_style == "nav_left":
+        return render(request, "cap/widgets/nav_left_alert.html", context)
+
+    if active_alert_style == "nav_top":
+        return render(request, "cap/widgets/nav_top_alert.html", context)
+
+    return render(request, "cap/widgets/nav_left_alert.html", context)