123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <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>
-
- </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: [],
- 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>
|