pixelfed/resources/assets/components/Home.vue
2024-02-16 02:58:27 -07:00

181 lines
7.6 KiB
Vue

<template>
<div class="web-wrapper">
<div v-if="isLoaded" class="container-fluid mt-3">
<div class="row">
<div class="col-md-4 col-lg-3">
<sidebar
:user="profile"
@refresh="shouldRefresh = true" />
</div>
<div class="col-md-8 col-lg-6 px-0">
<template v-if="showUpdateWarning && updateInfo && updateInfo.hasOwnProperty('running_latest')">
<div class="card rounded-lg mb-4 ft-std" style="background: #e11d48;border: 3px dashed #fff">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-column flex-lg-row" style="gap:1rem">
<div class="d-flex justify-content-between align-items-center" style="gap:1rem">
<i class="d-none d-sm-block far fa-exclamation-triangle fa-5x text-white"></i>
<div>
<h1 class="h3 font-weight-bold text-light mb-0">New Update Available</h1>
<p class="mb-0 text-white" style="font-size:18px;">Update your Pixelfed server as soon as possible!</p>
<p class="mb-n1 text-white small" style="opacity:.7">Once you update, this message will disappear.</p>
<p class="mb-0 text-white small d-flex" style="opacity:.5;gap:1rem;">
<span>Current version: <strong>{{ updateInfo?.current ?? 'Unknown' }}</strong></span>
<span>Latest version: <strong>{{ updateInfo?.latest?.version ?? 'Unknown' }}</strong></span>
</p>
</div>
</div>
<a v-if="updateInfo.latest.url" class="btn btn-light font-weight-bold" :href="updateInfo.latest.url" target="_blank">View Update</a>
</div>
</div>
</div>
</template>
<template v-if="showUpdateConnectionWarning">
<div class="card rounded-lg mb-4 ft-std" style="background: #e11d48;border: 3px dashed #fff">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-column flex-lg-row" style="gap:1rem">
<div class="d-flex justify-content-between align-items-center" style="gap:1rem">
<i class="d-none d-sm-block far fa-exclamation-triangle fa-5x text-white"></i>
<div>
<h1 class="h3 font-weight-bold text-light mb-1">Software Update Check Failed</h1>
<p class="mb-1 text-white" style="font-size:18px;line-height: 1.2;">We attempted to check if there is a new version available, however we encountered an error. <a href="https://github.com/pixelfed/pixelfed/releases" class="text-white font-weight-bold" style="text-decoration: underline;" target="_blank">Click here</a> to view the latest releases.</p>
<p class="mb-0 text-white small">You can set <code class="text-white">INSTANCE_SOFTWARE_UPDATE_DISABLE_FAILED_WARNING=true</code> to remove this warning.</p>
<p class="mb-0 text-white small" style="opacity:.7">Current version: {{ updateInfo?.current ?? 'Unknown' }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<story-carousel
v-if="storiesEnabled"
:profile="profile" />
<timeline
:profile="profile"
:scope="scope"
:key="scope"
v-on:update-profile="updateProfile"
:refresh="shouldRefresh"
@refreshed="shouldRefresh = false" />
</div>
<div class="d-none d-lg-block col-lg-3">
<rightbar class="sticky-top sidebar" />
</div>
</div>
<drawer />
</div>
<div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
<b-spinner />
</div>
</div>
</template>
<script type="text/javascript">
import Drawer from './partials/drawer.vue';
import Sidebar from './partials/sidebar.vue';
import Rightbar from './partials/rightbar.vue';
import Timeline from './sections/Timeline.vue';
import Notifications from './sections/Notifications.vue';
import StoryCarousel from './partials/timeline/StoryCarousel.vue';
export default {
props: {
scope: {
type: String,
default: 'home'
}
},
components: {
"drawer": Drawer,
"sidebar": Sidebar,
"timeline": Timeline,
"rightbar": Rightbar,
"story-carousel": StoryCarousel,
},
data() {
return {
isLoaded: false,
profile: undefined,
recommended: [],
trending: [],
storiesEnabled: false,
shouldRefresh: false,
showUpdateWarning: false,
showUpdateConnectionWarning: false,
updateInfo: undefined,
}
},
mounted() {
this.init();
},
watch: {
'$route': 'init'
},
methods: {
init() {
this.profile = window._sharedData.user;
this.isLoaded = true;
this.storiesEnabled = window.App?.config?.features?.hasOwnProperty('stories') ? window.App.config.features.stories : false;
if(this.profile.is_admin) {
this.softwareUpdateCheck();
}
},
updateProfile(delta) {
this.profile = Object.assign(this.profile, delta);
},
softwareUpdateCheck() {
axios.get('/api/web-admin/software-update/check')
.then(res => {
if(!res || !res.data || !res.data.hasOwnProperty('running_latest') || res.data.running_latest) {
return;
}
if(res.data.running_latest === null) {
this.updateInfo = res.data;
this.showUpdateConnectionWarning = true;
return;
}
this.updateInfo = res.data;
this.showUpdateWarning = !res.data.running_latest;
})
.catch(err => {
this.showUpdateConnectionWarning = true;
})
}
}
}
</script>
<style lang="scss" scoped>
.avatar {
border-radius: 15px;
}
.username {
margin-bottom: -6px;
}
.btn-white {
background-color: #fff;
border: 1px solid #F3F4F6;
}
.sidebar {
top: 90px;
}
</style>