cphipps/watchstate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added simple page transition.

Browse Source
This commit is contained in:
Abdulmhsen B. A. A.
2024-07-22 21:31:46 +03:00
parent 109d133837
commit 2fb9435367
28 changed files with 3807 additions and 3735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/pages/backend/[backend]/sessions.vue
View File

@@ -1,68 +1,71 @@
<template>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<NuxtLink to="/backends" v-text="'Backends'"/>
-
<NuxtLink :to="'/backend/' + backend" v-text="backend"/>
: Sessions
</span>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<NuxtLink to="/backends" v-text="'Backends'"/>
-
<NuxtLink :to="'/backend/' + backend" v-text="backend"/>
: Sessions
</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
</div>
<div class="subtitle is-hidden-mobile">
Show backend's sessions that are currently active.
</div>
</div>
<div class="subtitle is-hidden-mobile">
Show backend's sessions that are currently active.
<div class="column is-12" v-if="items.length < 1">
<Message message_class="is-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
v-if="isLoading" message="Requesting active play sessions. Please wait..."/>
<Message v-else message_class="has-background-success-90 has-text-dark" title="Information"
icon="fa fa-info-circle" message="There are no active play sessions currently running."/>
</div>
</div>
<div class="column is-12" v-if="items.length < 1">
<Message message_class="is-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
v-if="isLoading" message="Requesting active play sessions. Please wait..."/>
<Message v-else message_class="has-background-success-90 has-text-dark" title="Information"
icon="fa fa-info-circle" message="There are no active play sessions currently running."/>
</div>
<template v-else>
<div class="column is-12">
<div class="content">
<h1 class="title is-4">Active Sessions</h1>
<template v-else>
<div class="column is-12">
<div class="content">
<h1 class="title is-4">Active Sessions</h1>
</div>
</div>
</div>
<div class="column is-12">
<table class="table is-fullwidth is-hoverable is-striped">
<thead>
<tr>
<th>User</th>
<th>Title</th>
<th>State</th>
<th>Progress at</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.user_name }}</td>
<td>
<NuxtLink :to="makeItemLink(item)" v-text="item.item_title"/>
</td>
<td>{{ item.session_state }}</td>
<td>{{ formatDuration(item.item_offset_at) }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<div class="column is-12">
<table class="table is-fullwidth is-hoverable is-striped">
<thead>
<tr>
<th>User</th>
<th>Title</th>
<th>State</th>
<th>Progress at</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.user_name }}</td>
<td>
<NuxtLink :to="makeItemLink(item)" v-text="item.item_title"/>
</td>
<td>{{ item.session_state }}</td>
<td>{{ formatDuration(item.item_offset_at) }}</td>
</tr>
</tbody>
</table>
</div>
</template>
</div>
</div>
</template>
<script setup>
import {formatDuration, notification} from "~/utils/index.js";
import {formatDuration, notification} from "~/utils/index";
const backend = useRoute().params.backend
const items = ref([])