<template> <div class="discover-admin-settings-component"> <div v-if="isLoaded" class="container-fluid mt-3"> <div class="row"> <div class="col-md-4 col-lg-3"> <sidebar :user="profile" /> </div> <div class="col-md-6 col-lg-6"> <b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb> <h1 class="font-default">Discover Settings</h1> <!-- <p class="font-default lead">Browse timelines of a specific instance</p> --> <hr> <div class="card font-default shadow-none border"> <div class="card-header"> <p class="text-center font-weight-bold mb-0">Manage Features</p> </div> <div class="card-body"> <div class="mb-2"> <b-form-checkbox size="lg" v-model="hashtags.enabled" name="check-button" switch class="font-weight-bold"> My Hashtags </b-form-checkbox> <p class="text-muted">Allow users to browse timelines of hashtags they follow</p> </div> <div class="mb-2"> <b-form-checkbox size="lg" v-model="memories.enabled" name="check-button" switch class="font-weight-bold"> My Memories </b-form-checkbox> <p class="text-muted">Allow users to access Memories, a timeline of posts they made or liked on this day in past years</p> </div> <div class="mb-2"> <b-form-checkbox size="lg" v-model="insights.enabled" name="check-button" switch class="font-weight-bold"> Account Insights </b-form-checkbox> <p class="text-muted">Allow users to access Account Insights, an overview of their account activity</p> </div> <div class="mb-2"> <b-form-checkbox size="lg" v-model="friends.enabled" name="check-button" switch class="font-weight-bold"> Find Friends </b-form-checkbox> <p class="text-muted">Allow users to access Find Friends, a directory of popular accounts</p> </div> <div> <b-form-checkbox size="lg" v-model="server.enabled" name="check-button" switch class="font-weight-bold"> Server Timelines </b-form-checkbox> <p class="text-muted">Allow users to access Server Timelines, a timeline of public posts from a specific instance</p> </div> </div> </div> <div v-if="server.enabled" class="card font-default shadow-none border my-3"> <div class="card-header"> <p class="text-center font-weight-bold mb-0">Manage Server Timelines</p> </div> <div class="card-body"> <div class="mb-2"> <b-form-group label="Server Mode"> <b-form-radio v-model="server.mode" value="all" disabled>Allow any instance (Not Recommended)</b-form-radio> <b-form-radio v-model="server.mode" value="allowlist">Limit by approved domains</b-form-radio> </b-form-group> <p class="text-muted">Set the allowed instances to browse</p> </div> <div v-if="server.mode == 'allowlist'"> <b-form-group label="Allowed Domains"> <b-form-textarea v-model="server.domains" placeholder="Add domains to allow here, separated by commas" rows="3" max-rows="6" ></b-form-textarea> </b-form-group> </div> </div> </div> </div> <div class="col-md-2 col-lg-3"> <button v-if="hasChanged" class="btn btn-primary btn-block primary font-weight-bold" @click="saveFeatures">Save changes</button> </div> </div> </div> </div> </template> <script type="text/javascript"> import Drawer from './../partials/drawer.vue'; import Sidebar from './../partials/sidebar.vue'; import StatusCard from './../partials/TimelineStatus.vue'; export default { components: { "drawer": Drawer, "sidebar": Sidebar, "status-card": StatusCard }, data() { return { isLoaded: false, isLoading: true, profile: window._sharedData.user, breadcrumbItems: [ { text: 'Discover', href: '/i/web/discover' }, { text: 'Settings', active: true } ], hasChanged: false, features: {}, original: undefined, hashtags: { enabled: undefined }, memories: { enabled: undefined }, insights: { enabled: undefined }, friends: { enabled: undefined }, server: { enabled: undefined, mode: 'allowlist', domains: '' }, } }, watch: { hashtags: { deep: true, handler: function(val, old) { this.updateFeatures('hashtags'); }, }, memories: { deep: true, handler: function(val, old) { this.updateFeatures('memories'); }, }, insights: { deep: true, handler: function(val, old) { this.updateFeatures('insights'); }, }, friends: { deep: true, handler: function(val, old) { this.updateFeatures('friends'); }, }, server: { deep: true, handler: function(val, old) { this.updateFeatures('server'); }, } }, beforeMount() { if(!this.profile.is_admin) { this.$router.push('/i/web/discover'); } this.fetchConfig(); }, methods: { fetchConfig() { axios.get('/api/pixelfed/v2/discover/meta') .then(res => { this.original = res.data; this.storeOriginal(res.data); }) }, storeOriginal(data) { this.friends.enabled = data.friends.enabled; this.hashtags.enabled = data.hashtags.enabled; this.insights.enabled = data.insights.enabled; this.memories.enabled = data.memories.enabled; this.server = { domains: data.server.domains, enabled: data.server.enabled, mode: data.server.mode }; this.isLoaded = true; }, updateFeatures(id) { if(!this.isLoaded) { return; } let changed = false; if(this.friends.enabled !== this.original.friends.enabled) { changed = true; } if(this.hashtags.enabled !== this.original.hashtags.enabled) { changed = true; } if(this.insights.enabled !== this.original.insights.enabled) { changed = true; } if(this.memories.enabled !== this.original.memories.enabled) { changed = true; } if(this.server.enabled !== this.original.server.enabled) { changed = true; } if(this.server.domains !== this.original.server.domains) { changed = true; } if(this.server.mode !== this.original.server.mode) { changed = true; } // if(JSON.stringify(this.server) !== JSON.stringify(this.original.server)) { // changed = true; // } this.hasChanged = changed; }, saveFeatures() { axios.post('/api/pixelfed/v2/discover/admin/features', { features: { friends: this.friends, hashtags: this.hashtags, insights: this.insights, memories: this.memories, server: this.server } }) .then(res => { // let data = { // friends: res.data.friends, // hashtags: res.data.hashtags, // insights: res.data.insights, // memories: res.data.memories, // server: res.data.server // } // this.original = data; this.server = res.data.server; this.$bvToast.toast('Successfully updated settings!', { title: 'Discover Settings', autoHideDelay: 5000, appendToast: true, variant: 'success' }) }) } } } </script> <style lang="scss" scoped> .discover-admin-settings-component { .bg-stellar { background: #7474BF; background: -webkit-linear-gradient(to right, #348AC7, #7474BF); background: linear-gradient(to right, #348AC7, #7474BF); } .font-default { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: -0.7px; } .active { font-weight: 700; } } </style>