diff --git a/backend/settings.py b/backend/settings.py index 05ea5cd..71169f9 100644 --- a/backend/settings.py +++ b/backend/settings.py @@ -80,6 +80,7 @@ "djangocms_frontend.contrib.tabs", "djangocms_frontend.contrib.utilities", "zotero_publications_app", + "hydrolearn_modules_app", ] MIDDLEWARE = [ diff --git a/backend/urls.py b/backend/urls.py index f3c66ec..db6a26a 100644 --- a/backend/urls.py +++ b/backend/urls.py @@ -7,6 +7,7 @@ urlpatterns = [ path("admin/", admin.site.urls), path("zotero_publications_app/", include("zotero_publications_app.urls")), + path("hydrolearn_modules_app/", include("hydrolearn_modules_app.urls")), ] # if settings.DEBUG: diff --git a/hydrolearn_modules_app/__init__.py b/hydrolearn_modules_app/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/hydrolearn_modules_app/admin.py b/hydrolearn_modules_app/admin.py new file mode 100644 index 0000000..8c38f3f --- /dev/null +++ b/hydrolearn_modules_app/admin.py @@ -0,0 +1,3 @@ +from django.contrib import admin + +# Register your models here. diff --git a/hydrolearn_modules_app/apps.py b/hydrolearn_modules_app/apps.py new file mode 100644 index 0000000..1c42ac3 --- /dev/null +++ b/hydrolearn_modules_app/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class HydrolearnModulesAppConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'hydrolearn_modules_app' diff --git a/hydrolearn_modules_app/cms_plugins.py b/hydrolearn_modules_app/cms_plugins.py new file mode 100644 index 0000000..ce04794 --- /dev/null +++ b/hydrolearn_modules_app/cms_plugins.py @@ -0,0 +1,22 @@ +from cms.plugin_base import CMSPluginBase +from cms.plugin_pool import plugin_pool +from django.utils.translation import gettext_lazy as _ +from .models import ( + HydroLearnModulesList, +) + +import logging + +logger = logging.getLogger(__name__) + + +@plugin_pool.register_plugin +class HydroLearnModulesPlugin(CMSPluginBase): + model = HydroLearnModulesList + name = _("HydroLearn Modules Plugin") + render_template = "hydrolearn-modules.html" + cache = False + + def render(self, context, instance, placeholder): + context = super().render(context, instance, placeholder) + return context diff --git a/hydrolearn_modules_app/migrations/0001_initial.py b/hydrolearn_modules_app/migrations/0001_initial.py new file mode 100644 index 0000000..652c629 --- /dev/null +++ b/hydrolearn_modules_app/migrations/0001_initial.py @@ -0,0 +1,29 @@ +# Generated by Django 3.2 on 2024-03-19 18:31 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + initial = True + + dependencies = [ + ('cms', '0022_auto_20180620_1551'), + ] + + operations = [ + migrations.CreateModel( + name='HydroLearnModulesList', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='hydrolearn_modules_app_hydrolearnmoduleslist', serialize=False, to='cms.cmsplugin')), + ('organization', models.CharField(blank=True, default='', max_length=200)), + ('placeholder_image', models.CharField(default='https://placehold.co/200', max_length=200)), + ('modules', models.JSONField(default=dict, editable=False)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + ] diff --git a/hydrolearn_modules_app/migrations/__init__.py b/hydrolearn_modules_app/migrations/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/hydrolearn_modules_app/models.py b/hydrolearn_modules_app/models.py new file mode 100644 index 0000000..012f372 --- /dev/null +++ b/hydrolearn_modules_app/models.py @@ -0,0 +1,13 @@ +from cms.models.pluginmodel import CMSPlugin +from django.db import models +import logging + +logger = logging.getLogger(__name__) + + +class HydroLearnModulesList(CMSPlugin): + organization = models.CharField(max_length=200, default="", blank=True) + placeholder_image = models.CharField( + max_length=200, default="https://placehold.co/200" + ) + modules = models.JSONField(editable=False, default=dict) diff --git a/hydrolearn_modules_app/static/css/hydrolearn-modules.css b/hydrolearn_modules_app/static/css/hydrolearn-modules.css new file mode 100644 index 0000000..3bda552 --- /dev/null +++ b/hydrolearn_modules_app/static/css/hydrolearn-modules.css @@ -0,0 +1,103 @@ + +.img-tile{ + object-fit: cover; +} + +.name{ + height: 150px; + cursor: pointer; +} + + /* Hide scrollbar for Chrome, Safari and Opera */ +.name::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.name { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + + +.hydrolearn_module{ + box-shadow: 0 1px 10px 0 rgba(0,0,0,0.125), inset 0 0 0 1px rgba(255,255,255,0.75); + border-color: white; + border-bottom: 3px solid #255f9c; +} +.hydrolearn_module:hover, +.hydrolearn_module:focus { + background: #f5f5f5; + border-color: #bebebe; + box-shadow: 0 1px 4px 0 rgba(0,117,180,0.4); +} +.cover-image { + position: relative; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + cursor: pointer; +} + +.cover-image img { + display: block; + width: 100%; + transition: filter 0.5s ease; /* Smooth transition for the filter */ +} + +.learn-more { + position: absolute; + color: white; + padding: 5px 10px; + visibility: hidden; + transition: visibility 0s, opacity 0.5s linear; /* Smooth transition for visibility and opacity */ + opacity: 0; + border-color: #255f9c; + border-radius: 3px; + background: #255f9c; +} + +.cover-image:hover .learn-more { + visibility: visible; + opacity: 1; /* Make it fully opaque on hover */ +} + +.cover-image:hover img { + filter: brightness(50%); /* Darken the image */ +} +.learn-more > a { + color: inherit; + text-decoration: none; +} + +.hidden { + display: none; +} + + +@keyframes placeHolderShimmer{ + 0%{ + background-position: -800px 0 + } + 100%{ + background-position: 800px 0 + } +} + + + +.animated-background { + animation-duration: 7s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: placeHolderShimmer; + animation-timing-function: linear; +} +.titles-loading-background{ + background: #cbcbcb; + background: linear-gradient(to right, #cbcbcb 8%, #bbbbbb 18%, #cbcbcb 33%); +} +.descriptions-background{ + background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); +} diff --git a/hydrolearn_modules_app/static/js/hydrolearn-modules.js b/hydrolearn_modules_app/static/js/hydrolearn-modules.js new file mode 100644 index 0000000..b638d67 --- /dev/null +++ b/hydrolearn_modules_app/static/js/hydrolearn-modules.js @@ -0,0 +1,153 @@ + + +const getCSRFToken = () => { + // Attempt to retrieve the CSRF token from the meta tag + const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); + return token; +} + +const fetchLearningModules = () => { + // Assuming your Django server is running on localhost:8000 + // Update the URL if your setup is different or if you are using a production server + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-CSRFToken': getCSRFToken(), // Include the CSRF token in the request headers + }, + body: JSON.stringify(requestData), + }) + .then(response => { + console.log(response); + document.getElementById('placeholder-hydrolearn-modules').classList.add('hidden'); + document.getElementById('hydrolearn-modules-plugin').classList.remove('hidden'); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); // Assuming the response is JSON + }) + .then(data => { + console.log(data); + + let modulesHTML = `` + data['modules'].forEach(module => { + modulesHTML += ` +
` + if ( module.course_organization){ + modulesHTML +=`${module.course_organization}` + + } + modulesHTML += `
` + if(module.course_code){ + modulesHTML += `${module.course_code }` + } + modulesHTML += `
Effort: ${module.course_weekly_effort}
` + } + modulesHTML +=` ++ ${module.course_description_content} +
++
++ {% if module.course_organization %} + {{ module.course_organization }} + {% endif %} +
++ {% if module.course_code %} + {{ module.course_code }} + {% endif %} +
+Effort: {{ module.course_weekly_effort }}
+ {% endif %} + ++ {{ module.course_description_content }} +
+