Most changes for #444

validation/jinja2/validation/_issue_card.html

@@ -21,13 +21,31 @@
 {% macro issue_card(issue, language) %}
     <div class="col-sm-6">
         <article class="card shadow" data-cy="issue-card">
-            <div class="card__header card__header--beige" data-cy="card-header">
-                <div class="right">
+            <div class="card__header
+            {% if issue.recording %}
+                {% if issue.recording.wrong_speaker %}
+                card__header--set-2
+                {% else %}
+                card__header--set-3
+                {% endif %}
+            {% else %}card__header--set-1{% endif %}" data-cy="card-header">
+                <div class="float-left">
+                    <h5 class="card-title">
+                        {% if issue.recording %}
+                        {% if issue.recording.wrong_speaker %}
+                        Wrong Speaker
+                        {% else %}
+                        Wrong word
+                        {% endif %}
+                        {% endif %}
+                    </h5>
+                </div>
+                <div class="float-right">
                     <button class="button button--neutral" data-cy="more-info-issue-button">
                         <a href="{{ url('validation:issue_detail', language.code, issue.id) }}">More Info</a>
                     </button>
                     <button class="button button--fail" data-cy="close-issue-button">
-                        <a href="{{ url('validation:close_issue', language.code, issue.id) }}">Close Issue</a>
+                        <a href="{{ url('validation:close_issue', language.code, issue.id) }}">Close Issue Unchanged</a>
                     </button>
                 </div>
             </div>

validation/jinja2/validation/_segment_card.html

@@ -140,6 +140,13 @@
                                         {{ 'button--success-solid' if recording.quality == 'good' else 'button--success' }} audio-quality-good"
                                         data-cy="good-button" data-rec-id={{ recording.id }}>Good
                                 </button>
+
+                                <button class="button
+
+                                        {{ 'button--meh-solid' if recording.quality == 'ok' else 'button--meh' }} audio-quality-ok"
+                                        data-cy="ok-button" data-rec-id={{ recording.id }}>OK
+                                </button>
+
                                 <button class="button
 
                                         {{ 'button--fail-solid' if recording.quality == 'bad' else 'button--fail' }} audio-quality-bad"

validation/jinja2/validation/view_issue_detail.html

@@ -21,9 +21,9 @@
 {% block content %}
     <h2>
         {% if issue.phrase %}
-            You are editing the Phrase object for this entry
+            You are editing the Phrase object for <a href="{{ url('validation:segment_detail',issue.language.code, issue.phrase.id) }}">this entry</a>
         {% else %}
-            You are editing this specific Recording for this entry
+            You are editing this specific Recording for <a href="{{ url('validation:segment_detail',issue.language.code, issue.recording.phrase.id) }}">this entry</a>
         {% endif %}
     </h2>
     <container style="display: flex">
@@ -52,6 +52,17 @@ <h3>Current Information</h3>
                 {% endif %}
             This issue was filed by {{ issue.created_by }} on
             {{ issue.created_on }}<br>
+            <br>
+            Other recordings for the same phrase are:<br>
+            <ul class="list__recording">
+                {% for recording in (issue.phrase.recordings if issue.phrase else issue.recording.phrase.recordings) %}
+                {% if issue.phrase or recording != issue.recording %}        
+                <li>
+                    {{ macros.player(recording) }} by {{recording.speaker.code}}
+                </li>
+                {% endif %}
+                {% endfor %}
+            </ul>
         </section>
 
         <section style="flex: 1">
@@ -60,7 +71,7 @@ <h3>Updates</h3>
                 <form action="" method="POST">
                     <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                     {{ form }}
-                    <input data-cy="save-button" type="submit" class="button button--success" value="Save">
+                    <input data-cy="save-button" type="submit" class="button button--success" value="Resolve issue and return to list">
                 </form>
             {% endif %}
         </section>

validation/migrations/0035_alter_historicalrecording_quality_and_more.py

@@ -0,0 +1,43 @@
+# Generated by Django 4.2.15 on 2024-08-26 23:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("validation", "0034_historicalrecording_updated_compressed_audio_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="historicalrecording",
+            name="quality",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("good", "Good"),
+                    ("ok", "OK"),
+                    ("bad", "Bad"),
+                    ("unknown", "Unknown"),
+                ],
+                help_text="Is the recording clean? Is it suitable to use publicly?",
+                max_length=64,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="recording",
+            name="quality",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("good", "Good"),
+                    ("ok", "OK"),
+                    ("bad", "Bad"),
+                    ("unknown", "Unknown"),
+                ],
+                help_text="Is the recording clean? Is it suitable to use publicly?",
+                max_length=64,
+            ),
+        ),
+    ]

validation/models.py

