mirror of https://github.com/Kylart/KawAnime.git
All templates are now Pug!
Added .editorconfig for vs-code Updated to vuetify 0.14.11 `pack` script
This commit is contained in:
Kylart
parent
2dceb4124a
commit
a564f15f84
|
|
@ -0,0 +1,13 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.{js,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
169
assets/App.vue
169
assets/App.vue
|
|
@ -1,108 +1,67 @@
|
|||
<template>
|
||||
<v-app dark footer toolbar>
|
||||
<v-navigation-drawer class="pb-0"
|
||||
style="width: 280px"
|
||||
temporary
|
||||
v-model="$store.state.drawer"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-tile id="title" to="/">
|
||||
<v-list-tile-action>
|
||||
<img src="static/images/icon2.png" height="50"/>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="title">
|
||||
かわニメ
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<template v-for="item in itemGroup">
|
||||
<v-list-group v-if="item.items"
|
||||
:key="item.title">
|
||||
<v-list-tile slot="item" class="ripple" ripple>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ item.action }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
{{ item.title }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-action>
|
||||
<v-icon>
|
||||
keyboard_arrow_down
|
||||
</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-for="subItem in item.items"
|
||||
class="ripple"
|
||||
ripple
|
||||
:to="subItem.href"
|
||||
:key="subItem.title">
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ subItem.action }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider></v-divider>
|
||||
</v-list-group>
|
||||
<v-subheader v-else-if="item.header" class="white--text">{{ item.header }}</v-subheader>
|
||||
<v-divider v-else-if="item.divider"></v-divider>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-system-bar dark
|
||||
status
|
||||
class="wb dragable"
|
||||
v-if="!browser">
|
||||
<v-spacer></v-spacer>
|
||||
<div v-if="$store.state.platform !== 'darwin'">
|
||||
<v-icon class="window-icon non-dragable" @click="actOnWindow('minimize')">remove</v-icon>
|
||||
<v-icon class="window-icon non-dragable" @click="actOnWindow('maximize')">check_box_outline_blank</v-icon>
|
||||
<v-icon class="window-icon non-dragable" @click="actOnWindow('close')">close</v-icon>
|
||||
</div>
|
||||
</v-system-bar>
|
||||
|
||||
<v-toolbar fixed dark class="mablue tb">
|
||||
<v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="white--text title hidden-xs-only">かわニメ</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<info-modal></info-modal>
|
||||
<v-btn icon
|
||||
class="open-in-browser"
|
||||
v-tooltip:left="{ html: 'Open KawAnime in your browser' }"
|
||||
@click="openInBrowser()">
|
||||
<v-icon>open_in_new</v-icon>
|
||||
</v-btn>
|
||||
<settings></settings>
|
||||
</v-toolbar>
|
||||
|
||||
<main class="m">
|
||||
<transition name="page" mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</main>
|
||||
|
||||
<env v-if="$store.state.NODE_ENV"></env>
|
||||
<info-results v-show="$store.state.info.show"></info-results>
|
||||
|
||||
<!-- Used for displaying any info -->
|
||||
<v-snackbar
|
||||
:timeout="5000"
|
||||
:top="true"
|
||||
:bottom="false"
|
||||
:right="false"
|
||||
:left="false"
|
||||
v-model="$store.state.infoSnackbar.show"
|
||||
>
|
||||
{{ $store.state.infoSnackbar.text }}
|
||||
<v-btn flat class="pink--text" @click="$store.state.infoSnackbar.show = false">Close</v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<v-footer class="grey darken-4">
|
||||
<v-spacer></v-spacer>
|
||||
<div class="white--text">© 2016 - 2017 Kylart</div>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
<template lang="pug">
|
||||
v-app(dark, footer, toolbar)
|
||||
v-navigation-drawer.pb-0(style='width: 280px', temporary, v-model='$store.state.drawer')
|
||||
v-list
|
||||
v-list-tile#title(to='/')
|
||||
v-list-tile-action
|
||||
img(src='static/images/icon2.png', height='50')
|
||||
v-list-tile-title.title
|
||||
| かわニメ
|
||||
template(v-for='item in itemGroup')
|
||||
v-list-group(v-if='item.items', :key='item.title')
|
||||
v-list-tile.ripple(slot='item', ripple)
|
||||
v-list-tile-action
|
||||
v-icon {{ item.action }}
|
||||
v-list-tile-title {{ item.title }}
|
||||
v-list-tile-action
|
||||
v-icon keyboard_arrow_down
|
||||
v-list-tile.ripple(v-for='subItem in item.items', ripple, :to='subItem.href', :key='subItem.title')
|
||||
v-list-tile-action
|
||||
v-icon {{ subItem.action }}
|
||||
v-list-tile-content
|
||||
v-list-tile-title {{ subItem.title }}
|
||||
v-divider
|
||||
v-subheader.white--text(v-else-if='item.header') {{ item.header }}
|
||||
v-divider(v-else-if='item.divider')
|
||||
|
||||
v-system-bar.wb.dragable(dark, status, v-if='!browser')
|
||||
v-spacer
|
||||
div(v-if="$store.state.platform !== 'darwin'")
|
||||
v-icon.window-icon.non-dragable(@click="actOnWindow('minimize')") remove
|
||||
v-icon.window-icon.non-dragable(@click="actOnWindow('maximize')") check_box_outline_blank
|
||||
v-icon.window-icon.non-dragable(@click="actOnWindow('close')") close
|
||||
|
||||
v-toolbar.mablue.tb(fixed, dark)
|
||||
v-toolbar-side-icon(@click.stop='toggleDrawer()')
|
||||
v-toolbar-title.white--text.title.hidden-xs-only かわニメ
|
||||
v-spacer
|
||||
info-modal
|
||||
v-btn.open-in-browser(icon, v-tooltip:left="{ html: 'Open KawAnime in your browser' }", @click='openInBrowser()')
|
||||
v-icon open_in_new
|
||||
settings
|
||||
|
||||
main.m
|
||||
transition(name='page', mode='out-in')
|
||||
router-view
|
||||
|
||||
env(v-show='$store.state.NODE_ENV')
|
||||
|
||||
info-results(v-show='$store.state.info.show')
|
||||
|
||||
// Used for displaying any info
|
||||
v-snackbar(
|
||||
:timeout='5000',
|
||||
:top='true',
|
||||
:bottom='false',
|
||||
:right='false',
|
||||
:left='false',
|
||||
v-model='$store.state.infoSnackbar.show'
|
||||
) {{ $store.state.infoSnackbar.text }}
|
||||
v-btn.pink--text(flat, @click='$store.state.infoSnackbar.show = false') Close
|
||||
|
||||
v-footer.grey.darken-4
|
||||
v-spacer
|
||||
.white--text © 2016 - 2017 Kylart
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,26 @@
|
|||
<template>
|
||||
<v-dialog v-model="show"
|
||||
persistent
|
||||
width="650">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Add «{{ entry }}» to</v-card-title>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<template v-for="i in 5">
|
||||
<v-flex v-if="!options[i - 1].half" xs4>
|
||||
<v-checkbox v-model="selected"
|
||||
:value="options[i - 1].value"
|
||||
:label="options[i - 1].label"
|
||||
class="option primary--text">
|
||||
</v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex v-else xs6 class="checkbox-container">
|
||||
<v-checkbox v-model="selected"
|
||||
:value="options[i - 1].value"
|
||||
:label="options[i - 1].label"
|
||||
class="option primary--text">
|
||||
</v-checkbox>
|
||||
</v-flex>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1" flat @click="add()">Add</v-btn>
|
||||
<v-btn class="blue--text darken-1" flat @click="hide()">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<template lang="pug">
|
||||
v-dialog(v-model='show', persistent, width='650')
|
||||
v-card
|
||||
v-card-title.headline Add «{{ entry }}» to
|
||||
v-card-text
|
||||
v-layout(row, wrap)
|
||||
template(v-for='i in 5')
|
||||
v-flex(v-if='!options[i - 1].half', xs4)
|
||||
v-checkbox.option.primary--text(
|
||||
v-model='selected',
|
||||
:value='options[i - 1].value',
|
||||
:label='options[i - 1].label'
|
||||
)
|
||||
v-flex.checkbox-container(v-else, xs6)
|
||||
v-checkbox.option.primary--text(
|
||||
v-model='selected',
|
||||
:value='options[i - 1].value',
|
||||
:label='options[i - 1].label'
|
||||
)
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1(flat, @click='add()') Add
|
||||
v-btn.blue--text.darken-1(flat, @click='hide()') Close
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="pug">
|
||||
div.c
|
||||
.c
|
||||
div#container
|
||||
span.text.white--text Development mode
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,41 @@
|
|||
<template>
|
||||
<v-dialog lazy absolute width="75%"
|
||||
v-model="$store.state.historyModal">
|
||||
<v-btn secondary dark
|
||||
@click.mative="refresh()"
|
||||
slot="activator">History
|
||||
</v-btn>
|
||||
<v-card class="secondary">
|
||||
<v-card-title class="headline">History</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-expansion-panel expand class="secondary">
|
||||
<v-expansion-panel-content class="item-container"
|
||||
ripple
|
||||
v-for="item in Object.keys(history).reverse()"
|
||||
:key="item">
|
||||
<div slot="header"
|
||||
v-ripple="true"
|
||||
class="day">{{ item }}
|
||||
</div>
|
||||
<v-card>
|
||||
<v-card-text class="lighten-3 info-container">
|
||||
<v-layout row wrap>
|
||||
<template v-for="info in history[item]">
|
||||
<v-flex xs2 class="time entry"
|
||||
:class="isDelete(info.type)">
|
||||
{{ info.time }}
|
||||
</v-flex>
|
||||
<v-flex xs2 class="type entry" :class="isDelete(info.type)">
|
||||
{{ info.type }}
|
||||
</v-flex>
|
||||
<v-flex xs7
|
||||
class="ellipsis text entry"
|
||||
:class="isDelete(info.type)">
|
||||
{{ info.text }}
|
||||
</v-flex>
|
||||
<v-flex xs1
|
||||
class="entry"
|
||||
:class="isDelete(info.type)">
|
||||
<v-icon class="delete-entry"
|
||||
v-ripple="true"
|
||||
@click.stop="clearEntry(info, item)">
|
||||
clear
|
||||
</v-icon>
|
||||
</v-flex>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions style=" padding-right: 20px;">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1"
|
||||
flat
|
||||
style="width: 100px;"
|
||||
@click="$store.commit('setHistoryModal', false)">
|
||||
Close
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<template lang="pug">
|
||||
v-dialog(lazy, absolute, width='75%', v-model='$store.state.historyModal')
|
||||
v-btn(secondary, dark, @click.mative='refresh()', slot='activator')
|
||||
| History
|
||||
v-card.secondary
|
||||
v-card-title.headline History
|
||||
v-divider
|
||||
v-card-text
|
||||
v-layout(row, wrap)
|
||||
v-expansion-panel.secondary(expand)
|
||||
v-expansion-panel-content.item-container(
|
||||
ripple,
|
||||
v-for='item in Object.keys(history).reverse()',
|
||||
:key='item'
|
||||
)
|
||||
.day(slot='header', v-ripple='true')
|
||||
| {{ item }}
|
||||
v-card
|
||||
v-card-text.lighten-3.info-container
|
||||
v-layout(row, wrap)
|
||||
template(v-for='info in history[item]')
|
||||
v-flex.time.entry(xs2, :class='isDelete(info.type)')
|
||||
| {{ info.time }}
|
||||
v-flex.type.entry(xs2, :class='isDelete(info.type)')
|
||||
| {{ info.type }}
|
||||
v-flex.ellipsis.text.entry(xs7, :class='isDelete(info.type)')
|
||||
| {{ info.text }}
|
||||
v-flex.entry(xs1, :class='isDelete(info.type)')
|
||||
v-icon.delete-entry(v-ripple='true', @click.stop='clearEntry(info, item)')
|
||||
| clear
|
||||
v-divider
|
||||
v-card-actions(style=' padding-right: 20px;')
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1(
|
||||
flat,
|
||||
style='width: 100px;',
|
||||
@click="$store.commit('setHistoryModal', false)"
|
||||
) Close
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="searchShow" width="650" lazy absolute>
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>search</v-icon>
|
||||
</v-btn>
|
||||
<v-card class="pr-4">
|
||||
<v-card-title class="headline">Which anime are you looking for?</v-card-title>
|
||||
<v-card-text>
|
||||
<v-layout wrap justify-center>
|
||||
<v-flex xs6>
|
||||
<v-text-field
|
||||
name="search-name"
|
||||
label="Anime name"
|
||||
v-model="searchTerm"
|
||||
dark
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-layout row wrap justify-center>
|
||||
<template v-if="results.length"
|
||||
v-for="item in results">
|
||||
<v-flex xs3 class="elem"
|
||||
@click="search(item.name)">
|
||||
<v-layout wrap justify-center
|
||||
v-ripple="true"
|
||||
class="elem-content elevation-3"
|
||||
@click.all="search(item.name)">
|
||||
<v-flex xs8>
|
||||
<img :src="item.image_url" height="140" class="elem-picture">
|
||||
</v-flex>
|
||||
<v-flex xs10 class="elem-name">{{ item.name }}</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1 close-button" flat @click="searchShow = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
<template lang="pug">
|
||||
v-dialog(v-model='searchShow', width='650', lazy, absolute)
|
||||
v-btn(icon, slot='activator')
|
||||
v-icon search
|
||||
v-card.pr-4
|
||||
v-card-title.headline Which anime are you looking for?
|
||||
v-card-text
|
||||
v-layout(wrap, justify-center)
|
||||
v-flex(xs6)
|
||||
v-text-field(
|
||||
name='search-name',
|
||||
label='Anime name',
|
||||
v-model='searchTerm',
|
||||
dark
|
||||
)
|
||||
v-flex(xs12)
|
||||
v-layout(row, wrap, justify-center)
|
||||
template(v-if='results.length', v-for='item in results')
|
||||
v-flex.elem(xs3, @click='search(item.name)')
|
||||
v-layout.elem-content.elevation-3(
|
||||
wrap,
|
||||
justify-center,
|
||||
v-ripple='true',
|
||||
@click.all='search(item.name)'
|
||||
)
|
||||
v-flex(xs8)
|
||||
img.elem-picture(:src='item.image_url', height='140')
|
||||
v-flex.elem-name(xs10) {{ item.name }}
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1.close-button(flat, @click='searchShow = false') Close
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,34 @@
|
|||
<template>
|
||||
<v-dialog width="800" v-model="$store.state.info.show" persistent lazy absolute>
|
||||
<v-card class="secondary">
|
||||
<v-card-title class="headline">Result for «{{ searchTerm }}»</v-card-title>
|
||||
<v-card-text>
|
||||
<h4 v-if="error">{{ error }}</h4>
|
||||
<div v-else-if="loading">
|
||||
<h5 class="loading-text white--text">Gathering data...</h5>
|
||||
<h5 class="loading-text white--text">Info should be displayed in a few seconds</h5>
|
||||
</div>
|
||||
<v-card v-else class="secondary">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs9>
|
||||
<v-card-title class="info-title">
|
||||
{{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{info.type }}]
|
||||
</v-card-title>
|
||||
</v-flex>
|
||||
<v-flex xs3>
|
||||
<v-card-title>{{ info.statistics.score.value }} ({{ info.statistics.score.count }})</v-card-title>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs3 class="info-pic-container">
|
||||
<img :src="info.image" class="info-pic"/>
|
||||
</v-flex>
|
||||
<v-flex xs9 class="info-synopsis-container">
|
||||
<p class="info-synopsis">{{ info.synopsis }}</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="top-info">
|
||||
<v-flex xs9 class="info-text">{{ info.genres.join(', ') }}</v-flex>
|
||||
<v-flex xs3 class="info-text">{{ info.episodes }} {{ episodeLabel }}</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="bottom-info">
|
||||
<v-flex xs5 class="info-text">{{ info.studios.join(', ') }}</v-flex>
|
||||
<v-flex xs4 class="info-text">{{ info.classification }}</v-flex>
|
||||
<v-flex xs3 class="info-text">{{ info.status }} ({{ info.aired.split(' ')[2] }})</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1 close-button" flat @click="$store.commit('showInfo', false)">Thanks!</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<template lang="pug">
|
||||
v-dialog(width='800', v-model='$store.state.info.show', persistent, lazy, absolute)
|
||||
v-card.secondary
|
||||
v-card-title.headline Result for «{{ searchTerm }}»
|
||||
v-card-text
|
||||
h4(v-if='error') {{ error }}
|
||||
div(v-else-if='loading')
|
||||
h5.loading-text.white--text Gathering data...
|
||||
h5.loading-text.white--text Info should be displayed in a few seconds
|
||||
v-card.secondary(v-else)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs9)
|
||||
v-card-title.info-title
|
||||
| {{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{info.type }}]
|
||||
v-flex(xs3)
|
||||
v-card-title {{ info.statistics.score.value }} ({{ info.statistics.score.count }})
|
||||
v-layout(row, wrap)
|
||||
v-flex.info-pic-container(xs3)
|
||||
img.info-pic(:src='info.image')
|
||||
v-flex.info-synopsis-container(xs9)
|
||||
p.info-synopsis {{ info.synopsis }}
|
||||
v-layout.top-info
|
||||
v-flex.info-text(xs9) {{ info.genres.join(', ') }}
|
||||
v-flex.info-text(xs3) {{ info.episodes }} {{ episodeLabel }}
|
||||
v-layout.bottom-info
|
||||
v-flex.info-text(xs5) {{ info.studios.join(', ') }}
|
||||
v-flex.info-text(xs4) {{ info.classification }}
|
||||
v-flex.info-text(xs3) {{ info.status }} ({{ info.aired.split(' ')[2] }})
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1.close-button(flat, @click="$store.commit('showInfo', false)") Thanks!
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,91 @@
|
|||
<template>
|
||||
<v-dialog v-model="configModal"
|
||||
fullscreen
|
||||
transition="config"
|
||||
:overlay=false>
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-card class="white--text main">
|
||||
<v-toolbar dark class="mablue">
|
||||
<v-btn icon @click="configModal = false" dark>
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title class="headline">Settings</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<v-btn dark flat
|
||||
v-on:click.native="save()">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
|
||||
<v-navigation-drawer class="pb-0 drawer"
|
||||
v-model="drawer">
|
||||
<v-list>
|
||||
<template v-for="item in itemGroup">
|
||||
<v-list-group v-if="item.items"
|
||||
:key="item.title">
|
||||
<v-list-tile slot="item" class="ripple" ripple>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ item.action }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
{{ item.title }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-action>
|
||||
<v-icon>
|
||||
keyboard_arrow_down
|
||||
</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-for="subItem in item.items"
|
||||
class="ripple"
|
||||
ripple
|
||||
:to="subItem.href"
|
||||
:key="subItem.title">
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ subItem.action }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider></v-divider>
|
||||
</v-list-group>
|
||||
<v-subheader v-else-if="item.header">{{ item.header }}</v-subheader>
|
||||
<v-divider v-else-if="item.divider"></v-divider>
|
||||
<v-list-tile v-else ripple style="position: relative">
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ item.action }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
{{ item.title }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-container fluid class="container">
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs11>
|
||||
<v-card>
|
||||
<v-card-title class="headline" id="download">
|
||||
Download
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs6 class="section-title">Preferred fansub</v-flex>
|
||||
<v-flex xs6 class="section-title">Quality</v-flex>
|
||||
<v-flex offset-xs1 xs4>
|
||||
<v-select
|
||||
v-bind:items="fansubChoices"
|
||||
v-model="config.fansub"
|
||||
hint="The fansub you want to check first!"
|
||||
persistent-hint
|
||||
dark
|
||||
item-value="text"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs1></v-flex>
|
||||
<template v-for="radio in radios">
|
||||
<v-flex xs2>
|
||||
<v-radio :label="radio" :value="radio" class="primary--text" v-model="config.quality"></v-radio>
|
||||
</v-flex>
|
||||
</template>
|
||||
<v-flex offset-xs1 xs3 class="section-title">Magnets</v-flex>
|
||||
<v-flex xs8>
|
||||
<v-switch label="Activate" color="primary" v-model="config.magnets" dark></v-switch>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-card class="section">
|
||||
<v-card-title class="headline" id="local">Local</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs4 class="section-title">Preferred local path</v-flex>
|
||||
<v-flex xs6 class="local-path">{{ config.localPath }}</v-flex>
|
||||
<v-flex xs2>
|
||||
<v-btn accent @click="$store.dispatch('changePathWithConfig')">Choose</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="section-title">News</v-flex>
|
||||
<v-flex xs9>
|
||||
<v-switch :label="config.inside ? 'Inside' : 'Outside'"
|
||||
color="primary"
|
||||
v-model="config.inside" dark>
|
||||
</v-switch>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<template lang="pug">
|
||||
v-dialog(v-model='configModal', fullscreen, transition='config', :overlay='false')
|
||||
v-btn(icon, slot='activator')
|
||||
v-icon settings
|
||||
v-card.white--text.main
|
||||
v-toolbar.mablue(dark)
|
||||
v-btn(icon, @click='configModal = false', dark)
|
||||
v-icon close
|
||||
v-toolbar-title.headline Settings
|
||||
v-spacer
|
||||
v-toolbar-items
|
||||
v-btn(dark, flat, v-on:click.native='save()')
|
||||
| Save
|
||||
v-navigation-drawer.pb-0.drawer(v-model='drawer')
|
||||
v-list
|
||||
template(v-for='item in itemGroup')
|
||||
v-list-group(v-if='item.items', :key='item.title')
|
||||
v-list-tile.ripple(slot='item', ripple)
|
||||
v-list-tile-action
|
||||
v-icon {{ item.action }}
|
||||
v-list-tile-title
|
||||
| {{ item.title }}
|
||||
v-list-tile-action
|
||||
v-icon
|
||||
| keyboard_arrow_down
|
||||
v-list-tile.ripple(
|
||||
v-for='subItem in item.items',
|
||||
ripple, :to='subItem.href',
|
||||
:key='subItem.title'
|
||||
)
|
||||
v-list-tile-action
|
||||
v-icon {{ subItem.action }}
|
||||
v-list-tile-content
|
||||
v-list-tile-title {{ subItem.title }}
|
||||
v-divider
|
||||
v-subheader(v-else-if='item.header') {{ item.header }}
|
||||
v-divider(v-else-if='item.divider')
|
||||
v-list-tile(v-else, ripple, style='position: relative')
|
||||
v-list-tile-action
|
||||
v-icon {{ item.action }}
|
||||
v-list-tile-title
|
||||
| {{ item.title }}
|
||||
v-container.container(fluid)
|
||||
v-layout(row, wrap, justify-center)
|
||||
v-flex(xs11)
|
||||
v-card
|
||||
v-card-title#download.headline
|
||||
| Download
|
||||
v-divider
|
||||
v-layout(row, wrap, justify-center)
|
||||
v-flex.section-title(xs6) Preferred fansub
|
||||
v-flex.section-title(xs6) Quality
|
||||
v-flex(offset-xs1, xs4)
|
||||
v-select(
|
||||
v-bind:items='fansubChoices',
|
||||
v-model='config.fansub',
|
||||
hint='The fansub you want to check first!',
|
||||
persistent-hint,
|
||||
dark,
|
||||
item-value='text'
|
||||
)
|
||||
v-flex(xs1)
|
||||
template(v-for='radio in radios')
|
||||
v-flex(xs2)
|
||||
v-radio.primary--text(
|
||||
:label='radio',
|
||||
:value='radio',
|
||||
v-model='config.quality'
|
||||
)
|
||||
v-flex.section-title(offset-xs1, xs3) Magnets
|
||||
v-flex(xs8)
|
||||
v-switch(label='Activate', color='primary', v-model='config.magnets', dark)
|
||||
v-card.section
|
||||
v-card-title#local.headline Local
|
||||
v-divider
|
||||
v-layout(row, wrap, justify-center)
|
||||
v-flex.section-title(xs4) Preferred local path
|
||||
v-flex.local-path(xs6) {{ config.localPath }}
|
||||
v-flex(xs2)
|
||||
v-btn(accent, @click="$store.dispatch('changePathWithConfig')") Choose
|
||||
v-flex.section-title(xs3) News
|
||||
v-flex(xs9)
|
||||
v-switch(
|
||||
:label="config.inside ? 'Inside' : 'Outside'",
|
||||
color='primary',
|
||||
v-model='config.inside',
|
||||
dark
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"test": "standard --fix && npm test:front && npm test:server",
|
||||
"coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
|
||||
"lint": "standard --fix --verbose --plugin vue '**/*.{js,vue}' | snazzy",
|
||||
"pack": "build --dir",
|
||||
"dist:linux": "build --linux deb AppImage",
|
||||
"dist:win": "build --win nsis --ia32 x64 appx zip squirrel",
|
||||
"dist:mac": "build --mac dmg zip",
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
"vue-loader": "^13.0.4",
|
||||
"vue-router": "^2.7.0",
|
||||
"vue-server-renderer": "^2.4.2",
|
||||
"vuetify": "^0.14.9",
|
||||
"vuetify": "^0.14.11",
|
||||
"vuex": "^2.3.1",
|
||||
"vuex-router-sync": "^4.1.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,147 +1,105 @@
|
|||
<template>
|
||||
<v-container fluid class="container" id="downloader">
|
||||
<div class="cute-char left-pic"></div>
|
||||
<div class="cute-char right-pic"></div>
|
||||
|
||||
<div class="form-container">
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs2 sm7 md9>
|
||||
<!-- Dummy cell -->
|
||||
</v-flex>
|
||||
<v-flex xs10 sm5 md3>
|
||||
<div class="choose-magnets">
|
||||
<v-card class="z-depth-0">
|
||||
<v-card-text class="switch">
|
||||
<v-switch id="magnets-switch"
|
||||
label="Get Magnets"
|
||||
color="primary"
|
||||
v-model="$store.state.config.magnets"
|
||||
dark/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs4
|
||||
@keydown.enter="next(1)">
|
||||
<v-text-field name="name-input"
|
||||
type="text"
|
||||
id="name-input"
|
||||
label="Name of the anime"
|
||||
v-model="$store.state.downloaderForm.name"
|
||||
autofocus dark>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs4
|
||||
@keydown.enter="next(2)"
|
||||
@keydown.delete="previous(2)">
|
||||
<v-text-field name="from-ep-input"
|
||||
type="number" min="0"
|
||||
label="From episode..."
|
||||
v-model="$store.state.downloaderForm.fromEp"
|
||||
dark>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs4
|
||||
@keydown.enter="next(3)"
|
||||
@keydown.delete="previous(3)">
|
||||
<v-text-field name="until-ep-input"
|
||||
type="number"
|
||||
label="Until episode.."
|
||||
v-model="$store.state.downloaderForm.untilEp"
|
||||
dark>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4></v-flex>
|
||||
<v-flex xs12 sm6 md4 class="radio-container">
|
||||
<v-radio class="radio primary--text"
|
||||
label="480p"
|
||||
v-model="quality"
|
||||
value="480p" dark/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md4>
|
||||
<v-radio class="radio primary--text"
|
||||
label="720p"
|
||||
v-model="quality"
|
||||
value="720p" dark/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md4>
|
||||
<v-radio class="radio primary--text"
|
||||
label="1080p"
|
||||
v-model="quality"
|
||||
value="1080p" dark/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
<div class="download-button-container">
|
||||
<div class="download-button">
|
||||
<v-btn dark block secondary
|
||||
id="download-btn"
|
||||
@click="isDownloadable()"
|
||||
v-if="!$store.state.downloaderForm.loading">
|
||||
Download!
|
||||
</v-btn>
|
||||
<v-btn dark block secondary loading v-else></v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-dialog v-model="$store.state.downloaderModal.show"
|
||||
lazy absolute
|
||||
width="800"
|
||||
class="magnet-modal">
|
||||
<v-card class="secondary white--text">
|
||||
<v-card-text class="white--text">
|
||||
<h2 class="title white--text">Magnets for <strong>{{ $store.state.downloaderModal.title }}</strong></h2>
|
||||
</v-card-text>
|
||||
<v-divider/>
|
||||
<v-card-text class="subheading white--text">
|
||||
<v-layout row wrap justify-center align-center>
|
||||
<v-flex xs4 offset-xs6 class="modal-icon-container">
|
||||
<v-btn flat icon
|
||||
v-if="links"
|
||||
v-clipboard="links.join('\n')"
|
||||
@success="copiedSnackbar = true">
|
||||
<v-icon class="copy-icon">content_copy</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</v-flex>
|
||||
<v-flex xs12 v-for="link in $store.state.downloaderModal.text"
|
||||
class="subheading grey--text modal-text" :key="link">{{ link.split('&')[0] }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat
|
||||
class="blue--text darken-1"
|
||||
v-on:click.native="$store.state.downloaderModal.show = false">
|
||||
Thanks!
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-snackbar :timeout="timeout"
|
||||
:top="y === 'top'"
|
||||
:bottom="y === 'bottom'"
|
||||
:right="x === 'right'"
|
||||
:left="x === 'left'"
|
||||
v-model="snackbar">
|
||||
Please, enter a valid name (at least 3 letters...)
|
||||
<v-btn flat class="pink--text" @click="snackbar = false">ok!</v-btn>
|
||||
</v-snackbar>
|
||||
<v-snackbar :timeout="copiedTimeout"
|
||||
:top="y === 'top'"
|
||||
:bottom="y === 'bottom'"
|
||||
:right="x === 'right'"
|
||||
:left="x === 'left'"
|
||||
v-model="copiedSnackbar">
|
||||
All magnets were copied to clipboard!
|
||||
<v-btn flat class="pink--text" @click="copiedSnackbar = false">Thanks!</v-btn>
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
<template lang="pug">
|
||||
v-container#downloader.container(fluid)
|
||||
.cute-char.left-pic
|
||||
.cute-char.right-pic
|
||||
.form-container
|
||||
v-layout(row, wrap, justify-center)
|
||||
v-flex(xs2, sm7, md9)
|
||||
// Dummy cell
|
||||
v-flex(xs10, sm5, md3)
|
||||
.choose-magnets
|
||||
v-card.z-depth-0
|
||||
v-card-text.switch
|
||||
v-switch#magnets-switch(
|
||||
label='Get Magnets',
|
||||
color='primary',
|
||||
v-model='$store.state.config.magnets',
|
||||
dark
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-flex(xs4, @keydown.enter='next(1)')
|
||||
v-text-field#name-input(
|
||||
name='name-input',
|
||||
type='text',
|
||||
label='Name of the anime',
|
||||
v-model='$store.state.downloaderForm.name',
|
||||
autofocus,
|
||||
dark
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-flex(xs4)
|
||||
v-flex(xs4, @keydown.enter='next(2)', @keydown.delete='previous(2)')
|
||||
v-text-field(
|
||||
name='from-ep-input',
|
||||
type='number',
|
||||
min='0',
|
||||
label='From episode...',
|
||||
v-model='$store.state.downloaderForm.fromEp',
|
||||
dark
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-flex(xs4)
|
||||
v-flex(xs4, @keydown.enter='next(3)', @keydown.delete='previous(3)')
|
||||
v-text-field(
|
||||
name='until-ep-input',
|
||||
type='number',
|
||||
label='Until episode..',
|
||||
v-model='$store.state.downloaderForm.untilEp',
|
||||
dark
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-flex.radio-container(xs12, sm6, md4)
|
||||
v-radio.radio.primary--text(label='480p', v-model='quality', value='480p', dark)
|
||||
v-flex(xs12, sm6, md4)
|
||||
v-radio.radio.primary--text(label='720p', v-model='quality', value='720p', dark)
|
||||
v-flex(xs12, sm6, md4)
|
||||
v-radio.radio.primary--text(label='1080p', v-model='quality', value='1080p', dark)
|
||||
.download-button-container
|
||||
.download-button
|
||||
v-btn#download-btn(
|
||||
dark, block, secondary,
|
||||
@click='isDownloadable()',
|
||||
v-if='!$store.state.downloaderForm.loading'
|
||||
) Download!
|
||||
v-btn(dark, block, secondary, loading, v-else)
|
||||
v-dialog.magnet-modal(v-model='$store.state.downloaderModal.show', lazy, absolute, width='800')
|
||||
v-card.secondary.white--text
|
||||
v-card-text.white--text
|
||||
h2.title.white--text
|
||||
| Magnets for #[strong {{ $store.state.downloaderModal.title }}]
|
||||
v-divider
|
||||
v-card-text.subheading.white--text
|
||||
v-layout(row, wrap, justify-center, align-center)
|
||||
v-flex.modal-icon-container(xs4, offset-xs6)
|
||||
v-btn(flat, icon, v-if='links', v-clipboard="links.join('')", @success='copiedSnackbar = true')
|
||||
v-icon.copy-icon content_copy
|
||||
v-flex.subheading.grey--text.modal-text(
|
||||
xs12,
|
||||
v-for='link in $store.state.downloaderModal.text',
|
||||
:key='link'
|
||||
) {{ link.split('&')[0] }}
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1(flat, v-on:click.native='$store.state.downloaderModal.show = false')
|
||||
| Thanks!
|
||||
v-snackbar(
|
||||
:timeout='timeout',
|
||||
:top="y === 'top'",
|
||||
:bottom="y === 'bottom'",
|
||||
:right="x === 'right'",
|
||||
:left="x === 'left'",
|
||||
v-model='snackbar'
|
||||
) Please, enter a valid name (at least 3 letters...)
|
||||
v-btn.pink--text(flat, @click='snackbar = false') ok!
|
||||
v-snackbar(
|
||||
:timeout='copiedTimeout',
|
||||
:top="y === 'top'",
|
||||
:bottom="y === 'bottom'",
|
||||
:right="x === 'right'",
|
||||
:left="x === 'left'",
|
||||
v-model='copiedSnackbar'
|
||||
) All magnets were copied to clipboard!
|
||||
v-btn.pink--text(flat, @click='copiedSnackbar = false') Thanks!
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
226
pages/index.vue
226
pages/index.vue
|
|
@ -1,158 +1,90 @@
|
|||
<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
||||
<v-container id="container" fluid class="container pa-0">
|
||||
<transition name="fade" v-if="releases.length">
|
||||
<v-layout row wrap justify-center style="margin: 0 1% 0 1%;">
|
||||
<v-flex md4 sm4 xs8 class="time-container">
|
||||
<span class="update-time">Updated {{ lastUpdateTime }}.</span>
|
||||
</v-flex>
|
||||
<v-flex md4 sm1 hidden-xs-only></v-flex>
|
||||
<v-flex md2 sm3 xs10>
|
||||
<v-select
|
||||
class="select"
|
||||
:items="fansubList"
|
||||
v-model="$store.state.releaseFansub"
|
||||
label="Fansub"
|
||||
dark
|
||||
single-line
|
||||
hint="Pick a fansub"
|
||||
<template lang="pug" xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
||||
v-container#container.container.pa-0(fluid)
|
||||
transition(name='fade', v-if='releases.length')
|
||||
v-layout(row, wrap, justify-center, style='margin: 0 1% 0 1%;')
|
||||
v-flex.time-container(md4, sm4, xs8)
|
||||
span.update-time Updated {{ lastUpdateTime }}.
|
||||
v-flex(md4, sm1, hidden-xs-only)
|
||||
v-flex(md2, sm3, xs10)
|
||||
v-select.select(
|
||||
:items='fansubList',
|
||||
v-model='$store.state.releaseFansub',
|
||||
label='Fansub',
|
||||
dark, single-line,
|
||||
hint='Pick a fansub',
|
||||
persistent-hint
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex md1 sm2 xs10>
|
||||
<v-select
|
||||
class="select"
|
||||
:items="qualityList"
|
||||
v-model="$store.state.releaseQuality"
|
||||
label="Quality"
|
||||
dark
|
||||
single-line
|
||||
hint="Which quality ?"
|
||||
)
|
||||
v-flex(md1, sm2, xs10)
|
||||
v-select.select(
|
||||
:items='qualityList',
|
||||
v-model='$store.state.releaseQuality',
|
||||
label='Quality',
|
||||
dark,
|
||||
single-line,
|
||||
hint='Which quality ?',
|
||||
persistent-hint
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex md1 sm1 xs12 class="refresh-button-container">
|
||||
<v-btn icon
|
||||
class="refresh-button"
|
||||
@click="refresh()">
|
||||
<v-icon large>refresh</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<template v-for="item in releases">
|
||||
<v-flex xs12 sm6 md4
|
||||
:key="item.name"
|
||||
class="elem">
|
||||
<v-card class="elem-content elevation-3" v-ripple="true">
|
||||
<v-card-text class="elem-card">
|
||||
<v-container fluid style="padding: 0;">
|
||||
<v-layout row wrap>
|
||||
<v-flex class="elem-title" xs9 v-tooltip:top="{ html: item.rawName }">
|
||||
<h6 class="white--text">{{ item.rawName }}</h6>
|
||||
</v-flex>
|
||||
<v-flex v-tooltip:top="{ html: 'Episode ' + item.ep }"
|
||||
class="elem-ep text-xs-right" xs3>
|
||||
<h6 class="white--text">Ep {{ item.ep }}</h6>
|
||||
</v-flex>
|
||||
<v-flex class="elem-image"
|
||||
xl6 lg4 md5 xs4>
|
||||
<img :src="item.picture" onerror="this.src='static/images/error.jpg'" height="200" class="picture"/>
|
||||
</v-flex>
|
||||
<v-flex xl6 lg8 md7 xs8>
|
||||
<div class="elem-text-links">
|
||||
<div class="synopsis">
|
||||
{{ item.synopsis }}
|
||||
</div>
|
||||
<div class="links">
|
||||
<a :href="item.magnetLink" class="download-button">
|
||||
<v-btn dark flat
|
||||
@click="print(item)"
|
||||
class="btn--light-flat-pressed">
|
||||
Download
|
||||
</v-btn>
|
||||
</a>
|
||||
<!-- Add open-on-hover when vuetify repaired it -->
|
||||
<v-menu transition="slide-x-transition">
|
||||
<v-btn flat dark slot="activator">
|
||||
More
|
||||
</v-btn>
|
||||
<v-list class="dark">
|
||||
<v-list-tile @click="openModal(item.rawName, item.fullSynopsis)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>more</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Check synopsis
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="downloadAll(item.rawName)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>file_download</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Download all episodes
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="searchThis(item.rawName)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>info_outline</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>Information</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showChoices(item.rawName)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>add_box</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Add to
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</template>
|
||||
</v-layout>
|
||||
</transition>
|
||||
<loader v-else></loader>
|
||||
<div class="text-xs-center modal-container">
|
||||
<v-dialog v-model="modal" width="70%">
|
||||
<v-card class="white--text">
|
||||
<v-card-text class="white--text">
|
||||
<h2 class="white--text headline">{{ modalTitle }}</h2>
|
||||
</v-card-text>
|
||||
<v-card-text class="subheading white--text">
|
||||
{{ modalText }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1" flat
|
||||
v-on:click.native="modal = false">Thanks!
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
<choice-window :entry="choiceTitle"></choice-window>
|
||||
</v-container>
|
||||
)
|
||||
v-flex.refresh-button-container(md1, sm1, xs12)
|
||||
v-btn.refresh-button(icon, @click='refresh()')
|
||||
v-icon(large) refresh
|
||||
template(v-for='item in releases')
|
||||
v-flex.elem(xs12, sm6, md4, :key='item.name')
|
||||
v-card.elem-content.elevation-3(v-ripple='true')
|
||||
v-card-text.elem-card
|
||||
v-container(fluid, style='padding: 0;')
|
||||
v-layout(row, wrap)
|
||||
v-flex.elem-title(xs9, v-tooltip:top='{ html: item.rawName }')
|
||||
h6.white--text {{ item.rawName }}
|
||||
v-flex.elem-ep.text-xs-right(v-tooltip:top="{ html: 'Episode ' + item.ep }", xs3)
|
||||
h6.white--text Ep {{ item.ep }}
|
||||
v-flex.elem-image(xl6, lg4, md5, xs4)
|
||||
img.picture(
|
||||
:src='item.picture',
|
||||
onerror="this.src='static/images/error.jpg'",
|
||||
height='200'
|
||||
)
|
||||
v-flex(xl6, lg8, md7, xs8)
|
||||
.elem-text-links
|
||||
.synopsis {{ item.synopsis }}
|
||||
.links
|
||||
a.download-button(:href='item.magnetLink')
|
||||
v-btn.btn--light-flat-pressed(dark, flat, @click='print(item)') Download
|
||||
v-menu(open-on-hover, transition='slide-x-transition')
|
||||
v-btn(flat, dark, slot='activator') More
|
||||
v-list.dark
|
||||
v-list-tile(@click='openModal(item.rawName, item.fullSynopsis)')
|
||||
v-list-tile-action
|
||||
v-icon more
|
||||
v-list-tile-title Check synopsis
|
||||
v-list-tile(@click='downloadAll(item.rawName)')
|
||||
v-list-tile-action
|
||||
v-icon file_download
|
||||
v-list-tile-title Download all episodes
|
||||
v-list-tile(@click='searchThis(item.rawName)')
|
||||
v-list-tile-action
|
||||
v-icon info_outline
|
||||
v-list-tile-title Information
|
||||
v-list-tile(@click='showChoices(item.rawName)')
|
||||
v-list-tile-action
|
||||
v-icon add_box
|
||||
v-list-tile-title Add to
|
||||
loader(v-else)
|
||||
.text-xs-center.modal-container
|
||||
v-dialog(v-model='modal', width='70%')
|
||||
v-card.white--text
|
||||
v-card-text.white--text
|
||||
h2.white--text.headline {{ modalTitle }}
|
||||
v-card-text.subheading.white--text {{ modalText }}
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1(flat, v-on:click.native='modal = false') Thanks!
|
||||
choice-window(:entry='choiceTitle')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
head () {
|
||||
return {
|
||||
title: 'Releases',
|
||||
meta: [
|
||||
{hid: 'description', name: 'description', content: 'Latest downloadable anime releases'}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.releases.length) {
|
||||
this.updateTime(this.$store)
|
||||
|
|
|
|||
|
|
@ -1,171 +1,97 @@
|
|||
<template>
|
||||
<v-container fluid class="pa-0">
|
||||
<div v-if="files.length">
|
||||
<v-layout row wrap style="margin: 0 1%;">
|
||||
<v-flex xs12 class="menubar">
|
||||
<v-layout row wrap>
|
||||
<v-flex hidden-sm-and-up xs2></v-flex>
|
||||
<v-flex xs4 sm3 md2 class="menu-eps">
|
||||
<p class="menu-eps-text">{{ nbEps }} {{ episodeLabel }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs4 sm2 md2>
|
||||
<history-modal></history-modal>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm7 offset-md3 md5 offset-lg4 lg4 offset-xl5 xl3 class="menu-buttons">
|
||||
<v-btn icon
|
||||
class="refresh-button"
|
||||
v-if="!this.$store.state.refreshingLocal"
|
||||
@click="refresh()">
|
||||
<v-icon large>refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else icon loading
|
||||
class="refresh-button">
|
||||
</v-btn>
|
||||
<v-btn flat dark
|
||||
@click="changePath()"
|
||||
class="change-dir-button">
|
||||
Change dir
|
||||
</v-btn>
|
||||
<v-btn secondary dark
|
||||
@click="resetLocal()"
|
||||
v-if="!this.$store.state.resettingLocal"
|
||||
class="reset-cache-button">
|
||||
Refresh local info
|
||||
</v-btn>
|
||||
<v-btn secondary dark loading v-else class="reset-cache-button"></v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<transition-group name="list">
|
||||
<template v-for="item in files">
|
||||
<v-flex :key="item.path" xs12 sm6 md4 xl3
|
||||
class="elem">
|
||||
<v-card class="elem-content elevation-3" v-ripple="true">
|
||||
<v-card-text class="elem-card">
|
||||
<v-container fluid style="padding: 0;">
|
||||
<v-layout row wrap class="elem-container">
|
||||
<v-flex xs7
|
||||
v-tooltip:top="{ html: item.name }">
|
||||
<h6 class="elem-title ellipsis white--text">{{ item.name }}</h6>
|
||||
</v-flex>
|
||||
<v-flex xs2
|
||||
v-tooltip:top="{ html: 'Episode ' + item.ep }"
|
||||
class="elem-ep text-xs-right">
|
||||
<p class="ellipsis ep">{{ item.ep }} / {{ item.numberOfEpisode }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="buttons-container">
|
||||
<v-btn large icon
|
||||
class="play-button"
|
||||
@click="playThis(item)">
|
||||
<v-icon large>play_circle_outline</v-icon>
|
||||
</v-btn>
|
||||
<!-- Add open-on-hover when vuetify repaired it -->
|
||||
<v-menu transition="slide-x-transition">
|
||||
<v-btn icon medium slot="activator">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list class="dark">
|
||||
<v-list-tile @click="showChoices(item.name)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>add_box</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Add to
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="delThis(item)">
|
||||
<v-list-tile-action>
|
||||
<v-icon medium class="primary--text">delete_forever</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="primary--text">Delete</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
<v-flex xs8
|
||||
v-tooltip:top="{ html: item.genres.length ? item.genres.join(', ') : 'No specified genre' }">
|
||||
<p class="ellipsis genres">
|
||||
{{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xs4 v-tooltip:top="{ html: item.classification.replace('None', 'No restriction') }">
|
||||
<p class="ellipsis classification">
|
||||
{{ item.classification.replace('None', 'No restriction') }}
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xl5 lg4 md5 xs4 class="picture-container">
|
||||
<lazy-component>
|
||||
<img :src="item.picture" onerror="this.src='static/images/error.jpg'" class="picture">
|
||||
</lazy-component>
|
||||
</v-flex>
|
||||
<v-flex xl7 lg8 md7 xs8 class="bottom-right-container">
|
||||
<v-layout row wrap justify-space-between>
|
||||
<v-flex xs12>
|
||||
<div class="synopsis">{{ reduced(item.synopsis) }}</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="display: flex">
|
||||
<v-layout align-center justify-space-between style="min-width: 100%">
|
||||
<v-flex xs2>
|
||||
<p class="year">{{ item.year }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs7>
|
||||
<p class="status">{{ item.status }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3><p class="mark">{{ item.mark }}</p></v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</template>
|
||||
</transition-group>
|
||||
</v-layout>
|
||||
</div>
|
||||
<v-container fluid v-else>
|
||||
<transition name="fade">
|
||||
<img v-if="emptyBg" class="empty-bg" height="400" src="~static/images/empty-bg.png"/>
|
||||
</transition>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 class="menubar">
|
||||
<v-layout row wrap>
|
||||
<v-flex offset-xs2 xs2>
|
||||
<history-modal></history-modal>
|
||||
</v-flex>
|
||||
<v-flex xs5></v-flex>
|
||||
<v-flex xs3 class="menu-buttons">
|
||||
<v-btn icon
|
||||
class="refresh-button"
|
||||
v-if="!this.$store.state.refreshingLocal"
|
||||
@click="refresh()">
|
||||
<v-icon large>refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else icon loading
|
||||
class="refresh-button">
|
||||
</v-btn>
|
||||
<v-btn flat dark
|
||||
@click="changePath()"
|
||||
class="change-dir-button">
|
||||
Change dir
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="empty-message">
|
||||
<h3 class="white--text">Wow such empty!</h3>
|
||||
<h4 class="white--text">Start downloading anime
|
||||
<router-link to="/downloader" class="green--text">here</router-link>
|
||||
or
|
||||
<router-link to="/" class="cyan--text">here!</router-link>
|
||||
</h4>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<choice-window :entry="choiceTitle"></choice-window>
|
||||
</v-container>
|
||||
<template lang="pug">
|
||||
v-container.pa-0(fluid)
|
||||
div(v-if='files.length')
|
||||
v-layout(row, wrap, style='margin: 0 1%;')
|
||||
v-flex.menubar(xs12)
|
||||
v-layout(row, wrap)
|
||||
v-flex(hidden-sm-and-up, xs2)
|
||||
v-flex.menu-eps(xs4, sm3, md2)
|
||||
p.menu-eps-text {{ nbEps }} {{ episodeLabel }}
|
||||
v-flex(xs4, sm2, md2)
|
||||
history-modal
|
||||
v-flex.menu-buttons(xs12, sm7, offset-md3, md5, offset-lg4, lg4, offset-xl5, xl3)
|
||||
v-btn.refresh-button(icon, v-if='!this.$store.state.refreshingLocal', @click='refresh()')
|
||||
v-icon(large) refresh
|
||||
v-btn.refresh-button(v-else, icon, loading)
|
||||
v-btn.change-dir-button(flat, dark, @click='changePath()')
|
||||
| Change dir
|
||||
v-btn.reset-cache-button(secondary, dark, @click='resetLocal()', v-if='!this.$store.state.resettingLocal')
|
||||
| Refresh local info
|
||||
v-btn.reset-cache-button(secondary, dark, loading, v-else)
|
||||
transition-group(name='list')
|
||||
template(v-for='item in files')
|
||||
v-flex.elem(:key='item.path', xs12, sm6, md4, xl3)
|
||||
v-card.elem-content.elevation-3(v-ripple='true')
|
||||
v-card-text.elem-card
|
||||
v-container(fluid, style='padding: 0;')
|
||||
v-layout.elem-container(row, wrap)
|
||||
v-flex(xs7, v-tooltip:top='{ html: item.name }')
|
||||
h6.elem-title.ellipsis.white--text {{ item.name }}
|
||||
v-flex.elem-ep.text-xs-right(xs2, v-tooltip:top="{ html: 'Episode ' + item.ep }")
|
||||
p.ellipsis.ep {{ item.ep }} / {{ item.numberOfEpisode }}
|
||||
v-flex.buttons-container(xs3)
|
||||
v-btn.play-button(large, icon, @click='playThis(item)')
|
||||
v-icon(large) play_circle_outline
|
||||
v-menu(open-on-hover, transition='slide-x-transition')
|
||||
v-btn(icon, medium, slot='activator')
|
||||
v-icon more_vert
|
||||
v-list.dark
|
||||
v-list-tile(@click='showChoices(item.name)')
|
||||
v-list-tile-action
|
||||
v-icon add_box
|
||||
v-list-tile-title
|
||||
| Add to
|
||||
v-list-tile(@click='delThis(item)')
|
||||
v-list-tile-action
|
||||
v-icon.primary--text(medium) delete_forever
|
||||
v-list-tile-title.primary--text Delete
|
||||
v-flex(
|
||||
xs8,
|
||||
v-tooltip:top="{ html: item.genres.length ? item.genres.join(', ') : 'No specified genre' }"
|
||||
)
|
||||
p.ellipsis.genres
|
||||
| {{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
|
||||
v-flex(xs4, v-tooltip:top="{ html: item.classification.replace('None', 'No restriction') }")
|
||||
p.ellipsis.classification
|
||||
| {{ item.classification.replace('None', 'No restriction') }}
|
||||
v-flex.picture-container(xl5, lg4, md5, xs4)
|
||||
lazy-component
|
||||
img.picture(:src='item.picture', onerror="this.src='static/images/error.jpg'")
|
||||
v-flex.bottom-right-container(xl7, lg8, md7, xs8)
|
||||
v-layout(row, wrap, justify-space-between)
|
||||
v-flex(xs12)
|
||||
.synopsis {{ reduced(item.synopsis) }}
|
||||
v-flex(xs12, style='display: flex')
|
||||
v-layout(align-center, justify-space-between, style='min-width: 100%')
|
||||
v-flex(xs2)
|
||||
p.year {{ item.year }}
|
||||
v-flex(xs7)
|
||||
p.status {{ item.status }}
|
||||
v-flex(xs3)
|
||||
p.mark {{ item.mark }}
|
||||
v-container(fluid, v-else)
|
||||
transition(name='fade')
|
||||
img.empty-bg(v-if='emptyBg', height='400', src='~static/images/empty-bg.png')
|
||||
v-layout(row, wrap)
|
||||
v-flex.menubar(xs12)
|
||||
v-layout(row, wrap)
|
||||
v-flex(offset-xs2, xs2)
|
||||
history-modal
|
||||
v-flex(xs5)
|
||||
v-flex.menu-buttons(xs3)
|
||||
v-btn.refresh-button(icon, v-if='!this.$store.state.refreshingLocal', @click='refresh()')
|
||||
v-icon(large) refresh
|
||||
v-btn.refresh-button(v-else, icon, loading)
|
||||
v-btn.change-dir-button(flat, dark, @click='changePath()')
|
||||
| Change dir
|
||||
v-flex.empty-message(xs12)
|
||||
h3.white--text Wow such empty!
|
||||
h4.white--text
|
||||
| Start downloading anime
|
||||
router-link.green--text(to='/downloader') here
|
||||
| or
|
||||
router-link.cyan--text(to='/') here!
|
||||
choice-window(:entry='choiceTitle')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -218,7 +144,7 @@
|
|||
|
||||
this.$store.dispatch('appendHistory', {
|
||||
type: 'Play',
|
||||
text: item.name
|
||||
text: `${item.name} - ${item.ep}`
|
||||
}).catch(err => { void (err) })
|
||||
})
|
||||
},
|
||||
|
|
@ -241,7 +167,7 @@
|
|||
|
||||
this.$store.dispatch('appendHistory', {
|
||||
type: 'Delete',
|
||||
text: item.name
|
||||
text: `${item.name} - ${item.ep}`
|
||||
}).catch(err => { void (err) })
|
||||
}).catch((err) => {
|
||||
console.log('An error occurred while trying to delete a file:' + err)
|
||||
|
|
|
|||
|
|
@ -1,153 +1,89 @@
|
|||
<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
||||
<div style="min-height: 95vh">
|
||||
<loader v-if="!season[1].items"></loader>
|
||||
|
||||
<v-container fluid v-else style="padding: 20px 0 0">
|
||||
<v-layout row wrap justify-center class="form-container">
|
||||
<v-flex sm3 xs8 class="season-container">
|
||||
<v-select
|
||||
v-bind:items="seasonChoices"
|
||||
v-model="$store.state.season"
|
||||
label="Season"
|
||||
dark
|
||||
item-text="name"
|
||||
item-value="value"/>
|
||||
</v-flex>
|
||||
<v-flex offset-sm1 sm3 xs8 class="year-container">
|
||||
<v-text-field name="input-year"
|
||||
type="number" min="2010"
|
||||
label="Year"
|
||||
v-model="$store.state.year"
|
||||
dark>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex offset-sm1 sm2 xs8 class="refresh-button">
|
||||
<v-btn secondary block dark @click="refreshSeason()">Refresh</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-tabs id="tabs" dark fixed centered>
|
||||
<v-tabs-bar slot="activators" class="mablue">
|
||||
<v-tabs-slider class="primary"></v-tabs-slider>
|
||||
<v-tabs-item v-for="i in 3"
|
||||
:href="'#' + i"
|
||||
:key="i">
|
||||
{{ season[i].name }}
|
||||
</v-tabs-item>
|
||||
</v-tabs-bar>
|
||||
<v-tabs-content v-for="i in 3"
|
||||
lazy
|
||||
v-bind:id="`${i}`"
|
||||
:key="i">
|
||||
<v-text-field class="query"
|
||||
v-model="query"
|
||||
label="Search entry" dark>
|
||||
</v-text-field>
|
||||
<v-layout row wrap class="elems">
|
||||
<transition-group name="list">
|
||||
<v-flex md6 xs12 v-for="item in computedSeason[i].items"
|
||||
style="display: inline-block"
|
||||
:key="item.key">
|
||||
<v-layout row wrap class="elem elevation-3" v-ripple="true">
|
||||
<!-- Header of elem -->
|
||||
<v-flex xs12 v-tooltip:bottom="{ html: item.title }">
|
||||
<h6 class="title ellipsis white--text">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
</v-flex>
|
||||
<v-flex xs8 v-tooltip:bottom="{ html: item.genres.join(' ') }">
|
||||
<p class="genres ellipsis">{{ item.genres.join(' ') }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 v-tooltip:bottom="{ html: item.fromType }">
|
||||
<p class="from-type ellipsis">
|
||||
{{ item.fromType }}
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xs1></v-flex>
|
||||
<!-- Picture of elem -->
|
||||
<v-flex xs4 class="image-container">
|
||||
<lazy-component>
|
||||
<img :src="item.picture" onerror="this.src='static/images/error.jpg'" class="image"/>
|
||||
</lazy-component>
|
||||
</v-flex>
|
||||
<v-flex xs8 class="bottom-right">
|
||||
<v-layout wrap justify-space-between align-center>
|
||||
<v-flex xs12>
|
||||
<div class="synopsis">
|
||||
{{ reduced(item.synopsis) }}
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-layout wrap justify-space-between>
|
||||
<v-flex xs3 class="date">{{ getDate(item.releaseDate) }}</v-flex>
|
||||
<v-flex xs4 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-flex>
|
||||
</v-layout>
|
||||
<v-layout wrap justify-space-between>
|
||||
<v-flex xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-flex>
|
||||
<v-flex xs4 class="dropdown-container">
|
||||
<!-- Add open-on-hover when vuetify repaired it -->
|
||||
<v-menu transition="slide-x-transition">
|
||||
<v-btn flat dark slot="activator">
|
||||
More
|
||||
</v-btn>
|
||||
<v-list class="dark">
|
||||
<v-list-tile @click="openModal(item.title, item.synopsis)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>more</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Check synopsis
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="$store.dispatch('searchInfoFromName', item.title)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>info_outline</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>Information</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="showChoices(item.title)">
|
||||
<v-list-tile-action>
|
||||
<v-icon>add_box</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>
|
||||
Add to
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</transition-group>
|
||||
</v-layout>
|
||||
</v-tabs-content>
|
||||
</v-tabs>
|
||||
<div class="text-xs-center modal-container">
|
||||
<v-dialog v-model="modal" width="70%">
|
||||
<v-card class="secondary white--text">
|
||||
<v-card-text class="white--text">
|
||||
<h2 class="headline white--text">{{ modalTitle }}</h2>
|
||||
</v-card-text>
|
||||
<v-card-text class="text white--text">
|
||||
{{ modalText }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="blue--text darken-1" flat
|
||||
style="width: 100px"
|
||||
v-on:click.native="modal = false">Thanks!
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
<choice-window :entry="choiceTitle"></choice-window>
|
||||
</v-container>
|
||||
</div>
|
||||
<template lang="pug" xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
||||
div(style='min-height: 95vh')
|
||||
loader(v-if='!season[1].items')
|
||||
v-container(fluid, v-else, style='padding: 20px 0 0')
|
||||
v-layout.form-container(row, wrap, justify-center)
|
||||
v-flex.season-container(sm3, xs8)
|
||||
v-select(
|
||||
v-bind:items='seasonChoices',
|
||||
v-model='$store.state.season',
|
||||
label='Season',
|
||||
dark, item-text='name',
|
||||
item-value='value'
|
||||
)
|
||||
v-flex.year-container(offset-sm1, sm3, xs8)
|
||||
v-text-field(name='input-year', type='number', min='2010', label='Year', v-model='$store.state.year', dark)
|
||||
v-flex.refresh-button(offset-sm1, sm2, xs8)
|
||||
v-btn(secondary, block, dark, @click='refreshSeason()') Refresh
|
||||
v-tabs#tabs(dark, fixed, centered)
|
||||
v-tabs-bar.mablue(slot='activators')
|
||||
v-tabs-slider.primary
|
||||
v-tabs-item(v-for='i in 3', :href="'#' + i", :key='i')
|
||||
| {{ season[i].name }}
|
||||
v-tabs-content(v-for='i in 3', lazy, v-bind:id='`${i}`', :key='i')
|
||||
v-text-field.query(v-model='query', label='Search entry', dark)
|
||||
v-layout.elems(row, wrap)
|
||||
transition-group(name='list')
|
||||
v-flex(
|
||||
md6, xs12,
|
||||
v-for='item in computedSeason[i].items',
|
||||
style='display: inline-block',
|
||||
:key='item.key'
|
||||
)
|
||||
v-layout.elem.elevation-3(row, wrap, v-ripple='true')
|
||||
// Header of elem
|
||||
v-flex(xs12, v-tooltip:bottom='{ html: item.title }')
|
||||
h6.title.ellipsis.white--text
|
||||
| {{ item.title }}
|
||||
v-flex(xs8, v-tooltip:bottom="{ html: item.genres.join(' ') }")
|
||||
p.genres.ellipsis {{ item.genres.join(' ') }}
|
||||
v-flex(xs3, v-tooltip:bottom='{ html: item.fromType }')
|
||||
p.from-type.ellipsis
|
||||
| {{ item.fromType }}
|
||||
v-flex(xs1)
|
||||
// Picture of elem
|
||||
v-flex.image-container(xs4)
|
||||
lazy-component
|
||||
img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
|
||||
v-flex.bottom-right(xs8)
|
||||
v-layout(wrap, justify-space-between, align-center)
|
||||
v-flex(xs12)
|
||||
.synopsis {{ reduced(item.synopsis) }}
|
||||
v-flex(xs12)
|
||||
v-layout(wrap, justify-space-between)
|
||||
v-flex.date(xs3) {{ getDate(item.releaseDate) }}
|
||||
v-flex.nb-ep(xs4) {{ item.nbEp }} {{ episode(item.npEp) }}
|
||||
v-layout(wrap, justify-space-between)
|
||||
v-flex.producers(xs8)
|
||||
strong {{ item.producers.join(' ') }}
|
||||
v-flex.dropdown-container(xs4)
|
||||
v-menu(open-on-hover, transition='slide-x-transition')
|
||||
v-btn(flat, dark, slot='activator') More
|
||||
v-list.dark
|
||||
v-list-tile(@click='openModal(item.title, item.synopsis)')
|
||||
v-list-tile-action
|
||||
v-icon more
|
||||
v-list-tile-title Check synopsis
|
||||
v-list-tile(@click="$store.dispatch('searchInfoFromName', item.title)")
|
||||
v-list-tile-action
|
||||
v-icon info_outline
|
||||
v-list-tile-title Information
|
||||
v-list-tile(@click='showChoices(item.title)')
|
||||
v-list-tile-action
|
||||
v-icon add_box
|
||||
v-list-tile-title Add to
|
||||
.text-xs-center.modal-container
|
||||
v-dialog(v-model='modal', width='70%')
|
||||
v-card.secondary.white--text
|
||||
v-card-text.white--text
|
||||
h2.headline.white--text {{ modalTitle }}
|
||||
v-card-text.text.white--text
|
||||
| {{ modalText }}
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn.blue--text.darken-1(flat, style='width: 100px', v-on:click.native='modal = false')
|
||||
| Thanks!
|
||||
choice-window(:entry='choiceTitle')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,62 @@
|
|||
<template>
|
||||
<v-container fluid id="watch-list" class="pa-0">
|
||||
<v-tabs id="tabs" grow icons>
|
||||
<v-tabs-bar slot="activators" class="mablue">
|
||||
<v-tabs-slider class="primary"></v-tabs-slider>
|
||||
<template v-for="i in 5">
|
||||
<v-tabs-item :href="'#tabs-' + i">
|
||||
{{ actionsList[i - 1].name }}
|
||||
<v-icon>{{ actionsList[i - 1].icon }}</v-icon>
|
||||
</v-tabs-item>
|
||||
</template>
|
||||
</v-tabs-bar>
|
||||
<v-tabs-content v-for="i in 5" :key="i"
|
||||
lazy
|
||||
v-bind:id="'tabs-' + i">
|
||||
<v-card style="background-color: #303030">
|
||||
<v-card-text>
|
||||
<v-layout row wrap class="list-container">
|
||||
<v-flex xs12>
|
||||
<v-layout row wrap align-center justify-center class="top-form">
|
||||
<v-flex md3 sm4 xs9>
|
||||
<v-btn icon flat
|
||||
@click="selectAll(i)"
|
||||
v-tooltip:bottom="{ html: allSelected[i] ? 'Unselect all' : 'Select all' }">
|
||||
<v-icon>select_all</v-icon>
|
||||
</v-btn>
|
||||
<!-- Add open-on-hover when vuetify repaired it -->
|
||||
<v-menu transition="slide-x-transition">
|
||||
<v-btn secondary slot="activator">Move to</v-btn>
|
||||
<v-list class="dark">
|
||||
<v-list-tile @click.capture="moveTo(action.list, i)"
|
||||
v-for="action in actions(i)"
|
||||
:key="action.name">
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ action.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>{{ action.name }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn @click="deleteSelected(i)"
|
||||
class="red--text"
|
||||
v-tooltip:bottom="{ html: 'Delete all selected items from this list' }"
|
||||
icon>
|
||||
<v-icon>delete_sweep</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex md2 sm2 xs3>
|
||||
<p class="elem-number">
|
||||
{{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex md3 sm1 hidden-xs-only></v-flex>
|
||||
<v-flex md2 sm3 xs4 @keyup.enter="addEntry(i)">
|
||||
<v-text-field type="text"
|
||||
class="entry-text"
|
||||
label="Add entry"
|
||||
v-model="entries[i]"
|
||||
dark>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex hidden-sm-and-up xs1></v-flex>
|
||||
<v-flex md2 sm2 xs4 class="add-button-container">
|
||||
<v-btn dark secondary
|
||||
@click="addEntry(i)"
|
||||
class="add-button">
|
||||
Add
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<transition-group name="list">
|
||||
<template v-for="item in lists[i - 1]">
|
||||
<list-entry
|
||||
:item="item"
|
||||
:deleteEntry="deleteEntry"
|
||||
:key="item"
|
||||
:index="i"
|
||||
:select="select"
|
||||
:selected="selected"></list-entry>
|
||||
</template>
|
||||
</transition-group>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-content>
|
||||
</v-tabs>
|
||||
</v-container>
|
||||
<template lang="pug">
|
||||
v-container#watch-list.pa-0(fluid)
|
||||
v-tabs#tabs(grow, icons)
|
||||
v-tabs-bar.mablue(slot='activators')
|
||||
v-tabs-slider.primary
|
||||
template(v-for='i in 5')
|
||||
v-tabs-item(:href="'#tabs-' + i")
|
||||
| {{ actionsList[i - 1].name }}
|
||||
v-icon {{ actionsList[i - 1].icon }}
|
||||
v-tabs-content(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
|
||||
v-card(style='background-color: #303030')
|
||||
v-card-text
|
||||
v-layout.list-container(row, wrap)
|
||||
v-flex(xs12)
|
||||
v-layout.top-form(row, wrap, align-center, justify-center)
|
||||
v-flex(md3, sm4, xs9)
|
||||
v-btn(
|
||||
icon, flat,
|
||||
@click='selectAll(i)',
|
||||
v-tooltip:bottom="{ html: allSelected[i] ? 'Unselect all' : 'Select all' }"
|
||||
)
|
||||
v-icon select_all
|
||||
v-menu(open-on-hover, transition='slide-x-transition')
|
||||
v-btn(secondary, slot='activator') Move to
|
||||
v-list.dark
|
||||
v-list-tile(
|
||||
@click.capture='moveTo(action.list, i)',
|
||||
v-for='action in actions(i)',
|
||||
:key='action.name'
|
||||
)
|
||||
v-list-tile-action
|
||||
v-icon {{ action.icon }}
|
||||
v-list-tile-title {{ action.name }}
|
||||
v-btn.red--text(
|
||||
@click='deleteSelected(i)',
|
||||
v-tooltip:bottom="{ html: 'Delete all selected items from this list' }",
|
||||
icon
|
||||
)
|
||||
v-icon delete_sweep
|
||||
v-flex(md2, sm2, xs3)
|
||||
p.elem-number
|
||||
| {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
|
||||
v-flex(md3, sm1, hidden-xs-only)
|
||||
v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
|
||||
v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
|
||||
v-flex(hidden-sm-and-up, xs1)
|
||||
v-flex.add-button-container(md2, sm2, xs4)
|
||||
v-btn.add-button(dark, secondary, @click='addEntry(i)')
|
||||
| Add
|
||||
transition-group(name='list')
|
||||
template(v-for='item in lists[i - 1]')
|
||||
list-entry(
|
||||
:item='item',
|
||||
:deleteentry='deleteEntry',
|
||||
:key='item',
|
||||
:index='i',
|
||||
:select='select',
|
||||
:selected='selected'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue