pixelfed/pixelfed

<template>
<div>
    <transition name="fade">
        <div v-if="announcements.length" class="card border shadow-none mb-3">
            <div class="card-header text-muted bg-white">
                <i class="fas fa-bullhorn mr-2"></i> <span class="text-weight-light">ANNOUNCEMENTS</span>
                <span class="float-right cursor-pointer" title="Close" @click="close"><i class="fas fa-times text-lighter"></i></span>
            </div>
            <div class="card-body">
                <div class="card-title mb-0">
                    <span class="font-weight-bold">{{announcement.title}}</span>
                </div>
                <p class="card-text">
                    <span style="font-size:13px;">{{announcement.summary}}</span>
                </p>
                <p class="d-flex align-items-center justify-content-between mb-0">
                    <a v-if="announcement.url" :href="announcement.url" class="small font-weight-bold mb-0">Read more</a>
                    <span v-else></span>
                    <span>
                        <span :class="[showPrev ? 'btn btn-outline-secondary btn-sm py-0':'btn btn-outline-secondary btn-sm py-0 disabled']" :disabled="showPrev == false" @click="loadPrev()">
                            <i class="fas fa-chevron-left fa-sm"></i>
                        </span>
                        <span class="btn btn-outline-success btn-sm py-0 mx-1" title="Mark as Read" data-toggle="tooltip" data-placement="bottom" @click="markAsRead()">
                            <i class="fas fa-check fa-sm"></i>
                        </span>
                        <span :class="[showNext ? 'btn btn-outline-secondary btn-sm py-0':'btn btn-outline-secondary btn-sm py-0 disabled']" :disabled="showNext == false" @click="loadNext()">
                            <i class="fas fa-chevron-right fa-sm"></i>
                        </span>
                    </span>
                </p>
            </div>
        </div>
    </transition>
</div>
</template>

<style type="text/css" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

<script type="text/javascript">
export default {
    data() {
        return {
            announcements: [],
            announcement: {},
            cursor: 0,
            showNext: true,
            showPrev: false
        }
    },

    mounted() {
        this.fetchAnnouncements();
    },

    updated() {
        $('[data-toggle="tooltip"]').tooltip()
    },

    methods: {
        fetchAnnouncements() {
            let self = this;
            let key = 'metro-tips-closed';
            let cached = JSON.parse(window.localStorage.getItem(key));
            axios.get('/api/pixelfed/v1/newsroom/timeline')
            .then(res => {
                self.announcements = res.data.filter(p => {
                    if(cached) {
                        return cached.indexOf(p.id) == -1;
                    } else {
                        return true;
                    }
                });
                self.announcement = self.announcements[0]
                if(self.announcements.length == 1) {
                    self.showNext = false;
                }
            })
        },

        loadNext() {
            if(!this.showNext) {
                return;
            }
            this.cursor += 1;
            this.announcement = this.announcements[this.cursor];
            if((this.cursor + 1) == this.announcements.length) {
                this.showNext = false;
            }
            if(this.cursor >= 1) {
                this.showPrev = true;
            }
        },

        loadPrev() {
            if(!this.showPrev) {
                return;
            }
            this.cursor -= 1;
            this.announcement = this.announcements[this.cursor];
            if(this.cursor == 0) {
                this.showPrev = false;
            }
            if(this.cursor < this.announcements.length) {
                this.showNext = true;
            }
        },

        closeNewsroomPost(id, index) {
            let key = 'metro-tips-closed';
            let ctx = [];
            let cached = window.localStorage.getItem(key);
            if(cached) {
                ctx = JSON.parse(cached);
            }
            ctx.push(id);
            window.localStorage.setItem(key, JSON.stringify(ctx));
            this.newsroomPosts = this.newsroomPosts.filter(res => {
                return res.id !== id
            });
            if(this.newsroomPosts.length == 0) {
                this.showTips = false;
            } else {
                this.newsroomPost = [ this.newsroomPosts[0] ];
            }
        },

        close() {
            window.localStorage.setItem('metro-tips', false);
            this.$emit('show-tips', false);
        },

        markAsRead() {
            let vm = this;
            axios.post('/api/pixelfed/v1/newsroom/markasread', {
                id: this.announcement.id
            })
            .then(res => {
                let cur = vm.cursor;
                vm.announcements.splice(cur, 1);
                vm.announcement = vm.announcements[0];
                vm.cursor = 0;
                vm.showPrev = false;
                vm.showNext = vm.announcements.length > 1;
            })
            .catch(err => {
                swal('Oops, Something went wrong', 'There was a problem with your request, please try again later.', 'error');
            });
        }
    }
}
</script>