AnonymousTopicBasedPubSubCommunicationforMicroblogging/gui/src/App.vue

<template>
<div class="container">
  <div class="toppane">
    <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">
    <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">
        <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">
    <h1 style="font-size: large;text-align: center;">Tweets</h1>
    <ul>
      <Tweet
        v-for="(tweet, index) in tweets"
        :key=index
        :topics="tweet.topics"
        :text="tweet.text"
      ></Tweet>
    </ul>
  </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">
        <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>

    <div id="formBody" style="display: flex;justify-content: center;align-items: center;height: 90vh;">

    <form method="POST" id="inputForm">

        <label for="message">Message</label>
        <input id="message" name="message" value="app.vue" type="text">
        <button type="submit" style="width:100px;">Go ...</button>
    </form>     


    </div>

    <div id="serverMessageBox" style="text-align: center;">


    </div>
 
</template>

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

export default {
  components: { Tweet },
  data: function() {
    return {
      url : "127.0.0.1:5555",
      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: [],
      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})
    }
  }
}

</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: #0058b759;
    border-collapse: collapse;
}

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

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

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

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