From e231b71701726d436007d3dbd94a2ae895881612 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Fri, 2 Mar 2018 00:14:08 +0100
Subject: [PATCH] Timeline view
---
front/src/components/Sidebar.vue | 3 ++
front/src/router/index.js | 6 ++++
front/src/views/instance/Timeline.vue | 52 +++++++++++++++++++++++++++
3 files changed, 61 insertions(+)
create mode 100644 front/src/views/instance/Timeline.vue
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 86ec5781..f5229b20 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 827afc21..ba9aadd9 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 00000000..b959c25d
--- /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>
--
GitLab