basic layout of gui

gui/src/App.vue

@@ -2,20 +2,27 @@
 <div class="container">
   <div class="toppane">
     <form>
-    <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>
+      <h1 style="font-size: large">Anonymous Topic Based PubSub Communication for Microblogging</h1>
+      <input type="text" ref="my_input" id="tweetInput">
+      <button @click.prevent="submitTweet()">Submit</button>
+      <br>
+      <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
+
+    </form>
   </div>
-  <div class="leftpane"> Placeholder
-    <div class="tabs"></div>
+  <div class="leftpane">
     <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>
+        <input type="checkbox" :value="topic.topic" v-model="selectedTopics">
+        <label :for="topic.topic">{{topic.topic}}</label>
+      </li>
     </ol>
-    
+    <div class="impressum">
+      <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
+        <br><br>
+        <a href="https://arxiv.org/pdf/2108.08624.pdf" target="_blank"> You can find the paper the thesis is based upon here</a>
+      </h1>
+    </div>
   </div>
 
   <div class="middlepane">
@@ -30,7 +37,21 @@
   </div>
 
   <div class="rightpane">
-    <h1>placeholder</h1>
+    <ol>
+      <li v-for="topic in topicListArchive">
+        <input type="checkbox" :value="topic.topic" v-model="selectedTopicsArchive">
+        <label :for="topic.topic">{{topic.topic}}</label>
+      </li>
+    </ol>
+    <br>
+    <ul>
+      <Tweet
+        v-for="(tweet, index) in tweetsArchive"
+        :key=index
+        :topics="tweet.topics"
+        :text="tweet.text"
+      ></Tweet>
+    </ul>
   </div>
 </div>
  
@@ -55,17 +76,32 @@ export default {
         }
       ],
       topicList : [
-        { topic: "house" },
-        { topic: "mouse" },
-        { topic: "sports" },
+        { topic: " house" },
+        { topic: " mouse" },
+        { topic: " sports" },
       ],
       selectedTopics: [],
+      tweetsArchive: [
+        {
+          topics: "#sports",
+          text: "Lets go other team"
+        }
+      ],
+      topicListArchive : [
+        {topic: " sports"},
+      ],
+      selectedTopicsArchive: []
     }
   },
   methods: {
     submitTweet () {
       this.tweetToSubmit = this.$refs.my_input.value
       document.getElementById('tweetInput').value = ''
+    },
+    //todo! call from goCode somehow
+    updateTopics () {
+      this.topicList = [{topic : this.topicList[1].topic}, {topic: "b"}]
+      this.topicList.push({topic : this.topicList[0].topic})
     }
   }
 }
@@ -90,7 +126,7 @@ body, html {
     width: 25%;
     height: 100%;
     float: left;
-    background-color: rosybrown;
+    background-color: #0058b759;
     border-collapse: collapse;
 }
 
@@ -106,7 +142,7 @@ body, html {
   height: 100%;
   position: relative;
   float: right;
-  background-color: yellow;
+  background-color: #ffd700;
   border-collapse: collapse;
 }