AnonymousTopicBasedPubSubCommunicationforMicroblogging/gui/src/App.vue

<template>
<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>
  </div>
  <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">
    <ul>
      <Tweet
        v-for="(tweet, index) in tweets"
        :key=index
        :topics="tweet.topics"
        :text="tweet.text"
      ></Tweet>
    </ul>
  </div>

  <div class="rightpane">
    <h1>placeholder</h1>
  </div>
</div>
 
</template>

<script>
import Tweet from './components/Tweet.vue'

export default {
  components: { Tweet },
  data: function() {
    return {
      tweetToSubmit: '',
      tweets : [
        {
          topics: "#house #mouse",
          text: "I am a house in a mouse"
        },
        {
          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 = ''
    }
  }
}

</script>

<style>
@import './assets/base.css';

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 25%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}

.middlepane {
    width: 50%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.rightpane {
  width: 25%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

.toppane {
  margin-top: 10px;
  width: 100%;
  height: 100px;
  border-collapse: collapse;
}

form {
  text-align: center;
}
</style>