added column names and cleanup

gui/src/App.vue

@@ -11,6 +11,7 @@
     </form>
   </div>
   <div class="leftpane">
+    <h1 style="font-size: large;text-align: center;">Topic list</h1>
     <ol>
       <li v-for="topic in topicList">
         <input type="checkbox" :value="topic.topic" v-model="selectedTopics">
@@ -26,6 +27,7 @@
   </div>
 
   <div class="middlepane">
+    <h1 style="font-size: large;text-align: center;">Tweets</h1>
     <ul>
       <Tweet
         v-for="(tweet, index) in tweets"
@@ -37,6 +39,7 @@
   </div>
 
   <div class="rightpane">
+    <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
     <ol>
       <li v-for="topic in topicListArchive">
         <input type="checkbox" :value="topic.topic" v-model="selectedTopicsArchive">

gui/src/App_old.vue

@@ -1,81 +0,0 @@
-<template>
-<div class="main-grid">
-<div class="head">2PPS
-  	<form>
-    <input type="text" ref="my_input">
-    <button @click.prevent="submitTweet()">Submit</button>
-  </form>
-</div>
-<div class="topicLists">
-  <topicLists id="topicLists"></topicLists>
-</div>
-<div class="tweets">
-  <ul>
-    <Tweet
-      v-for="(tweet, index) in tweets"
-      :key="tweet.id"
-      :topics="tweet.topics"
-      :text="tweet.text"
-    ></Tweet>
-  </ul>
-  </div>
-</div>
-<div class="ArchivedTweets">
-</div>
- 
-</template>
-
-<script>
-import topicLists from './components/TopicLists.vue'
-import Tweet from './components/Tweet.vue'
-
-export default {
-  components: { Tweet },
-  data() {
-    return {
-      tweetToSubmit: '',
-      tweets : [
-        {
-          id: 1,
-          topics: "house",
-          text: "asd"
-        },
-        {
-          id: 2,
-          topics: "mouse",
-          text: "asdds"
-        }
-      ]
-    }
-  },
-  methods: {
-    submitTweet () {
-      this.tweetToSubmit = this.$refs.my_input.value
-    }
-  }
-}
-
-</script>
-
-<style>
-@import './assets/base.css';
-
-header {
-  line-height: 1.5;
-  text-align: center;
-  font-size: large;
-}
-
-.topicLists {
-  float : left;
-  margin: 0 1.5%;
-  width: 30%;
-}
-
-.tweets {
-  float : left;
-  margin: 0 1.5%;
-  width: 30%;
-}
-
-</style>

gui/src/components/TheWelcome.vue

@@ -1,12 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #heading>TOPICS</template>
-
-    Tweet Text
-  </WelcomeItem>
-
-</template>

gui/src/components/TopicLists.vue

@@ -1,13 +0,0 @@
-<template>
-<div class="tabs"></div>
-<div class="topics">test</div>
-<div class="archivedTopics"></div>
-
-</template>
-
-<script></script>
-
-
-<style>
-
-</style>

gui/src/components/WelcomeItem.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="item">
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>