From 06ae9eb5a3c21973052897cd20024c09f6b576a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= <vojtech.kane@gmail.com>
Date: Sat, 23 Jan 2021 12:55:43 +0100
Subject: [PATCH] selectable problems

---
 form/res-judicata/src/components/ICry.vue | 16 +++++++++++++++-
 form/res-judicata/src/views/Apply.vue     | 17 +++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/form/res-judicata/src/components/ICry.vue b/form/res-judicata/src/components/ICry.vue
index f709580..cce8e29 100644
--- a/form/res-judicata/src/components/ICry.vue
+++ b/form/res-judicata/src/components/ICry.vue
@@ -1,5 +1,5 @@
 <template>
-  <article v-bind:class="{ good: notthatmuch }">
+  <article v-bind:class="{ good: notthatmuch }" @click="click">
     <h1>{{ title }}</h1>
     <p><slot></slot></p>
   </article>
@@ -11,6 +11,7 @@
     background-color: #ff5d1b;
     text-align: center;
     padding: 1rem 0;
+    transition: box-shadow .2s;
   }
 
   article.good {
@@ -21,6 +22,10 @@
     text-decoration: underline;
     font-weight: bold;
   }
+
+  .active {
+    box-shadow: .3rem .3rem 1rem black;
+  }
 </style>
 
 <script>
@@ -36,6 +41,15 @@ export default {
   },
 
   methods: {
+    click() {
+      this.$el.classList.add("active");
+      //this.$el.dispatchEvent(new Event("icry-activated"));
+      this.$emit("icry-activated", this.$el);
+    },
+
+    unselect() {
+
+    },
   },
 }
 </script>
diff --git a/form/res-judicata/src/views/Apply.vue b/form/res-judicata/src/views/Apply.vue
index 3fc2d37..4f85f95 100644
--- a/form/res-judicata/src/views/Apply.vue
+++ b/form/res-judicata/src/views/Apply.vue
@@ -21,8 +21,8 @@
       </div>
       <div class="columns">
         <canvas id="content" class="column is-three-quarters"></canvas>
-        <div class="column problems">
-          <ICry v-for="detection in ['accuser', 'court', 'date_and_place', 'intent', 'signature', 'topic']" v-bind:key="detection" v-bind:style="{ 'background-color': getColor(detection) }" class="icries" :title="translateCryTitle(detection)" notthatmuch>
+        <div class="column" id="problems">
+          <ICry v-on:icry-activated="iCryActivated" v-for="detection in ['accuser', 'court', 'date_and_place', 'intent', 'signature', 'topic']" v-bind:key="detection" v-bind:style="{ 'background-color': getColor(detection) }" class="icries" :title="translateCryTitle(detection)" notthatmuch>
             {{ getDescription(detection) }}</ICry>
         </div>
       </div>
@@ -42,7 +42,7 @@
     margin-top: 1rem;
   }
 
-  .problems {
+  #problems {
     padding-top: 5rem;
   }
 </style>
@@ -66,7 +66,8 @@ export default {
   name: 'Apply',
   components: {ICry},
   props: {
-    "detections": Array
+    "detections": Array,
+    "paintingColor": String,
   },
   methods: {
     processForm: function () {
@@ -129,6 +130,14 @@ export default {
         "topic": "#ffdb00",
       })[cry];
     },
+    iCryActivated: function(e) {
+      this.paintingColor = e.style.backgroundColor;
+      for (const icry of document.querySelectorAll("#problems > *")) {
+        if (icry !== e) {
+          icry.classList.remove("active");
+        }
+      }
+    },
   },
 }
 </script>