From 7b157696e5d833305b591ab3ff0e477272473e69 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 18 Oct 2019 11:52:27 +0900
Subject: [PATCH] Add control menu to classification and seq2seq pages

---
 .../projects/_id/classification/index.vue     | 87 +++++++-----------
 frontend/pages/projects/_id/seq2seq/index.vue | 91 +++++++------------
 2 files changed, 66 insertions(+), 112 deletions(-)

diff --git a/frontend/pages/projects/_id/classification/index.vue b/frontend/pages/projects/_id/classification/index.vue
index b98ee84a..49047747 100644
--- a/frontend/pages/projects/_id/classification/index.vue
+++ b/frontend/pages/projects/_id/classification/index.vue
@@ -1,73 +1,52 @@
 <template>
-  <div>
-    <side-bar-labeling
-      :labels="labels"
-      :progress="progress"
-      :metadata="metadata"
-    />
-    <v-content>
-      <v-container fluid fill-height>
-        <v-layout justify-center>
-          <v-flex>
-            <text-classification />
-            <paginator class="mt-3" />
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </div>
+  <v-content>
+    <v-container fluid>
+      <v-row
+        no-gutters
+        class="d-none d-sm-flex"
+      >
+        <v-col>
+          <guideline-button />
+        </v-col>
+        <v-spacer />
+        <v-col>
+          <paginator />
+        </v-col>
+      </v-row>
+      <bottom-navigator class="d-flex d-sm-none" />
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <text-classification />
+        </v-col>
+        <v-col cols="12" md="3">
+          <metadata-box :metadata="JSON.parse(metadata)" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
 </template>
 
 <script>
 import TextClassification from '~/components/containers/TextClassification'
-import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
+import GuidelineButton from '@/components/containers/GuidelineButton'
+import MetadataBox from '@/components/organisms/MetadataBox'
+import BottomNavigator from '@/components/organisms/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   components: {
+    BottomNavigator,
     TextClassification,
-    SideBarLabeling,
-    Paginator
+    Paginator,
+    GuidelineButton,
+    MetadataBox
   },
 
   data() {
     return {
-      progress: 30,
-      metadata: '{"wikiPageId":2}',
-      labels: [
-        {
-          id: 1,
-          name: 'Location',
-          color: '#E91E63',
-          shortcut: 'l'
-        },
-        {
-          id: 2,
-          name: 'Organization',
-          color: '#03A9F4',
-          shortcut: 'o'
-        },
-        {
-          id: 3,
-          name: 'Person',
-          color: '#009688',
-          shortcut: 'p'
-        },
-        {
-          id: 4,
-          name: 'Date',
-          color: '#FF6F00',
-          shortcut: 'd'
-        },
-        {
-          id: 5,
-          name: 'Other',
-          color: '#333333',
-          shortcut: 't'
-        }
-      ]
+      metadata: '{"wikiPageId":2}'
     }
   },
 
diff --git a/frontend/pages/projects/_id/seq2seq/index.vue b/frontend/pages/projects/_id/seq2seq/index.vue
index 9a967bbb..a4daf4c1 100644
--- a/frontend/pages/projects/_id/seq2seq/index.vue
+++ b/frontend/pages/projects/_id/seq2seq/index.vue
@@ -1,74 +1,52 @@
 <template>
-  <div>
-    <side-bar-labeling
-      :labels="labels"
-      :progress="progress"
-      :metadata="metadata"
-    />
-    <v-content>
-      <v-container fluid fill-height>
-        <v-layout justify-center>
-          <v-flex>
-            <seq2seq-container />
-            <paginator class="mt-3" />
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </div>
+  <v-content>
+    <v-container fluid>
+      <v-row
+        no-gutters
+        class="d-none d-sm-flex"
+      >
+        <v-col>
+          <guideline-button />
+        </v-col>
+        <v-spacer />
+        <v-col>
+          <paginator />
+        </v-col>
+      </v-row>
+      <bottom-navigator class="d-flex d-sm-none" />
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <seq2seq-container />
+        </v-col>
+        <v-col cols="12" md="3">
+          <metadata-box :metadata="JSON.parse(metadata)" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
 </template>
 
 <script>
 import Seq2seqContainer from '~/components/containers/Seq2seqContainer'
-import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
+import GuidelineButton from '@/components/containers/GuidelineButton'
+import MetadataBox from '@/components/organisms/MetadataBox'
+import BottomNavigator from '@/components/organisms/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   components: {
     Seq2seqContainer,
-    SideBarLabeling,
-    Paginator
+    Paginator,
+    GuidelineButton,
+    MetadataBox,
+    BottomNavigator
   },
 
   data() {
     return {
-      progress: 30,
-      metadata: '{"wikiPageId":2}',
-      search: '',
-      labels: [
-        {
-          id: 1,
-          name: 'Location',
-          color: '#E91E63',
-          shortcut: 'l'
-        },
-        {
-          id: 2,
-          name: 'Organization',
-          color: '#03A9F4',
-          shortcut: 'o'
-        },
-        {
-          id: 3,
-          name: 'Person',
-          color: '#009688',
-          shortcut: 'p'
-        },
-        {
-          id: 4,
-          name: 'Date',
-          color: '#FF6F00',
-          shortcut: 'd'
-        },
-        {
-          id: 5,
-          name: 'Other',
-          color: '#333333',
-          shortcut: 't'
-        }
-      ]
+      metadata: '{"wikiPageId":2}'
     }
   },
 
@@ -77,6 +55,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-</style>