apply page

form/res-judicata/src/router/index.js

@@ -23,6 +23,11 @@ const routes = [
     name: 'Upload',
     component: () => import('../views/Upload'),
   },
+  {
+    path: '/apply',
+    name: 'Apply',
+    component: () => import('../views/Apply'),
+  },
 ]
 
 const router = new VueRouter({

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

@@ -0,0 +1,134 @@
+<template>
+  <div id="component">
+    <div class="container is-flex is-align-items-center is-flex-direction-column">
+      <div class="field">
+        <div class="file is-info has-name">
+          <label class="file-label">
+            <input class="file-input" type="file" id="file" @change="processForm" multiple>
+            <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, kterou chcete podat</label>
+      </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>
+            {{ getDescription(detection) }}</ICry>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .court {
+    background-color: #55acee;
+  }
+  .date_and_place {
+    background-color: yellow;
+  }
+
+  .icries {
+    margin-top: 1rem;
+  }
+
+  .problems {
+    padding-top: 5rem;
+  }
+</style>
+
+<style scoped>
+  #component {
+    margin: 2rem;
+    max-height: 100vh;
+  }
+
+  .columns {
+    width: 100%;
+  }
+</style>
+
+<script>
+// @ is an alias to /src
+
+import ICry from "../components/ICry";
+export default {
+  name: 'Apply',
+  components: {ICry},
+  props: {
+    "detections": Array
+  },
+  methods: {
+    processForm: function () {
+      const files = document.getElementById("file").files;
+      const canvas = document.getElementById('content');
+      let promises = [];
+      for (const file of files) {
+        promises.push(new Promise(resolve => {
+          const img = new Image();
+          img.addEventListener("load", () => {
+            resolve(img);
+          });
+          img.src = URL.createObjectURL(file);
+        }));
+      }
+      Promise.all(promises)
+      .then((imgs) => {
+        const width = imgs.map(img => img.width).reduce((a, b) => Math.max(a, b), 0);
+        const height = imgs.map(img => img.height).reduce((a, b) => a + b, 0);
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        let offset = 0;
+        for (const img of imgs) {
+          ctx.drawImage(img, 0, offset);
+          offset += img.height;
+        }
+      })
+      .catch((err) => {
+        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];
+    },
+    getColor(cry) {
+      return ({
+        "accuser": "#2b76cb",
+        "court": "#a3c23f",
+        "date_and_place": "#5be3ff",
+        "intent": "#ff69cf",
+        "signature": "#e79531",
+        "topic": "#ffdb00",
+      })[cry];
+    },
+  },
+}
+</script>

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

@@ -33,6 +33,15 @@
                 </div>
               </router-link>
             </div>
+             <div class="column is-one-third">
+              <router-link to="/apply">
+                <div class="card">
+                  <div class="card-content">
+                    <b>Mám žalobu</b> a chci <u>opravdu</u> zkontrolovat její náležitosti
+                  </div>
+                </div>
+              </router-link>
+            </div>
           </div>
         </div>
       </div>