Draft: Live validate Playlist in Playlist CSV form

backend/admin_interface/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

backend/admin_interface/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AdminInterfaceConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'admin_interface'

backend/admin_interface/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

backend/admin_interface/static/admin_interface/css/admin_custom.css

@@ -0,0 +1,52 @@
+:root {
+    --default-bg: #f8d7da;
+    --default-fg: #721c24;
+    --success-bg: #d4edda;
+    --success-fg: #155724;
+    --warning-bg: #fff3cd;
+    --warning-fg: #856404;
+    --error-bg: #f8d7da;
+    --error-fg: #721c24;
+}
+
+.mt-1 {
+    margin-top: 0.25rem;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-3 {
+    margin-top: 1rem;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.alert {
+    background-color: var(--default-bg);
+    color: var(--default-fg);
+    padding: 1rem;
+    border-radius: 0.5rem;
+}
+
+.alert--success {
+    background-color: var(--success-bg);
+    color: var(--success-fg);
+}
+
+.alert--warning {
+    background-color: var(--warning-bg);
+    color: var(--warning-fg);
+}
+
+.alert--error {
+    background-color: var(--error-bg);
+    color: var(--error-fg);
+}

backend/admin_interface/templates/admin/base_site.html

@@ -0,0 +1,7 @@
+{% extends "admin/base.html" %}
+{% load static %}
+
+{% block extrahead %}
+  {{ block.super }}
+  <link rel="stylesheet" type="text/css" href="{% static 'admin_interface/css/admin_custom.css' %}" />
+{% endblock %}

backend/admin_interface/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

backend/admin_interface/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

backend/aml/base_settings.py

@@ -35,6 +35,7 @@
 # Application definition
 
 INSTALLED_APPS = [
+    'admin_interface',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',

backend/experiment/rules/matching_pairs_lite.py

@@ -14,7 +14,7 @@ class MatchingPairsLite(MatchingPairsGame):
     score_feedback_display = 'small-bottom-right'
     contact_email = 'aml.tunetwins@gmail.com'
 
-    def first_round(self, experiment):     
+    def first_round(self, experiment):
         # 2. Choose playlist.
         playlist = Playlist(experiment.playlists.all())
         info = Info('',

backend/experiment/validators.py

@@ -9,7 +9,7 @@ def markdown_html_validator():
 
 
 def experiment_slug_validator(value):
-    
+
     disallowed_slugs = [
         'admin',
         'server',

backend/section/forms.py

@@ -34,11 +34,14 @@ class Meta:
                 'URL for hosting the audio files on an external server.<br> \
                 Make sure the path of the audio file is valid.<br> \
                 Leave this empty if you host the audio files locally.'}
-        
+
         widgets = {'url_prefix': forms.TextInput(attrs={'size': '37',
                    'placeholder': 'https://example.com/'})
                    }
 
+    class Media:
+        js = ['validate_csv.js',]
+
     def save(self, commit=True):
         playlist = super().save(commit=False)
 

backend/section/models.py

@@ -128,7 +128,7 @@ def is_number(string):
             # if same section already exists, update it with new info
             for ex_section in existing_sections:
                 if ex_section.filename == section.filename:
-                    if song:                        
+                    if song:
                         ex_section.song = song
                         ex_section.save()
                     ex_section.start_time = section.start_time

backend/section/static/validate_csv.js

@@ -0,0 +1,73 @@
+// on document laod, no jquery
+document.addEventListener('DOMContentLoaded', function() {
+
+    // name=csv
+    const csvInput = document.querySelector('textarea[name="csv"]');
+    csvInput.addEventListener('blur', (e) => validateCSV(e.target.value));
+
+    const csvFormRow = document.querySelector('.form-row.field-csv');
+
+    // create a new empty div element to hold validation messages
+    const validationMessages = document.createElement('div');
+    validationMessages.id = 'csvValidationMessages';
+    validationMessages.className = 'csv-validation-messages';
+    csvFormRow.appendChild(validationMessages);
+
+    // run validation on initialization to warn user straight away of potential issues
+    validateCSV(csvInput.value);
+});
+
+async function validateCSV(csv) {
+    const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
+
+    const response = await fetch('/section/validate_csv/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+        body: JSON.stringify({ csv })
+    });
+
+    const data = await response.json();
+    const message = data.message || 'No message was given';
+    const warnings = data.warnings || [];
+    const errors = data.errors || [];
+
+    const validationMessages = document.getElementById('csvValidationMessages');
+    validationMessages.innerHTML = '';
+
+    if (warnings.length > 0) {
+        const warningsList = document.createElement('ul');
+        warnings.forEach(warning => {
+            const li = document.createElement('li');
+            li.className = 'alert alert--warning mt-2'
+            li.textContent = warning;
+            warningsList.appendChild(li);
+        });
+        validationMessages.appendChild(warningsList);
+    }
+
+    if (errors.length > 0) {
+        const errorsList = document.createElement('ul');
+        errors.forEach(error => {
+            const li = document.createElement('li');
+            li.className = 'alert alert--error mt-2'
+            li.textContent = error;
+            errorsList.appendChild(li);
+        });
+        validationMessages.appendChild(errorsList);
+    }
+
+    const messageUl = document.createElement('ul');
+    const messageLi = document.createElement('li');
+    const alertClassName = errors.length > 0 ? 'alert--error' : warnings.length > 0 ? 'alert--warning' : 'alert--success';
+    messageLi.className = `alert ${alertClassName} mt-2 bold`
+    messageLi.textContent = message;
+    messageUl.appendChild(messageLi);
+    validationMessages.appendChild(messageUl);
+
+    if (errors)
+
+    return true;
+}

backend/section/urls.py

@@ -1,11 +1,12 @@
 from django.urls import path
 
-from .views import get_section
+from .views import get_section, validate_csv
 
 app_name = 'section'
 
 urlpatterns = [
     # Section
     path('<int:section_id>/<int:code>/',
         get_section, name='section'),
+    path('validate_csv/', validate_csv, name='validate_csv'),
 ]

backend/section/views.py

@@ -1,10 +1,12 @@
-from django.http import Http404, FileResponse
-from django.core.exceptions import PermissionDenied
+import json
+import csv
+from http import HTTPStatus
+import os
+from django.http import Http404, FileResponse, JsonResponse
 from django.conf import settings
 from django.shortcuts import redirect
 
 from .models import Section
-from participant.utils import located_in_nl
 
 
 def get_section(request, section_id, code):
@@ -26,7 +28,7 @@ def get_section(request, section_id, code):
         if str(section.filename).startswith('http'):
             # external link, redirect
             return redirect(str(section.filename))
-        
+
         if section.playlist.url_prefix:
             # Make link external using url_prefix
             return redirect(section.playlist.url_prefix + str(section.filename))
@@ -57,3 +59,89 @@ def get_section(request, section_id, code):
 
     except Section.DoesNotExist:
         raise Http404("Section does not exist")
+
+
+def validate_csv(request):
+    """Validate the csv file"""
+
+    json_body = json.loads(request.body)
+    csv_data = json_body['csv']
+
+    # Add new sections from csv
+    try:
+        reader = csv.DictReader(csv_data.splitlines(), fieldnames=(
+            'artist', 'name', 'start_time', 'duration', 'filename', 'tag', 'group'))
+    except csv.Error:
+        return {
+            'status': HTTPStatus.UNPROCESSABLE_ENTITY,
+            'message': "Error: could not initialize csv.DictReader"
+        }
+
+    validation_warnings = []
+    validation_errors = []
+    lines_count = 0
+    parsed_csv_data = []
+
+    for row in reader:
+        lines_count += 1
+
+        if None in row.values():
+            validation_errors.append(
+                f"Error: Missing value in row {lines_count}")
+            continue
+
+        if not row['filename'].endswith(('.mp3', '.wav', '.ogg')):
+            validation_errors.append(
+                f"Error: Invalid file extension in row {lines_count}")
+            continue
+
+        if not row['start_time'].replace('.', '', 1).isdigit():
+            validation_errors.append(
+                f"Error: Invalid start_time in row {lines_count}")
+            continue
+
+        if not row['duration'].replace('.', '', 1).isdigit():
+            validation_errors.append(
+                f"Error: Invalid duration in row {lines_count}")
+            continue
+
+        # check if file exists
+        filename = row['filename']
+        if not filename.startswith('http'):
+            full_file_path = f'./upload/{filename}'
+            if not os.path.isfile(full_file_path):
+                validation_errors.append(f"Error: File '{filename}' cannot be found in row {lines_count}.")
+
+        for key, value in row.items():
+            if value != value.strip():
+                validation_warnings.append(
+                    f"Warning: Whitespace in column '{key}' with value '{value}' in row {lines_count}")
+
+        parsed_csv_data.append(row)
+
+    if validation_errors:
+
+        message = f"Error: CSV contains {len(validation_errors)} errors"
+
+        if validation_warnings:
+            message += f" and {len(validation_warnings)} warnings"
+
+        return JsonResponse({
+            'status': HTTPStatus.UNPROCESSABLE_ENTITY,
+            'message': message,
+            'warnings': validation_warnings,
+            'errors': validation_errors
+        }, status=HTTPStatus.UNPROCESSABLE_ENTITY)
+
+    message = f"CSV with {lines_count} rows parsed successfully"
+
+    if validation_warnings:
+        message += f" with {len(validation_warnings)} warnings"
+
+    return JsonResponse({
+        'status': HTTPStatus.OK,
+        'message': message,
+        'lines': lines_count,
+        'warnings': validation_warnings,
+        'data': parsed_csv_data
+    }, status=HTTPStatus.OK)