@@ -540,10 +540,11 @@ class Recording(models.Model):
     """
 
     GOOD = "good"
+    OK = "ok"
     BAD = "bad"
     UNKNOWN = "unknown"
 
-    QUALITY_CHOICES = [(GOOD, "Good"), (BAD, "Bad"), (UNKNOWN, "Unknown")]
+    QUALITY_CHOICES = [(GOOD, "Good"), (OK, "OK"), (BAD, "Bad"), (UNKNOWN, "Unknown")]
 
     id = models.CharField(primary_key=True, max_length=SHA256_HEX_LENGTH)
 

validation/static/index.js

@@ -71,7 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    for (let judgement of ["good", "bad"]) {
+    for (let judgement of ["good", "ok", "bad"]) {
         for (let button of document.querySelectorAll(`.audio-quality-${judgement}`)) {
             button.addEventListener("click", async (e) => {
                 const recordingId = e.target.dataset.recId
@@ -93,19 +93,26 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
 
                 const goodButton = getElementByRecordingId("audio-quality-good", recordingId);
+                const okButton = getElementByRecordingId("audio-quality-ok", recordingId);
                 const badButton = getElementByRecordingId("audio-quality-bad", recordingId);
                 const wrongWordButton = getElementByRecordingId("wrong-word-button", recordingId);
                 const wrongSpeakerButton = getElementByRecordingId("wrong-speaker-button", recordingId);
 
-                wrongWordButton.classList.replace("button--neutral-solid", "button--neutral")
-                wrongSpeakerButton.classList.replace("button--neutral-solid", "button--neutral")
+                // wrongWordButton.classList.replace("button--neutral-solid", "button--neutral")
+                // wrongSpeakerButton.classList.replace("button--neutral-solid", "button--neutral")
 
                 if (judgement === 'good') {
                     button.classList.replace("button--success", "button--success-solid")
                     badButton.classList.replace("button--fail-solid", "button--fail")
+                    okButton.classList.replace("button--meh-solid", "button--meh")                    
                 } else if (judgement === 'bad') {
                     button.classList.replace("button--fail", "button--fail-solid")
                     goodButton.classList.replace("button--success-solid", "button--success")
+                    okButton.classList.replace("button--meh-solid", "button--meh")                    
+                } else if (judgement === 'ok') {
+                    button.classList.replace("button--meh", "button--meh-solid")
+                    goodButton.classList.replace("button--success-solid", "button--success")
+                    badButton.classList.replace("button--fail-solid", "button--fail")
                 }
             })
         }

validation/static/styles/button_styles.css

@@ -32,6 +32,33 @@
   cursor: pointer;
 }
 
+.button--meh {
+  color: var(--custom-yellow);
+  border: 2px solid var(--custom-yellow);
+}
+
+.button--meh > a {
+  color: var(--custom-yellow);
+}
+
+.button--meh:hover > a, .button--meh > a:hover {
+  color: var(--custom-white);
+  text-decoration: none;
+}
+
+.button--meh-solid {
+  color: var(--custom-white);
+  background-color: var(--custom-yellow);
+  border: 2px solid var(--custom-yellow);
+}
+
+.button--meh:hover, .button--meh-solid:hover {
+  color: var(--custom-white);
+  background-color: var(--custom-pale-yellow);
+  border-color: var(--custom-yellow);
+  cursor: pointer;
+}
+
 .button--fail {
   color: var(--custom-orange);
   border: 2px solid var(--custom-orange);

validation/static/styles/cards.css

@@ -46,6 +46,30 @@
   background-color: var(--custom-beige);
 }
 
+.card__header--set-1 {
+  background-color: var(--custom-retro-1);
+}
+
+.card__header--set-2 {
+  background-color: var(--custom-retro-2);
+}
+
+.card__header--set-3 {
+  background-color: var(--custom-retro-3);
+}
+
+.card__header--set-4 {
+  background-color: var(--custom-retro-4);
+}
+
+.card__header--set-5 {
+  background-color: var(--custom-retro-5);
+}
+
+.card__header--set-6 {
+  background-color: var(--custom-retro-6);
+}
+
 .card--language {
   color: black;
   text-decoration: none;

validation/static/styles/variables.css

@@ -8,12 +8,19 @@
     --custom-pale-green: #43590090;
     --custom-purple: #39221f;
     --custom-pale-purple: #39221f90;
+    --custom-yellow: #DE970B;
     --custom-orange: #a20000;
     --custom-pale-orange: #a2000090;
     --custom-white: #ffffff;
     --custom-grey: #cccccc;
     --custom-light-grey: #eeeeee;
     --custom-beige: #e9dac4;
+    --custom-retro-1: #d5aa61;
+    --custom-retro-2: #e7dbbc;
+    --custom-retro-3: #e4844d;
+    --custom-retro-4: #cb5d46;
+    --custom-retro-5: #054150;
+    --custom-retro-6: #5aa297;
 
     /* button styles */
     --button-radius: 0.25rem;

validation/views.py

@@ -936,7 +936,7 @@ def record_audio_quality_judgement(request, recording_id):
     rec = get_object_or_404(Recording, id=recording_id)
     judgement = json.loads(request.body)
 
-    if judgement["judgement"] in ["good", "bad"]:
+    if judgement["judgement"] in ["good", "ok", "bad"]:
         rec.quality = judgement["judgement"]
     else:
         return HttpResponseBadRequest()