watchstate/frontend/pages/index.vue

<template>
  <div>
    <div class="columns is-multiline">
      <div class="column is-12">
        <h1 class="title is-4">
          <span class="icon"><i class="fas fa-history"></i>&nbsp;</span>
          <NuxtLink to="/history">Latest History</NuxtLink>
        </h1>
      </div>

      <div class="column is-12">
        <div class="columns is-multiline" v-if="lastHistory.length>1">
          <div class="column is-6-tablet" v-for="history in lastHistory" :key="history.id">
            <div class="card" :class="{ 'is-success': history.watched }">
              <header class="card-header">
                <p class="card-header-title is-text-overflow">
                  <NuxtLink :to="`/history/${history.id}`" v-text="makeName(history)"/>
                </p>
                <span class="card-header-icon">
                  <span class="icon" v-if="'episode' === history.type"><i class="fas fa-tv"></i></span>
                  <span class="icon" v-else><i class="fas fa-film"></i></span>
                </span>
              </header>
              <div class="card-content">
                <div class="columns is-multiline is-mobile has-text-centered">
                  <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
                    <div class="is-text-overflow">
                      <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
                      <span class="has-tooltip"
                            v-tooltip="`Record updated at: ${moment.unix(history.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
                        {{ moment.unix(history.updated_at).fromNow() }}
                      </span>
                    </div>
                  </div>
                  <div class="column is-4-tablet is-6-mobile has-text-right-mobile">
                    <div class="is-text-overflow">
                      <span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
                      <NuxtLink :to="'/backend/'+history.via" v-text="history.via"/>
                      <span v-if="history?.metadata && Object.keys(history?.metadata).length > 1"
                            v-tooltip="`Also reported by: ${Object.keys(history.metadata).filter(i => i !== history.via).join(', ')}.`">
                        (<span class="has-tooltip">+{{ Object.keys(history.metadata).length - 1 }}</span>)
                      </span>
                    </div>
                  </div>
                  <div class="column is-4-tablet is-12-mobile has-text-left-mobile">
                    <div class="is-text-overflow">
                      <span class="icon"><i class="fas fa-envelope"></i>&nbsp;</span>
                      {{ history.event }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer" v-if="history.progress">
                <div class="card-footer-item">
                  <span class="has-text-success" v-if="history.watched">Played</span>
                  <span class="has-text-danger" v-else>Unplayed</span>
                </div>
                <div class="card-footer-item">{{ formatDuration(history.progress) }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="column is-12" v-else>
          <Message title="Warning" message_class="has-background-warning-90 has-text-dark"
                   icon="fas fa-exclamation-triangle"
                   message="No items were found. There are probably no items in the local database yet.">
          </Message>
        </div>
      </div>

      <div class="column is-12" v-for="log in logs" :key="log.filename">
        <h1 class="title is-4">
          <span class="icon" v-if="'access' === log.type"><i class="fas fa-key"></i></span>
          <span class="icon" v-if="'task' === log.type"><i class="fas fa-tasks"></i></span>
          <span class="icon" v-if="'app' === log.type"><i class="fas fa-bugs"></i></span>
          <span class="icon" v-if="'webhook' === log.type"><i class="fas fa-book"></i></span>
          <NuxtLink :to="`/logs/${log.filename}`">
            Latest {{ log.type }} logs
          </NuxtLink>
        </h1>
        <code class="box logs-container">
          <span class="is-block" v-for="(item, index) in log.lines" :key="log.filename + '-' + index">
            {{ item }}
          </span>
        </code>
      </div>

      <div class="column is-12">
        <div class="content">
          <Message title="Welcome" message_class="has-background-info-90 has-text-dark" icon="fas fa-heart">
            If you have question, or want clarification on something, or just want to chat with other users, you are
            welcome to join our <span class="icon-text is-underlined">
            <span class="icon"><i class="fas fa-brands fa-discord"></i></span>
            <span>
              <NuxtLink to="https://discord.gg/haUXHJyj6Y" target="_blank" v-text="'Discord server'"/>
            </span>
          </span>. For bug reports, feature requests, or contributions, please visit the
            <span class="icon-text is-underlined">
              <span class="icon"><i class="fas fa-brands fa-github"></i></span>
              <span>
                <NuxtLink to="https://github.com/arabcoders/watchstate/issues/new/choose" target="_blank"
                          v-text="'GitHub repository'"/>
              </span>
            </span>.
          </Message>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logs-container {
  max-height: 20vh;
  overflow-y: auto;
  white-space: pre;
}
</style>

<script setup>
import request from '~/utils/request'
import moment from 'moment'
import Message from '~/components/Message'
import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index'

useHead({title: 'Index'})

const lastHistory = ref([])
const logs = ref([])

const loadContent = async () => {
  try {
    const response = await request(`/history?perpage=6`)
    if (response.ok) {
      const historyResponse = await response.json()
      if (useRoute().name !== 'index') {
        return
      }

      lastHistory.value = historyResponse.history
    }
  } catch (e) {
  }

  try {
    const response = await request(`/logs/recent`)
    if (response.ok) {
      const logsResponse = await response.json()
      if (useRoute().name !== 'index') {
        return
      }
      logs.value = logsResponse
    }
  } catch (e) {
  }
}

onMounted(async () => loadContent())
onUpdated(() => document.querySelectorAll('.logs-container').forEach((el) => el.scrollTop = el.scrollHeight))
</script>