Merge pull request #1062 from Amsterdam-Music-Lab/feature/dashboard-a…

…djustments

Feature/dashboard adjustments

backend/experiment/actions/styles.py

@@ -4,4 +4,5 @@
 STYLE_PINK = 'pink'
 STYLE_BOOLEAN = 'boolean'
 STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first'
-STYLE_GRADIENT_7 = 'gradient-7'
+STYLE_GRADIENT_7 = 'gradient-7'
+STYLE_TOONTJEHOGER = 'toontjehoger'

backend/experiment/rules/toontjehoger_1_mozart.py

@@ -4,6 +4,7 @@
 from experiment.actions import Trial, Explainer, Step, Score, Final, Info, HTML
 from experiment.actions.form import ButtonArrayQuestion, Form
 from experiment.actions.playback import Autoplay
+from experiment.actions.styles import STYLE_TOONTJEHOGER
 from .base import Base
 from experiment.utils import non_breaking_spaces
 
@@ -168,7 +169,8 @@ def get_image_trial(self, session, section_group, image_url, question, expected_
             view='BUTTON_ARRAY',
             result_id=prepare_result(
             key, session, section=section, expected_response=expected_response),
-            submits=True
+            submits=True,
+            style=STYLE_TOONTJEHOGER
         )
         form = Form([question])
 

backend/experiment/serializers.py

@@ -3,6 +3,7 @@
 from django_markup.markup import formatter
 
 from experiment.actions.consent import Consent
+from image.serializers import serialize_image
 from participant.models import Participant
 from session.models import Session
 from theme.serializers import serialize_theme
@@ -69,7 +70,7 @@ def serialize_experiment(experiment_object: Experiment, participant: Participant
         'started_session_count': get_started_session_count(experiment_object, participant),
         'finished_session_count': get_finished_session_count(experiment_object, participant),
         'description': experiment_object.description,
-        'image': experiment_object.image.file.url if experiment_object.image else '',
+        'image': serialize_image(experiment_object.image) if experiment_object.image else None,
     }
 
 

backend/experiment/tests/test_views.py

@@ -189,7 +189,8 @@ def test_serialize_experiment(self):
             serialized_experiment['description'], 'This is a test experiment'
         )
         self.assertEqual(
-            serialized_experiment['image'], '/upload/test-image.jpg'
+            serialized_experiment['image'], {
+                'file': '/upload/test-image.jpg', 'href': '', 'alt': ''}
         )
         self.assertEqual(
             serialized_experiment['finished_session_count'], 3

backend/image/serializers.py

@@ -0,0 +1,13 @@
+from os.path import join
+
+from django.conf import settings
+
+from .models import Image
+
+
+def serialize_image(image: Image) -> dict:
+    return {
+        'file': join(settings.MEDIA_URL, str(image.file)),
+        'href': image.href,
+        'alt': image.alt,
+    }

frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx

@@ -11,7 +11,7 @@ const getExperiment = (overrides = {}) => {
         slug: 'some_slug',
         name: 'Some Experiment',
         description: 'Some description',
-        image: '',
+        image: {},
         started_session_count: 2,
         finished_session_count: 1,
         ...overrides
@@ -62,11 +62,7 @@ describe('ExperimentCollectionDashboard', () => {
         );
         await waitFor(() => {
             expect(screen.getByRole('menu')).toBeTruthy();
-            const counters = screen.getAllByRole('status');
-            expect(counters).toHaveLength(4);
-            expect(counters[0].innerHTML).toBe(experiment1.started_session_count.toString());
-            expect(counters[1].innerHTML).toBe(experiment1.finished_session_count.toString());
-        })
+        });
     });
 
     it('shows a placeholder if an experiment has no image', async () => {

frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx

@@ -5,6 +5,7 @@ import { API_ROOT } from "@/config";
 import ExperimentCollection from "@/types/ExperimentCollection";
 import AppBar from "@/components/AppBar/AppBar";
 import Header from "@/components/Header/Header";
+import IExperiment from "@/types/Experiment";
 
 
 interface ExperimentCollectionDashboardProps {
@@ -34,17 +35,14 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
             <Header { ...headerProps }></Header>
         )}
             {/* Experiments */}
-            <div role="menu" className="dashboard">
+            <div role="menu" className="dashboard toontjehoger">
                 <ul>
-                    {dashboard.map((exp) => (
+                    {dashboard.map((exp: IExperiment) => (
                         <li key={exp.slug}>
                             <Link to={getExperimentHref(exp.slug)} role="menuitem">
-                                <ImageOrPlaceholder imagePath={exp.image} alt={exp.description} />
+                                <ImageOrPlaceholder imagePath={exp.image?.file} alt={exp.image?.alt ?? exp.description} />
                                 <h3>{exp.name}</h3>
-                                <div className="status-bar">
-                                    <span title={`Started ${exp.started_session_count} times`} role="status" className="counter">{exp.started_session_count}</span>
-                                    <span title={`Started ${exp.finished_session_count} times`} role="status" className="counter">{exp.finished_session_count}</span>
-                                </div>
+                                <p>{exp.description}</p>
                             </Link>
                         </li>
                     ))}

frontend/src/scss/color-schemes.scss

@@ -79,3 +79,47 @@
         color: #0cc7f1;
     }
 }
+
+.toontjehoger {
+    li {
+        &:first-of-type img {
+            background-color: $yellow;
+        }
+        &:nth-of-type(2) img {
+            background-color: $red;
+        }
+        &:nth-of-type(3) img {
+            background-color: $teal;
+        }
+        &:nth-of-type(4) img {
+            background-color: $pink;
+        }
+        &:nth-of-type(5) img {
+            background-color: $blue;
+        }
+        &:last-of-type img {
+            background-color: $indigo;
+        }
+    }
+
+    label {
+        &:first-of-type {
+            @include btn-style($blue);
+        }
+        &:nth-of-type(2) {
+            @include btn-style($yellow);
+        }
+        &:nth-of-type(3) {
+            @include btn-style($teal);
+        }
+        &:nth-of-type(4)  {
+            @include btn-style($pink);
+        }
+        &:nth-of-type(5) {
+            @include btn-style($red);
+        }
+        &:last-of-type {
+            @include btn-style($indigo);
+        }
+    }
+}

frontend/src/types/Experiment.ts

@@ -1,9 +1,11 @@
+import IImage from "@/types/Image";
+
 export default interface Experiment {
     id: number;
     name: string;
     slug: string;
     description: string;
-    image: string;
+    image?: IImage;
     started_session_count: number;
     finished_session_count: number;
 }

frontend/src/types/Image.ts

@@ -0,0 +1,5 @@
+export default interface Image {
+    file: string;
+    href: string;
+    alt: string;
+}