ICry

form/res-judicata/src/components/ICry.vue

@@ -0,0 +1,41 @@
+<template>
+  <article v-bind:class="{ good: notthatmuch }">
+    <h1>{{ title }}</h1>
+    <p><slot></slot></p>
+  </article>
+</template>
+
+<style scoped>
+  article {
+    border-radius: 1rem;
+    background-color: #ff5d1b;
+    text-align: center;
+    padding: 1rem 0;
+  }
+
+  article.good {
+    background-color: #a3ff65;
+  }
+
+  h1 {
+    text-decoration: underline;
+    font-weight: bold;
+  }
+</style>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'ICry',
+
+  props: {
+    "title": String,
+    "content": String,
+    "notthatmuch": Boolean,
+  },
+
+  methods: {
+  },
+}
+</script>

form/res-judicata/src/views/Upload.vue

@@ -1,11 +1,31 @@
 <template>
-  <div>
+  <div id="component">
     <div class="container is-flex is-align-items-center is-flex-direction-column">
-      <form action="." method="POST" enctype="multipart/form-data" @submit.prevent="processForm">
-        <label>Label, jak <strike>zákon</strike> norma káže: <input id="file" type="file" name="file"></label>
-        <input type="submit" value="Submit">
-      </form>
-      <div id="content"></div>
+      <div class="field">
+        <div class="file is-info has-name">
+          <label class="file-label">
+            <input class="file-input" type="file" id="file" @change="processForm">
+            <span class="file-cta">
+              <span class="file-icon">
+                <i class="fas fa-upload"></i>
+              </span>
+              <span class="file-label">
+                Žaloba
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div>
+        <label for="file">Nahrajte žalobu a nechte si ji zkontrolovat</label>
+      </div>
+      <div class="columns">
+        <div id="content" class="column is-three-quarters"></div>
+        <div class="column problems">
+          <ICry v-for="(result, detection) in detections" v-bind:key="detection" class="icries" :title="translateCryTitle(detection)" v-bind:notthatmuch="Boolean(result)">
+            {{ getDescription(detection) }}</ICry>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -17,25 +37,42 @@
   .date_and_place {
     background-color: yellow;
   }
+
+  .icries {
+    margin-top: 1rem;
+  }
+
+  .problems {
+    padding-top: 5rem;
+  }
 </style>
 
 <style scoped>
   #content {
     margin-top: 5rem;
-    overflow: scroll;
+    overflow: auto;
   }
 
-  .container {
+  #component {
+    margin: 2rem;
     max-height: 100vh;
   }
+
+  .columns {
+    width: 100%;
+  }
 </style>
 
 <script>
 // @ is an alias to /src
 
+import ICry from "../components/ICry";
 export default {
   name: 'Upload',
-
+  components: {ICry},
+  props: {
+    "detections": Array
+  },
   methods: {
     processForm: function () {
       const formData = new FormData();
@@ -43,9 +80,9 @@ export default {
       fetch("http://localhost:5000/validator", {method: "POST", body: formData})
       .then(response => response.json())
       .then(result => {
-        console.log(Object.entries(result.checks));
+        this.detections = result.checks;
+
         const passed = Object.entries(result.checks).filter(([, val]) => {return val !== false}).map(([key, val]) => [val, key]).sort();
-        console.log(passed);
 
         const content = document.getElementById("content");
         content.innerHTML = "";
@@ -75,6 +112,26 @@ export default {
         console.error(err); //TODO
       })
     },
+    translateCryTitle(cry) {
+      return ({
+        "accuser": "Žalobce",
+        "court": "Soud",
+        "date_and_place": "Datum a místo sepsání",
+        "intent": "Záměr",
+        "signature": "Podpis",
+        "topic": "Čeho se domáháte",
+      })[cry];
+    },
+    getDescription(cry) {
+      return ({
+        "accuser": "Kdo žalobu podává",
+        "court": "Soud, který by měl vynést rozsudek",
+        "date_and_place": "",
+        "intent": "Čeho se snažíte dosáhnout",
+        "signature": "Podpis žalobce, nebo jeho zástupce. Není nutný, pokud se podání činí některými formami elektronické komunikace, jako např. datovou schránkou",
+        "topic": "Co je předmětem sporu",
+      })[cry];
+    },
   },
 }
 </script>