diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index 86ec578194df2d3b5d3dddc28fd4dd085884e5d1..f5229b2075c1811c24fcd758dc8db3611b2724a7 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -36,6 +36,9 @@ <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link> <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>Browse library</router-link> <router-link class="item" :to="{path: '/favorites'}"><i class="heart icon"></i> Favorites</router-link> + <router-link + v-if="$store.state.auth.authenticated" + class="item" :to="{path: '/activity'}"><i class="bell icon"></i> Activity</router-link> </div> </div> <div v-if="queue.previousQueue " class="ui black icon message"> diff --git a/front/src/router/index.js b/front/src/router/index.js index 827afc21823687dc266a69c601435015757a9045..ba9aadd981d844972a874a5fe0870a640b2f95e8 100644 --- a/front/src/router/index.js +++ b/front/src/router/index.js @@ -3,6 +3,7 @@ import Router from 'vue-router' import PageNotFound from '@/components/PageNotFound' import About from '@/components/About' import Home from '@/components/Home' +import InstanceTimeline from '@/views/instance/Timeline' import Login from '@/components/auth/Login' import Signup from '@/components/auth/Signup' import Profile from '@/components/auth/Profile' @@ -39,6 +40,11 @@ export default new Router({ name: 'about', component: About }, + { + path: '/activity', + name: 'activity', + component: InstanceTimeline + }, { path: '/login', name: 'login', diff --git a/front/src/views/instance/Timeline.vue b/front/src/views/instance/Timeline.vue new file mode 100644 index 0000000000000000000000000000000000000000..b959c25d66d397fc24c3c4b9d2ab62f26cdfb9fb --- /dev/null +++ b/front/src/views/instance/Timeline.vue @@ -0,0 +1,52 @@ +<template> + <div class="main pusher"> + <div class="ui vertical center aligned stripe segment"> + <div class="ui text container"> + <h1 class="ui header">Recent activity on this instance</h1> + <div class="ui feed"> + <component + class="event" + v-for="(event, index) in events" + :key="event.id + index" + v-if="components[event.type]" + :is="components[event.type]" + :event="event"> + <username + class="user" + :username="event.actor.local_id" + slot="user"></username> + {{ event.published }} + <human-date class="date" :date="event.published" slot="date"></human-date> + </component> + </div> + </div> + </div> + </div> +</template> + +<script> +import {mapState} from 'vuex' + +import Like from '@/components/activity/Like' +import Listen from '@/components/activity/Listen' + +export default { + data () { + return { + components: { + 'Like': Like, + 'Listen': Listen + } + } + }, + computed: { + ...mapState({ + events: state => state.instance.events + }) + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +</style>