Added circle progress while titles is loading and fix missing images
This commit is contained in:
parent
c740c2d72b
commit
74dfc5628e
GPG key ID:
7B11051D5CE19825
3 changed files with 69 additions and 64 deletions
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,80 @@
|
|||
<template>
|
||||
|
||||
|
||||
<form @submit.prevent="filterTitles">
|
||||
<div class="field large prefix round fill">
|
||||
<i class="front">search</i>
|
||||
<input v-model="search" type="text">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<nav>
|
||||
<a class="chip" @click="updateByCodename('')">
|
||||
<i id="update_all_icon">done_all</i>
|
||||
<span>Завантажити нові серії</span>
|
||||
</a>
|
||||
<a class="chip" @click="fetchTorrents">
|
||||
<i>restart_alt</i>
|
||||
<span>Оновити список</span>
|
||||
</a>
|
||||
<div class="max"></div>
|
||||
<button class="round fill">
|
||||
<span>Сортування</span>
|
||||
<i>arrow_drop_down</i>
|
||||
<menu id="sort-menu">
|
||||
<a @click="sortTitles('name')">За назвою</a>
|
||||
<a @click="sortTitles('date')">За датою</a>
|
||||
<a @click="sortTitles('release')">За релізером</a>
|
||||
</menu>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<article class="no-padding" v-for="title in titles">
|
||||
<div class="grid">
|
||||
<div class="s12 m6 l3">
|
||||
<img class="responsive " :src=title.image>
|
||||
<main v-if="titles.length > 0">
|
||||
<form @submit.prevent="filterTitles">
|
||||
<div class="field large prefix round fill">
|
||||
<i class="front">search</i>
|
||||
<input v-model="search" type="text">
|
||||
</div>
|
||||
<div class="s9">
|
||||
<div class="padding">
|
||||
<h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
|
||||
</form>
|
||||
|
||||
<hr class="medium">
|
||||
<nav>
|
||||
<a class="chip" @click="updateByCodename('')">
|
||||
<i id="update_all_icon">done_all</i>
|
||||
<span>Завантажити нові серії</span>
|
||||
</a>
|
||||
<a class="chip" @click="fetchTorrents">
|
||||
<i>restart_alt</i>
|
||||
<span>Оновити список</span>
|
||||
</a>
|
||||
<div class="max"></div>
|
||||
<button class="round fill">
|
||||
<span>Сортування</span>
|
||||
<i>arrow_drop_down</i>
|
||||
<menu id="sort-menu">
|
||||
<a @click="sortTitles('name')">За назвою</a>
|
||||
<a @click="sortTitles('date')">За датою</a>
|
||||
<a @click="sortTitles('release')">За релізером</a>
|
||||
</menu>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
|
||||
<a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
|
||||
<a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
|
||||
<a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
|
||||
</div>
|
||||
<article class="no-padding" v-for="title in titles">
|
||||
<div class="grid">
|
||||
<div class="s12 m6 l3">
|
||||
<img class="responsive " :src=title.image>
|
||||
</div>
|
||||
<div class="s9">
|
||||
<div class="padding">
|
||||
<h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
|
||||
|
||||
<hr class="large">
|
||||
<hr class="medium">
|
||||
|
||||
<div>
|
||||
<a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
|
||||
<i>link</i>
|
||||
<span>Посилання</span>
|
||||
</a>
|
||||
<a class="chip green-border no-margin" @click="updateByCodename(title.codename)">
|
||||
<i>update</i>
|
||||
<span>Оновити</span>
|
||||
</a>
|
||||
<a class="chip amber-border no-margin" @click="editByCodename(title.codename)">
|
||||
<i>edit</i>
|
||||
<span>Редагувати</span>
|
||||
</a>
|
||||
<a class="chip red-border no-margin" @click="deleteByCodename(title.codename)">
|
||||
<i>delete</i>
|
||||
<span>Видалити</span>
|
||||
</a>
|
||||
<div>
|
||||
<a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
|
||||
<a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
|
||||
<a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
|
||||
<a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
|
||||
</div>
|
||||
|
||||
<hr class="large">
|
||||
|
||||
<div>
|
||||
<a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
|
||||
<i>link</i>
|
||||
<span>Посилання</span>
|
||||
</a>
|
||||
<a class="chip green-border no-margin" @click="updateByCodename(title.codename)">
|
||||
<i>update</i>
|
||||
<span>Оновити</span>
|
||||
</a>
|
||||
<a class="chip amber-border no-margin" @click="editByCodename(title.codename)">
|
||||
<i>edit</i>
|
||||
<span>Редагувати</span>
|
||||
</a>
|
||||
<a class="chip red-border no-margin" @click="deleteByCodename(title.codename)">
|
||||
<i>delete</i>
|
||||
<span>Видалити</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</main>
|
||||
<main class="responsive middle-align center-align" v-else>
|
||||
<progress class="circle extra"></progress>
|
||||
</main>
|
||||
|
||||
<dialog :class="{ 'active': isUpdated }">
|
||||
<h5 class="primary-text">{{ update.response_code }}</h5>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<article class="secondary-text">
|
||||
<a class="row wave"><i>title</i> Toloka2Web v2 Vue Version</a>
|
||||
<hr>
|
||||
<a class="row wave"><i>conversion_path</i> v1.0.3</a>
|
||||
<a class="row wave"><i>conversion_path</i> v1.0.4</a>
|
||||
</article>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue