xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-17 22:13:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Format all Vue components with ESLint rules

Browse Source
This commit is contained in:
Xevion
2022-05-19 10:33:49 -05:00
parent 71b4c9f972
commit 2445fe5fc1
9 changed files with 133 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/CharacterBadges.vue
View File

@@ -1,12 +1,16 @@
<template> <template>
<div class="pt-2" v-if="characters" :fluid="true"> <div v-if="characters" class="pt-2" :fluid="true">
<b-button squared class="mx-2 my-1 character-button" size="sm" v-for="(character, character_id) in characters" <b-button
:key="character.name" :id="`character-${character_id}`" 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' : ''}`" :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
:to="{ name: 'Character', params: { character: character_id } }" :to="{ name: 'Character', params: { character: character_id } }"
> >
{{ character.name }} {{ character.name }}
<b-badge class="ml-1">{{ character.appearances }}</b-badge> <b-badge class="ml-1">
{{ character.appearances }}
</b-badge>
</b-button> </b-button>
</div> </div>
</template> </template>

92
src/components/Episode.vue
View File

@@ -1,29 +1,35 @@
<template> <template>
<div> <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"> <b-card v-else class="breadcrumb-skeleton mb-3">
<Skeleton style="width: 40%;"></Skeleton> <Skeleton style="width: 40%;" />
</b-card> </b-card>
<b-card class="mb-4"> <b-card class="mb-4">
<template v-if="ready"> <template v-if="ready">
<h3 class="card-title">"{{ episode.title }}"</h3> <h3 class="card-title">
"{{ episode.title }}"
</h3>
<span>{{ episode.description }}</span> <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>
<template v-else> <template v-else>
<Skeleton style="width: 30%;"></Skeleton> <Skeleton style="width: 30%;" />
<Skeleton style="width: 70%; height: 60%;"></Skeleton> <Skeleton style="width: 70%; height: 60%;" />
<Skeleton style="width: 45%; height: 60%;"></Skeleton> <Skeleton style="width: 45%; height: 60%;" />
<Skeleton style="width: 69%; height: 40%;"></Skeleton> <Skeleton style="width: 69%; height: 40%;" />
</template> </template>
</b-card> </b-card>
<div v-if="ready"> <div v-if="ready">
<b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`" <b-card
class="mb-1" body-class="p-0"> v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
class="mb-1" body-class="p-0"
>
<b-card-text class="my-2"> <b-card-text class="my-2">
<QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList> <QuoteList :quotes="scene.quotes" :scene-index="sceneIndex" />
<span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2" <span
:footer="`Deleted Scene ${scene.deleted}`"> v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
:footer="`Deleted Scene ${scene.deleted}`"
>
Deleted Scene {{ scene.deleted }} Deleted Scene {{ scene.deleted }}
</span> </span>
</b-card-text> </b-card-text>
@@ -70,36 +76,6 @@ export default {
CharacterBadges, CharacterBadges,
Skeleton, 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: { computed: {
episode() { episode() {
return this.$store.getters.getEpisode(this.params.season, this.params.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> </script>

16
src/components/Home.vue
View File

@@ -7,16 +7,16 @@
<b-card-text> <b-card-text>
A Vue.js application serving you {{ stats.totals.quote }} quotes from your A Vue.js application serving you {{ stats.totals.quote }} quotes from your
favorite show - The Office. favorite show - The Office.
<br/> <br>
Click on a Season and Episode on the left-hand sidebar to view quotes. Click on a Season and Episode on the left-hand sidebar to view quotes.
Search for quotes with the instant searchbox. Search for quotes with the instant searchbox.
</b-card-text> </b-card-text>
</template> </template>
<b-card-text v-else> <b-card-text v-else>
<Skeleton style="width: 45%"></Skeleton> <Skeleton style="width: 45%" />
<Skeleton style="width: 75%"></Skeleton> <Skeleton style="width: 75%" />
<Skeleton style="width: 60%"></Skeleton> <Skeleton style="width: 60%" />
<Skeleton style="width: 60%"></Skeleton> <Skeleton style="width: 60%" />
</b-card-text> </b-card-text>
</b-card> </b-card>
</template> </template>
@@ -35,6 +35,9 @@ export default {
stats: null, stats: null,
}; };
}, },
created() {
this.getStats();
},
methods: { methods: {
getStats() { getStats() {
const path = `${process.env.VUE_APP_API_URL}/api/stats/`; const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
@@ -49,8 +52,5 @@ export default {
}); });
}, },
}, },
created() {
this.getStats();
},
}; };
</script> </script>

28
src/components/QuoteList.vue
View File

@@ -2,24 +2,26 @@
<table class="quote-list px-3 w-100"> <table class="quote-list px-3 w-100">
<tr <tr
v-for="(quote, index) in quotes" v-for="(quote, index) in quotes"
:key="`quote-${index}`"
:id="`${sceneIndex}-${index}`" :id="`${sceneIndex}-${index}`"
:key="`quote-${index}`"
:class=" :class="
$route.hash !== null && $route.hash !== null &&
$route.hash.substring(1) === `${sceneIndex}-${index}` $route.hash.substring(1) === `${sceneIndex}-${index}`
? 'highlight' ? 'highlight'
: '' : ''
" "
> >
<td class="quote-speaker pl-3" v-if="quote.speaker"> <td v-if="quote.speaker" class="quote-speaker pl-3">
<span class="my-3"> <span class="my-3">
{{ quote.speaker }} {{ quote.speaker }}
</span> </span>
</td>
<td class="quote-text w-100 pr-3">
{{ quote.text }}
</td> </td>
<td class="quote-text w-100 pr-3">{{ quote.text }}</td>
<td class="px-1 pl-2"> <td class="px-1 pl-2">
<a :href="quote_link(index)" @click="copy(index)" class="no-link"> <a :href="quote_link(index)" class="no-link" @click="copy(index)">
<b-icon icon="link45deg"></b-icon> <b-icon icon="link45deg" />
</a> </a>
</td> </td>
</tr> </tr>

30
src/components/SearchResult.vue
View File

@@ -1,13 +1,17 @@
<template> <template>
<b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1" <b-card
@mouseover="hoverOn" @mouseleave="hoverOff" v-on:click="toggleExpansion" class="mb-1" body-class="p-0 expandable-result"
:class="[expanded ? 'expanded' : '']"> footer-class="my-1"
:class="[expanded ? 'expanded' : '']" @mouseover="hoverOn"
@mouseleave="hoverOff"
@click="toggleExpansion"
>
<b-card-text class="mu-2 py-1 mb-1"> <b-card-text class="mu-2 py-1 mb-1">
<table v-if="expanded" class="quote-list px-3 py-1 w-100"> <table v-if="expanded" class="quote-list px-3 py-1 w-100">
<tr <tr
v-for="(quote, index) in above" v-for="(quote, index) in above"
class="secondary"
:key="`quote-a-${index}`" :key="`quote-a-${index}`"
class="secondary"
> >
<td class="quote-speaker my-3 pl-3"> <td class="quote-speaker my-3 pl-3">
<div>{{ quote.speaker }}</div> <div>{{ quote.speaker }}</div>
@@ -20,16 +24,16 @@
<td <td
class="quote-speaker my-3 pl-3" class="quote-speaker my-3 pl-3"
v-html="item._highlightResult.speaker.value" v-html="item._highlightResult.speaker.value"
></td> />
<td <td
class="quote-text w-100 pr-3" class="quote-text w-100 pr-3"
v-html="item._highlightResult.text.value" v-html="item._highlightResult.text.value"
></td> />
</tr> </tr>
<tr <tr
v-for="(quote, index) in below" v-for="(quote, index) in below"
class="secondary"
:key="`quote-b-${index}`" :key="`quote-b-${index}`"
class="secondary"
> >
<td class="quote-speaker my-3 pl-3"> <td class="quote-speaker my-3 pl-3">
<div>{{ quote.speaker }}</div> <div>{{ quote.speaker }}</div>
@@ -44,16 +48,18 @@
<td <td
class="quote-speaker my-3 pl-3" class="quote-speaker my-3 pl-3"
v-html="item._highlightResult.speaker.value" v-html="item._highlightResult.speaker.value"
></td> />
<td <td
class="quote-text w-100 pr-3" class="quote-text w-100 pr-3"
v-html="item._highlightResult.text.value" v-html="item._highlightResult.text.value"
></td> />
</tr> </tr>
</table> </table>
<router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2" <router-link
:to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel }, v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }"> :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 Season {{ item.season }} Episode {{ item.episode_rel }} Scene
{{ item.section_rel }} {{ item.section_rel }}
</router-link> </router-link>

2
src/components/SearchResults.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<ais-hits> <ais-hits>
<div slot-scope="{ items }"> <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> </div>
</ais-hits> </ais-hits>
</div> </div>

26
src/components/Season.vue
View File

@@ -1,22 +1,26 @@
<template> <template>
<div> <div>
<b-breadcrumb :items="breadcrumbs"></b-breadcrumb> <b-breadcrumb :items="breadcrumbs" />
<b-card v-if="ready"> <b-card v-if="ready">
<b-list-group> <b-list-group>
<b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id"> <b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
<b-row align-v="start" align-content="start"> <b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3"> <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>
<b-col> <b-col>
<h4> <h4>
{{ episode.title }} {{ episode.title }}
<router-link class="no-link" <router-link
:to="getEpisodeRoute(season.season_id, episode.episode_id)"> class="no-link"
<b-icon class="h6" icon="caret-right-fill"></b-icon> :to="getEpisodeRoute(season.season_id, episode.episode_id)"
>
<b-icon class="h6" icon="caret-right-fill" />
</router-link> </router-link>
</h4> </h4>
<p class="pl-3">{{ episode.description }}</p> <p class="pl-3">
{{ episode.description }}
</p>
</b-col> </b-col>
</b-row> </b-row>
</b-list-group-item> </b-list-group-item>
@@ -42,11 +46,6 @@ h4 {
<script> <script>
export default { export default {
methods: {
getEpisodeRoute(s, e) {
return {name: 'Episode', params: {season: s, episode: e}}
}
},
computed: { computed: {
ready() { ready() {
return this.$store.state.preloaded; return this.$store.state.preloaded;
@@ -66,6 +65,11 @@ export default {
season() { season() {
return this.$store.state.quoteData[this.$route.params.season - 1]; return this.$store.state.quoteData[this.$route.params.season - 1];
} }
},
methods: {
getEpisodeRoute(s, e) {
return {name: 'Episode', params: {season: s, episode: e}}
}
} }
} }
</script> </script>

31
src/components/SeasonList.vue
View File

@@ -1,35 +1,40 @@
<template> <template>
<div class="accordion" role="tablist"> <div class="accordion" role="tablist">
<b-card class="season-item" v-for="season in seasons" :key="season.season_id"> <b-card v-for="season in seasons" :key="season.season_id" class="season-item">
<b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id"> <b-card-header v-b-toggle="'accordion-' + season.season_id" header-tag="header" role="tab">
<a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded"> <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"> <h5 class="mb-0 pu-0 mu-0 season-title">
Season {{ season.season_id }} Season {{ season.season_id }}
</h5> </h5>
<b-icon class="" icon="chevron-down"></b-icon> <b-icon class="" icon="chevron-down" />
</a> </a>
<Skeleton v-else></Skeleton> <Skeleton v-else />
</b-card-header> </b-card-header>
<b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list"> <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
<b-card-body class="h-100 px-0"> <b-card-body class="h-100 px-0">
<b-list-group> <b-list-group>
<template v-for="(episode, index) in seasons[season.season_id - 1].episodes"> <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
<template v-if="isPreloaded"> <template v-if="isPreloaded">
<b-list-group-item class="no-link episode-item" :key="`rl-${episode.episode_id}`" <b-list-group-item
:to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }" :id="`s-${season.season_id}-ep-${episode.episode_id}`" :key="`rl-${episode.episode_id}`"
:id="`s-${season.season_id}-ep-${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 }}" Episode {{ episode.episode_id }} - "{{ episode.title }}"
</b-list-group-item> </b-list-group-item>
<b-popover :key="`bpop-${episode.episode_id}`" triggers="hover" <b-popover
placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`"> :key="`bpop-${episode.episode_id}`" triggers="hover"
placement="right" delay="25"
:target="`s-${season.season_id}-ep-${episode.episode_id}`"
>
<template v-slot:title> <template v-slot:title>
{{ episode.title }} {{ episode.title }}
</template> </template>
{{ episode.description }} {{ episode.description }}
</b-popover> </b-popover>
</template> </template>
<b-list-group-item v-else class="no-link episode-item" :key="index"> <b-list-group-item v-else :key="index" class="no-link episode-item">
<Skeleton></Skeleton> <Skeleton />
</b-list-group-item> </b-list-group-item>
</template> </template>
</b-list-group> </b-list-group>
@@ -57,9 +62,9 @@ export default {
return this.$store.state.preloaded; return this.$store.state.preloaded;
} }
}, },
methods: {},
created() { created() {
this.$store.dispatch(types.PRELOAD) this.$store.dispatch(types.PRELOAD)
}, },
methods: {},
}; };
</script> </script>

2
src/components/Skeleton.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="outer-skeleton"> <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> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>