Add RSS feeds config page

client/pages/config/rss-feeds.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderRSSFeeds">
+      <div v-if="feeds.length" class="block max-w-full">
+        <table class="rssFeedsTable text-xs">
+          <tr class="bg-primary bg-opacity-40 h-12">
+            <th class="w-16 min-w-16"></th>
+            <th class="w-48 max-w-64 min-w-24 text-left truncate">{{ $strings.LabelTitle }}</th>
+            <th class="w-48 min-w-24 text-left hidden xl:table-cell">{{ $strings.LabelSlug }}</th>
+            <th class="w-24 min-w-16 text-left hidden md:table-cell">{{ $strings.LabelType }}</th>
+            <th class="w-16 min-w-16 text-center">{{ $strings.HeaderEpisodes }}</th>
+            <th class="w-16 min-w-16 text-center hidden lg:table-cell">{{ $strings.LabelRSSFeedPreventIndexing }}</th>
+            <th class="w-48 min-w-24 flex-grow hidden md:table-cell">{{ $strings.LabelLastUpdate }}</th>
+            <th class="w-16 text-left"></th>
+          </tr>
+
+          <tr v-for="feed in feeds" :key="feed.id" class="cursor-pointer h-12" @click="showFeed(feed)">
+            <!--  -->
+            <td>
+              <img :src="coverUrl(feed)" class="h-full w-full" />
+            </td>
+            <!--  -->
+            <td class="w-48 max-w-64 min-w-24 text-left truncate">
+              <p class="truncate">{{ feed.meta.title }}</p>
+            </td>
+            <!--  -->
+            <td class="hidden xl:table-cell">
+              <p class="truncate">{{ feed.slug }}</p>
+            </td>
+            <!--  -->
+            <td class="hidden md:table-cell">
+              <p class="">{{ getEntityType(feed.entityType) }}</p>
+            </td>
+            <!--  -->
+            <td class="text-center">
+              <p class="">{{ feed.episodes.length }}</p>
+            </td>
+            <!--  -->
+            <td class="text-center leading-none hidden lg:table-cell">
+              <p v-if="feed.meta.preventIndexing" class="">
+                <span class="material-icons text-2xl">check</span>
+              </p>
+            </td>
+            <!--  -->
+            <td class="text-center hidden md:table-cell">
+              <ui-tooltip v-if="feed.updatedAt" direction="top"
+                :text="$formatDatetime(feed.updatedAt, dateFormat, timeFormat)">
+                <p class=" text-gray-200">{{ $dateDistanceFromNow(feed.updatedAt) }}</p>
+              </ui-tooltip>
+            </td>
+            <!--  -->
+            <td class="text-center">
+              <ui-icon-btn icon="delete" class="mx-0.5" :size="7" bg-color="error" outlined
+                @click.stop="deleteFeedClick(feed)" />
+            </td>
+          </tr>
+        </table>
+      </div>
+    </app-settings-content>
+    <modals-rssfeed-view-feed-modal v-model="showFeedModal" :feed="selectedFeed" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showFeedModal: false,
+      selectedFeed: null,
+      feeds: [],
+    }
+  },
+  computed: {
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
+    }
+  },
+  methods: {
+    showFeed(feed) {
+      this.selectedFeed = feed
+      this.showFeedModal = true
+    },
+    deleteFeedClick(feed) {
+      const payload = {
+        message: this.$strings.MessageConfirmCloseFeed,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteFeed(feed)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteFeed(feed) {
+      this.processing = true
+      this.$axios
+        .$post(`/api/feeds/${feed.id}/close`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastRSSFeedCloseSuccess)
+          this.show = false
+          this.loadFeeds()
+        })
+        .catch((error) => {
+          console.error('Failed to close RSS feed', error)
+          this.$toast.error(this.$strings.ToastRSSFeedCloseFailed)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    getEntityType(entityType) {
+      if (entityType === 'libraryItem') return this.$strings.LabelItem
+      else if (entityType === 'series') return this.$strings.LabelSeries
+      else if (entityType === 'collection') return this.$strings.LabelCollection
+      return this.$strings.LabelUnknown
+    },
+    coverUrl(feed) {
+      if (!feed.coverPath) return `${this.$config.routerBasePath}/Logo.png`
+      return `${feed.feedUrl}/cover`
+    },
+    async loadFeeds() {
+      const data = await this.$axios.$get(`/api/feeds`).catch((err) => {
+        console.error('Failed to load RSS feeds', err)
+        return null
+      })
+      if (!data) {
+        this.$toast.error('Failed to load RSS feeds')
+        return
+      }
+      this.feeds = data.feeds
+    },
+    init() {
+      this.loadFeeds()
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+.rssFeedsTable {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #474747;
+}
+
+.rssFeedsTable tr:first-child {
+  background-color: #272727;
+}
+
+.rssFeedsTable tr:not(:first-child) {
+  background-color: #373838;
+}
+
+.rssFeedsTable tr:not(:first-child):nth-child(odd) {
+  background-color: #2f2f2f;
+}
+
+.rssFeedsTable tr:hover:not(:first-child) {
+  background-color: #474747;
+}
+
+.rssFeedsTable td {
+  padding: 4px 8px;
+}
+
+.rssFeedsTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>