mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-15 00:13:23 -06:00
Format all Vue components with ESLint rules
This commit is contained in:
Xevion
@@ -1,12 +1,16 @@
|
||||
<template>
|
||||
<div class="pt-2" v-if="characters" :fluid="true">
|
||||
<b-button squared class="mx-2 my-1 character-button" size="sm" v-for="(character, character_id) in characters"
|
||||
:key="character.name" :id="`character-${character_id}`"
|
||||
<div v-if="characters" class="pt-2" :fluid="true">
|
||||
<b-button
|
||||
v-for="(character, character_id) in characters" :id="`character-${character_id}`"
|
||||
:key="character.name" squared
|
||||
class="mx-2 my-1 character-button" size="sm"
|
||||
:title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
|
||||
:to="{ name: 'Character', params: { character: character_id } }"
|
||||
>
|
||||
{{ character.name }}
|
||||
<b-badge class="ml-1">{{ character.appearances }}</b-badge>
|
||||
<b-badge class="ml-1">
|
||||
{{ character.appearances }}
|
||||
</b-badge>
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,29 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
|
||||
<b-breadcrumb v-if="ready" :items="breadcrumbs" />
|
||||
<b-card v-else class="breadcrumb-skeleton mb-3">
|
||||
<Skeleton style="width: 40%;"></Skeleton>
|
||||
<Skeleton style="width: 40%;" />
|
||||
</b-card>
|
||||
<b-card class="mb-4">
|
||||
<template v-if="ready">
|
||||
<h3 class="card-title">"{{ episode.title }}"</h3>
|
||||
<h3 class="card-title">
|
||||
"{{ episode.title }}"
|
||||
</h3>
|
||||
<span>{{ episode.description }}</span>
|
||||
<CharacterBadges v-if="episode && episode.characters" :characters="episode.characters"></CharacterBadges>
|
||||
<CharacterBadges v-if="episode && episode.characters" :characters="episode.characters" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Skeleton style="width: 30%;"></Skeleton>
|
||||
<Skeleton style="width: 70%; height: 60%;"></Skeleton>
|
||||
<Skeleton style="width: 45%; height: 60%;"></Skeleton>
|
||||
<Skeleton style="width: 69%; height: 40%;"></Skeleton>
|
||||
<Skeleton style="width: 30%;" />
|
||||
<Skeleton style="width: 70%; height: 60%;" />
|
||||
<Skeleton style="width: 45%; height: 60%;" />
|
||||
<Skeleton style="width: 69%; height: 40%;" />
|
||||
</template>
|
||||
</b-card>
|
||||
<div v-if="ready">
|
||||
<b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
|
||||
class="mb-1" body-class="p-0">
|
||||
<b-card
|
||||
v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
|
||||
class="mb-1" body-class="p-0"
|
||||
>
|
||||
<b-card-text class="my-2">
|
||||
<QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
|
||||
<span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
|
||||
:footer="`Deleted Scene ${scene.deleted}`">
|
||||
<QuoteList :quotes="scene.quotes" :scene-index="sceneIndex" />
|
||||
<span
|
||||
v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
|
||||
:footer="`Deleted Scene ${scene.deleted}`"
|
||||
>
|
||||
Deleted Scene {{ scene.deleted }}
|
||||
</span>
|
||||
</b-card-text>
|
||||
@@ -70,36 +76,6 @@ export default {
|
||||
CharacterBadges,
|
||||
Skeleton,
|
||||
},
|
||||
created() {
|
||||
// When page loads directly on this Episode initially, fetch data
|
||||
this.fetch();
|
||||
},
|
||||
watch: {
|
||||
// When route changes, fetch data for current Episode route
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.fetch();
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
// Fetch the episode, then scroll - already fetched episode should scroll immediately
|
||||
this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
|
||||
.then(() => {
|
||||
// Force update, as for some reason it doesn't update naturally. I hate it too.
|
||||
this.$forceUpdate()
|
||||
|
||||
// Scroll down to quote
|
||||
if (this.$route.hash) {
|
||||
this.$nextTick(() => {
|
||||
const section = document.getElementById(this.$route.hash.substring(1));
|
||||
this.$scrollTo(section, 500, {easing: "ease-in"});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
episode() {
|
||||
return this.$store.getters.getEpisode(this.params.season, this.params.episode)
|
||||
@@ -137,6 +113,36 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// When route changes, fetch data for current Episode route
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.fetch();
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// When page loads directly on this Episode initially, fetch data
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
// Fetch the episode, then scroll - already fetched episode should scroll immediately
|
||||
this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
|
||||
.then(() => {
|
||||
// Force update, as for some reason it doesn't update naturally. I hate it too.
|
||||
this.$forceUpdate()
|
||||
|
||||
// Scroll down to quote
|
||||
if (this.$route.hash) {
|
||||
this.$nextTick(() => {
|
||||
const section = document.getElementById(this.$route.hash.substring(1));
|
||||
this.$scrollTo(section, 500, {easing: "ease-in"});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -7,16 +7,16 @@
|
||||
<b-card-text>
|
||||
A Vue.js application serving you {{ stats.totals.quote }} quotes from your
|
||||
favorite show - The Office.
|
||||
<br/>
|
||||
<br>
|
||||
Click on a Season and Episode on the left-hand sidebar to view quotes.
|
||||
Search for quotes with the instant searchbox.
|
||||
</b-card-text>
|
||||
</template>
|
||||
<b-card-text v-else>
|
||||
<Skeleton style="width: 45%"></Skeleton>
|
||||
<Skeleton style="width: 75%"></Skeleton>
|
||||
<Skeleton style="width: 60%"></Skeleton>
|
||||
<Skeleton style="width: 60%"></Skeleton>
|
||||
<Skeleton style="width: 45%" />
|
||||
<Skeleton style="width: 75%" />
|
||||
<Skeleton style="width: 60%" />
|
||||
<Skeleton style="width: 60%" />
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</template>
|
||||
@@ -35,6 +35,9 @@ export default {
|
||||
stats: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getStats();
|
||||
},
|
||||
methods: {
|
||||
getStats() {
|
||||
const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
|
||||
@@ -49,8 +52,5 @@ export default {
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getStats();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,24 +2,26 @@
|
||||
<table class="quote-list px-3 w-100">
|
||||
<tr
|
||||
v-for="(quote, index) in quotes"
|
||||
:key="`quote-${index}`"
|
||||
:id="`${sceneIndex}-${index}`"
|
||||
:key="`quote-${index}`"
|
||||
:class="
|
||||
$route.hash !== null &&
|
||||
$route.hash.substring(1) === `${sceneIndex}-${index}`
|
||||
? 'highlight'
|
||||
: ''
|
||||
"
|
||||
$route.hash !== null &&
|
||||
$route.hash.substring(1) === `${sceneIndex}-${index}`
|
||||
? 'highlight'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<td class="quote-speaker pl-3" v-if="quote.speaker">
|
||||
<span class="my-3">
|
||||
{{ quote.speaker }}
|
||||
</span>
|
||||
<td v-if="quote.speaker" class="quote-speaker pl-3">
|
||||
<span class="my-3">
|
||||
{{ quote.speaker }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="quote-text w-100 pr-3">
|
||||
{{ quote.text }}
|
||||
</td>
|
||||
<td class="quote-text w-100 pr-3">{{ quote.text }}</td>
|
||||
<td class="px-1 pl-2">
|
||||
<a :href="quote_link(index)" @click="copy(index)" class="no-link">
|
||||
<b-icon icon="link45deg"></b-icon>
|
||||
<a :href="quote_link(index)" class="no-link" @click="copy(index)">
|
||||
<b-icon icon="link45deg" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
|
||||
@mouseover="hoverOn" @mouseleave="hoverOff" v-on:click="toggleExpansion"
|
||||
:class="[expanded ? 'expanded' : '']">
|
||||
<b-card
|
||||
class="mb-1" body-class="p-0 expandable-result"
|
||||
footer-class="my-1"
|
||||
:class="[expanded ? 'expanded' : '']" @mouseover="hoverOn"
|
||||
@mouseleave="hoverOff"
|
||||
@click="toggleExpansion"
|
||||
>
|
||||
<b-card-text class="mu-2 py-1 mb-1">
|
||||
<table v-if="expanded" class="quote-list px-3 py-1 w-100">
|
||||
<tr
|
||||
v-for="(quote, index) in above"
|
||||
class="secondary"
|
||||
:key="`quote-a-${index}`"
|
||||
class="secondary"
|
||||
>
|
||||
<td class="quote-speaker my-3 pl-3">
|
||||
<div>{{ quote.speaker }}</div>
|
||||
@@ -20,16 +24,16 @@
|
||||
<td
|
||||
class="quote-speaker my-3 pl-3"
|
||||
v-html="item._highlightResult.speaker.value"
|
||||
></td>
|
||||
/>
|
||||
<td
|
||||
class="quote-text w-100 pr-3"
|
||||
v-html="item._highlightResult.text.value"
|
||||
></td>
|
||||
/>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="(quote, index) in below"
|
||||
class="secondary"
|
||||
:key="`quote-b-${index}`"
|
||||
class="secondary"
|
||||
>
|
||||
<td class="quote-speaker my-3 pl-3">
|
||||
<div>{{ quote.speaker }}</div>
|
||||
@@ -44,16 +48,18 @@
|
||||
<td
|
||||
class="quote-speaker my-3 pl-3"
|
||||
v-html="item._highlightResult.speaker.value"
|
||||
></td>
|
||||
/>
|
||||
<td
|
||||
class="quote-text w-100 pr-3"
|
||||
v-html="item._highlightResult.text.value"
|
||||
></td>
|
||||
/>
|
||||
</tr>
|
||||
</table>
|
||||
<router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
|
||||
:to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
|
||||
hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }">
|
||||
<router-link
|
||||
v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
|
||||
:to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
|
||||
hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }"
|
||||
>
|
||||
Season {{ item.season }} Episode {{ item.episode_rel }} Scene
|
||||
{{ item.section_rel }}
|
||||
</router-link>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<ais-hits>
|
||||
<div slot-scope="{ items }">
|
||||
<SearchResult v-for="item in items" :item="item" :key="item.objectID"></SearchResult>
|
||||
<SearchResult v-for="item in items" :key="item.objectID" :item="item" />
|
||||
</div>
|
||||
</ais-hits>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
|
||||
<b-breadcrumb :items="breadcrumbs" />
|
||||
<b-card v-if="ready">
|
||||
<b-list-group>
|
||||
<b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
|
||||
<b-row align-v="start" align-content="start">
|
||||
<b-col cols="5" md="4" lg="4" xl="3">
|
||||
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
|
||||
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250" />
|
||||
</b-col>
|
||||
<b-col>
|
||||
<h4>
|
||||
{{ episode.title }}
|
||||
<router-link class="no-link"
|
||||
:to="getEpisodeRoute(season.season_id, episode.episode_id)">
|
||||
<b-icon class="h6" icon="caret-right-fill"></b-icon>
|
||||
<router-link
|
||||
class="no-link"
|
||||
:to="getEpisodeRoute(season.season_id, episode.episode_id)"
|
||||
>
|
||||
<b-icon class="h6" icon="caret-right-fill" />
|
||||
</router-link>
|
||||
</h4>
|
||||
<p class="pl-3">{{ episode.description }}</p>
|
||||
<p class="pl-3">
|
||||
{{ episode.description }}
|
||||
</p>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
@@ -42,11 +46,6 @@ h4 {
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getEpisodeRoute(s, e) {
|
||||
return {name: 'Episode', params: {season: s, episode: e}}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ready() {
|
||||
return this.$store.state.preloaded;
|
||||
@@ -66,6 +65,11 @@ export default {
|
||||
season() {
|
||||
return this.$store.state.quoteData[this.$route.params.season - 1];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getEpisodeRoute(s, e) {
|
||||
return {name: 'Episode', params: {season: s, episode: e}}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,35 +1,40 @@
|
||||
<template>
|
||||
<div class="accordion" role="tablist">
|
||||
<b-card class="season-item" v-for="season in seasons" :key="season.season_id">
|
||||
<b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id">
|
||||
<a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded">
|
||||
<b-card v-for="season in seasons" :key="season.season_id" class="season-item">
|
||||
<b-card-header v-b-toggle="'accordion-' + season.season_id" header-tag="header" role="tab">
|
||||
<a v-if="isPreloaded" class="no-link align-items-center justify-content-between d-flex">
|
||||
<h5 class="mb-0 pu-0 mu-0 season-title">
|
||||
Season {{ season.season_id }}
|
||||
</h5>
|
||||
<b-icon class="" icon="chevron-down"></b-icon>
|
||||
<b-icon class="" icon="chevron-down" />
|
||||
</a>
|
||||
<Skeleton v-else></Skeleton>
|
||||
<Skeleton v-else />
|
||||
</b-card-header>
|
||||
<b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
|
||||
<b-card-body class="h-100 px-0">
|
||||
<b-list-group>
|
||||
<template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
|
||||
<template v-if="isPreloaded">
|
||||
<b-list-group-item class="no-link episode-item" :key="`rl-${episode.episode_id}`"
|
||||
:to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
|
||||
:id="`s-${season.season_id}-ep-${episode.episode_id}`">
|
||||
<b-list-group-item
|
||||
:id="`s-${season.season_id}-ep-${episode.episode_id}`" :key="`rl-${episode.episode_id}`"
|
||||
class="no-link episode-item"
|
||||
:to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
|
||||
>
|
||||
Episode {{ episode.episode_id }} - "{{ episode.title }}"
|
||||
</b-list-group-item>
|
||||
<b-popover :key="`bpop-${episode.episode_id}`" triggers="hover"
|
||||
placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`">
|
||||
<b-popover
|
||||
:key="`bpop-${episode.episode_id}`" triggers="hover"
|
||||
placement="right" delay="25"
|
||||
:target="`s-${season.season_id}-ep-${episode.episode_id}`"
|
||||
>
|
||||
<template v-slot:title>
|
||||
{{ episode.title }}
|
||||
</template>
|
||||
{{ episode.description }}
|
||||
</b-popover>
|
||||
</template>
|
||||
<b-list-group-item v-else class="no-link episode-item" :key="index">
|
||||
<Skeleton></Skeleton>
|
||||
<b-list-group-item v-else :key="index" class="no-link episode-item">
|
||||
<Skeleton />
|
||||
</b-list-group-item>
|
||||
</template>
|
||||
</b-list-group>
|
||||
@@ -57,9 +62,9 @@ export default {
|
||||
return this.$store.state.preloaded;
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
this.$store.dispatch(types.PRELOAD)
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="outer-skeleton">
|
||||
<div class="skeleton" :class="[animated ? undefined : 'no-animate']" :style="[style, inner_style]"></div>
|
||||
<div class="skeleton" :class="[animated ? undefined : 'no-animate']" :style="[style, inner_style]" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user