added topicList

gui/src/App.vue

@@ -1,54 +1,71 @@
 <template>
 <div class="container">
-  <div class="toppane">Test Page
+  <div class="toppane">
     <form>
-    <input type="text" ref="my_input">
+    <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
+    <input type="text" ref="my_input" id="tweetInput">
     <button @click.prevent="submitTweet()">Submit</button>
   </form>
-
   </div>
-  <div class="leftpane">
-    <h1>Test Page</h1>
+  <div class="leftpane"> placeholder
+    <div class="tabs"></div>
+    <ol>
+      <li v-for="topic in topicList">
+              <input type="checkbox" :id="topic.topic" :value="topic.topic" v-model="selectedTopics">
+              <label :for="topic.topic">{{topic.topic}}</label>
+            </li>
+    </ol>
+    
   </div>
-  <div class="middlepane">Test Page
-     <h1>Test Page</h1>
-     <h1>Test Page</h1>
-     <h1>Test Page</h1>
-     <h1>Test Page</h1>
-     
+
+  <div class="middlepane">
+    <ul>
+      <Tweet
+        v-for="(tweet, index) in tweets"
+        :key=index
+        :topics="tweet.topics"
+        :text="tweet.text"
+      ></Tweet>
+    </ul>
   </div>
+
   <div class="rightpane">
-    <h1>Test Page</h1></div>
+    <h1>placeholder</h1>
+  </div>
 </div>
  
 </template>
 
 <script>
-import topicLists from './components/TopicLists.vue'
 import Tweet from './components/Tweet.vue'
 
 export default {
   components: { Tweet },
-  data() {
+  data: function() {
     return {
       tweetToSubmit: '',
       tweets : [
         {
-          id: 1,
-          topics: "house",
-          text: "asd"
+          topics: "#house #mouse",
+          text: "I am a house in a mouse"
         },
         {
-          id: 2,
-          topics: "mouse",
-          text: "asdds"
+          topics: "#sports",
+          text: "Lets go my team"
         }
-      ]
+      ],
+      topicList : [
+        { topic: "house" },
+        { topic: "mouse" },
+        { topic: "sports" },
+      ],
+      selectedTopics: [],
     }
   },
   methods: {
     submitTweet () {
       this.tweetToSubmit = this.$refs.my_input.value
+      document.getElementById('tweetInput').value = ''
     }
   }
 }
@@ -81,7 +98,6 @@ body, html {
     width: 50%;
     height: 100%;
     float: left;
-    background-color: royalblue;
     border-collapse: collapse;
 }
 
@@ -95,9 +111,13 @@ body, html {
 }
 
 .toppane {
+  margin-top: 10px;
   width: 100%;
   height: 100px;
   border-collapse: collapse;
-  background-color: #4da6ff;
+}
+
+form {
+  text-align: center;
 }
 </style>