Redirect to sorted cms index page

client/src/router/index.ts

@@ -38,6 +38,9 @@ const router = createRouter({
     {
       path: '/styleguide',
       component: () => import('../views/StyelGuideView.vue'),
+      meta: {
+        public: true
+      }
     },
     {
       path: '/:pathMatch(.*)*',

client/src/views/404View.vue

@@ -1,11 +1,18 @@
+<script setup lang="ts">
+let url = document.location.href;
+if (url.charAt(url.length - 1) !== '/') {
+  url += '/';
+}
+</script>
+
+
 <template>
-  <main>
+  <main class="px-4 py-8">
     <h1>404 - Not Found as Vue view...</h1>
+    <div class="text-xl mt-8">Add trailing slash for django view?</div>
+    <div class="mt-8 text-xl">Try this: <a class="link" :href="url">{{ url }}</a></div>
   </main>
 </template>
 
-<script setup lang="ts">
-</script>
-
 <style scoped>
 </style>

client/src/views/CircleView.vue

@@ -77,7 +77,7 @@ export default {
 
   <div class="circle">
     <div class="flex flex-col lg:flex-row">
-      <div class="flex-initial lg:w-128 px-8 py-8">
+      <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
         <h1 class="text-blue-dark text-7xl">
           {{ circleData.title }}
         </h1>

client/src/views/HomeView.vue

@@ -7,7 +7,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
   <main class="px-8 py-8">
     <h1>myVBV Start Page</h1>
 
-    <div class="mt-8 flex flex-row justify-start gap-4">
+    <div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
       <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
       <a class="link text-xl" href="/login/">Login</a>
       <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>

client/src/views/StyelGuideView.vue

@@ -41,7 +41,7 @@ function colorBgClass(color: string, value: number) {
       <h2 class="heading-1">Icons</h2>
     </div>
 
-    <div class="mt-8 mb-8 flex gap-4">
+    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div>
         IconMessage
         <IconMessage/>
@@ -95,7 +95,7 @@ function colorBgClass(color: string, value: number) {
 
     </div>
 
-    <div class="mt-8 mb-8 flex gap-4">
+    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div>
         IconLsApply
         <IconLsApply/>
@@ -132,7 +132,7 @@ function colorBgClass(color: string, value: number) {
       </div>
     </div>
 
-    <div class="mt-8 mb-8 flex gap-4">
+    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
       <div>
         IconSmileyHappy
         <IconSmileyHappy/>
@@ -188,7 +188,7 @@ function colorBgClass(color: string, value: number) {
 
     <h2 class="mt-8 mb-8">Buttons</h2>
 
-    <div class="flex w-128 content-center justify-between mb-16">
+    <div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-between mb-16">
       <button class="btn-primary">Primary</button>
       <a class="btn-primary inline-block" href="/">Primary Link</a>
       <button class="btn-secondary">Secondary</button>

prepare_server.sh

@@ -1,5 +1,8 @@
 #!/bin/bash
 
+# set location to script directory
+cd "${0%/*}"
+
 if [ -z "$CI" ];
 then
   # kill all subprocess on exit so that Bitbucket Pipelines process will not hang
@@ -46,6 +49,8 @@ mypsql() {
 
 if [ "$SKIP_SETUP" = false ]; then
     # TODO: in heroku we must do a `pg:resets` to reset the db
+    echo "Check postgres connection"
+    mypsql -c "SELECT 1"
     echo "Drop all connections to $POSTGRES_DB"
     mypsql -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = '$POSTGRES_DB' AND pid <> pg_backend_pid();" > /dev/null 2>&1
     echo "Drop database: $POSTGRES_DB"

prepare_server_cypress.sh

@@ -1,3 +1,8 @@
+#!/bin/bash
+
+# set location to script directory
+cd "${0%/*}"
+
 export IT_APP_ENVIRONMENT=development
 export DJANGO_SETTINGS_MODULE=config.settings.test_cypress
 export DJANGO_PORT=8001

server/config/settings/base.py

@@ -80,9 +80,6 @@ THIRD_PARTY_APPS = [
     "drf_spectacular",
     "django_htmx",
 
-    "grapple",
-    "graphene_django",
-
     'wagtail.contrib.forms',
     'wagtail.contrib.redirects',
     'wagtail.embeds',

server/vbv_lernwelt/templates/learnpath/circle.html

@@ -1,104 +1,12 @@
 {% extends "base.html" %}
 
-{% load wagtailcore_tags %}
+{% block inline_javascript %}
-
+    <script>
-{% block body_class %}template-cicle{% endblock %}
+    window.addEventListener('DOMContentLoaded', () => {
-
+      const slug = '{{ page.slug }}';
-{% block content %}
+      console.log(slug);
-  <div class="w-full flex mt-6">
+      // redirect to client view
-    <div class="bg-white flex flex-col w-1/3 m-5">
+      document.location.replace(`/circle/${slug}`);
-      <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
+    });
-
+    </script>
-      <div class="flex justify-center">
+{% endblock inline_javascript %}
-        <svg width="500" height="500">
-          <defs>
-            <marker id="triangle"
-                    viewBox="0 0 10 10"
-                    refX="5"
-                    refY="5"
-                    markerUnits="strokeWidth"
-                    markerWidth="10" markerHeight="10"
-                    orient="auto" overflow="visible" fill='#99C7E7'>
-              <path d="M -2 5 L 8 0 L 8 10 z"/>
-            </marker>
-
-          </defs>
-        </svg>
-      </div>
-      <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
-      <div class="mt4">{{ page.description }}</div>
-      <div class="mt-4">{{ page.goals }}</div>
-    </div>
-
-    <div class="bg-gray-50 flex-col w-2/3">
-      {% for learning_sequence in page.learning_sequences.all %}
-        <div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
-          <h2 class="font-bold">{{ learning_sequence.title }}</h2>
-          {% for learning_unit in learning_sequence.learning_units.all %}
-            <div>
-              <a target="_blank" href="{% pageurl learning_unit %}">{{ learning_unit.title }}</a>
-            </div>
-          {% endfor %}
-        </div>
-      {% endfor %}
-    </div>
-  </div>
-
-  <script>
-    var data = [5, 5, 5, 5, 5];
-
-    var svg = d3.select("svg"),
-      width = svg.attr("width"),
-      height = svg.attr("height"),
-      radius = Math.min(width, height) / 2.5,
-      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
-
-
-    var color = '#99C7E7';
-
-    // Generate the pie
-    var pie = d3.pie();
-
-    // Generate the arcs
-    var arc = d3.arc()
-      .innerRadius(radius / 2.5)
-      .padAngle(12 / 360)
-      .outerRadius(radius);
-
-    // Generate the arrows
-    var arrow = d3.arc()
-      .innerRadius(radius * 1.15)
-      .padAngle(30 / 360)
-      .outerRadius(radius * 1.16);
-
-
-    //Generate groups
-    var arcs = g.selectAll("arc")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arc")
-
-
-    //Generate groups
-    var arrows = g.selectAll("arrow")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arrow")
-      .attr("marker-start", "url(#triangle)")
-
-    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
-
-    //Draw arc paths
-    arcs.append("path")
-      .attr("fill", color)
-      .attr("d", arc)
-
-    //Draw arrow paths
-    arrows.append("path")
-      .attr("fill", color)
-      .attr("d", arrow)
-
-  </script>
-{% endblock %}

server/vbv_lernwelt/templates/wagtailadmin/pages/index.html

@@ -0,0 +1,14 @@
+{% extends "wagtailadmin/pages/index.html" %}
+{% load wagtailadmin_tags i18n %}
+
+{% block extra_js %}
+    {{ block.super }}
+
+    <script type="text/javascript">
+      if (document.location.href.endsWith('/')) {
+        // add ?ordering=ord as default ordering
+        console.log('redirect');
+        document.location.replace(document.location.href + '?ordering=ord');
+      }
+  </script>
+{% endblock %}