mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
Merge pull request #34 from kihashi/feature/#24-hide-completed-items
Feature/#24 hide completed items
This commit is contained in:
commit
7066cc56d6
383
index.html
383
index.html
@ -65,6 +65,28 @@
|
|||||||
Skills
|
Skills
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header-right header-menu">
|
||||||
|
<span class="header-item">
|
||||||
|
<a class="button" v-on:click="hideCompleted = !hideCompleted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa" v-bind:class="[hideCompleted ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Hide Completed
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<span class="header-item">
|
||||||
|
<a class="button" v-on:click="hideSpoilers = !hideSpoilers">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa" v-bind:class="[hideSpoilers ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Hide Spoilers
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@ -161,55 +183,57 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
<div class="column is-3 is-flex" v-for="item in static.items | inBundle active_bundle">
|
<template v-for="item in static.items | inBundle active_bundle">
|
||||||
<div class="card is-fullwidth is-flex eq-line">
|
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
|
||||||
<header class="card-header">
|
<div class="card is-fullwidth is-flex eq-line">
|
||||||
<p class="card-header-title">
|
<header class="card-header">
|
||||||
{{ item.name }}
|
<p class="card-header-title">
|
||||||
</p>
|
{{ item.name }}
|
||||||
</header>
|
</p>
|
||||||
<div class="card-content eq-line is-flex">
|
</header>
|
||||||
<div class="content is-flex">
|
<div class="card-content eq-line is-flex">
|
||||||
<div class="columns source">
|
<div class="content is-flex">
|
||||||
<div class="column">
|
<div class="columns source">
|
||||||
<div class="">{{ item.source }}</div>
|
<div class="column">
|
||||||
|
<div v-if="!hideSpoilers">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
<p class="control">
|
<div class="card-footer-item">
|
||||||
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
||||||
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
<span class="tag is-primary is-text-centered"
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
<span class="icon">
|
{{ season.name }}
|
||||||
<i class="fa"
|
</span>
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
</div>
|
||||||
</span>
|
</footer>
|
||||||
<span>{{ static.bundles[bundle_id].name }}</span>
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
</a>
|
<div class="card-footer-item">
|
||||||
</p>
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
</div>
|
<span class="tag is-info is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
|
||||||
<span class="tag is-primary is-text-centered"
|
|
||||||
v-for="season in static.seasons | filterByArray item.seasons">
|
|
||||||
{{ season.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
|
||||||
<span class="tag is-info is-text-centered"
|
|
||||||
v-for="skill in static.skills | filterByArray item.skills">
|
|
||||||
{{ skill.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -234,56 +258,57 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
<div class="column is-3 is-flex"
|
<template v-for="item in static.items | filterBy search_term in 'name' | orderBy 'name'">
|
||||||
v-for="item in static.items | filterBy search_term in 'name' | orderBy 'name'">
|
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
|
||||||
<div class="card is-fullwidth is-flex eq-line">
|
<div class="card is-fullwidth is-flex eq-line">
|
||||||
<header class="card-header">
|
<header class="card-header">
|
||||||
<p class="card-header-title">
|
<p class="card-header-title">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="card-content eq-line is-flex">
|
<div class="card-content eq-line is-flex">
|
||||||
<div class="content is-flex">
|
<div class="content is-flex">
|
||||||
<div class="columns source">
|
<div class="columns source">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="">{{ item.source }}</div>
|
<div v-if="!hideSpoilers">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
<p class="control">
|
<div class="card-footer-item">
|
||||||
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
||||||
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
<span class="tag is-primary is-text-centered"
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
<span class="icon">
|
{{ season.name }}
|
||||||
<i class="fa"
|
</span>
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
</div>
|
||||||
</span>
|
</footer>
|
||||||
<span>{{ static.bundles[bundle_id].name }}</span>
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
</a>
|
<div class="card-footer-item">
|
||||||
</p>
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
</div>
|
<span class="tag is-info is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
|
||||||
<span class="tag is-primary is-text-centered"
|
|
||||||
v-for="season in static.seasons | filterByArray item.seasons">
|
|
||||||
{{ season.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
|
||||||
<span class="tag is-info is-text-centered"
|
|
||||||
v-for="skill in static.skills | filterByArray item.skills">
|
|
||||||
{{ skill.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -310,55 +335,57 @@
|
|||||||
<h3 class="title">{{ getSeasonName(active_season) }}</h3>
|
<h3 class="title">{{ getSeasonName(active_season) }}</h3>
|
||||||
<progress class="progress is-info" value="" max=""></progress>
|
<progress class="progress is-info" value="" max=""></progress>
|
||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
<div class="column is-3 is-flex" v-for="item in static.items | filterBy active_season in 'seasons'">
|
<template v-for="item in static.items | filterBy active_season in 'seasons'">
|
||||||
<div class="card is-fullwidth is-flex eq-line">
|
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
|
||||||
<header class="card-header">
|
<div class="card is-fullwidth is-flex eq-line">
|
||||||
<p class="card-header-title">
|
<header class="card-header">
|
||||||
{{ item.name }}
|
<p class="card-header-title">
|
||||||
</p>
|
{{ item.name }}
|
||||||
</header>
|
</p>
|
||||||
<div class="card-content eq-line is-flex">
|
</header>
|
||||||
<div class="content is-flex">
|
<div class="card-content eq-line is-flex">
|
||||||
<div class="columns source">
|
<div class="content is-flex">
|
||||||
<div class="column">
|
<div class="columns source">
|
||||||
<div class="">{{ item.source }}</div>
|
<div class="column">
|
||||||
|
<div v-if="!hideSpoilers">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
<p class="control">
|
<div class="card-footer-item">
|
||||||
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
||||||
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
<span class="tag is-primary is-text-centered"
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
<span class="icon">
|
{{ season.name }}
|
||||||
<i class="fa"
|
</span>
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
</div>
|
||||||
</span>
|
</footer>
|
||||||
<span>{{ static.bundles[bundle_id].name }}</span>
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
</a>
|
<div class="card-footer-item">
|
||||||
</p>
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
</div>
|
<span class="tag is-info is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
|
||||||
<span class="tag is-primary is-text-centered"
|
|
||||||
v-for="season in static.seasons | filterByArray item.seasons">
|
|
||||||
{{ season.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
|
||||||
<span class="tag is-info is-text-centered"
|
|
||||||
v-for="skill in static.skills | filterByArray item.skills">
|
|
||||||
{{ skill.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -387,55 +414,57 @@
|
|||||||
<h3 class="title">{{ getSkillName(active_skill) }}</h3>
|
<h3 class="title">{{ getSkillName(active_skill) }}</h3>
|
||||||
<progress class="progress is-info" value="" max=""></progress>
|
<progress class="progress is-info" value="" max=""></progress>
|
||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
<div class="column is-3 is-flex" v-for="item in static.items | filterBy active_skill in 'skills'">
|
<template v-for="item in static.items | filterBy active_skill in 'skills'">
|
||||||
<div class="card is-fullwidth is-flex eq-line">
|
<div class="column is-3 is-flex" v-if="!(hideCompleted && isCompleted(item))">
|
||||||
<header class="card-header">
|
<div class="card is-fullwidth is-flex eq-line">
|
||||||
<p class="card-header-title">
|
<header class="card-header">
|
||||||
{{ item.name }}
|
<p class="card-header-title">
|
||||||
</p>
|
{{ item.name }}
|
||||||
</header>
|
</p>
|
||||||
<div class="card-content eq-line is-flex">
|
</header>
|
||||||
<div class="content is-flex">
|
<div class="card-content eq-line is-flex">
|
||||||
<div class="columns source">
|
<div class="content is-flex">
|
||||||
<div class="column">
|
<div class="columns source">
|
||||||
<div class="">{{ item.source }}</div>
|
<div class="column">
|
||||||
|
<div v-if="!hideSpoilers">{{ item.source }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
||||||
|
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa"
|
||||||
|
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
||||||
|
</span>
|
||||||
|
<span>{{ static.bundles[bundle_id].name }}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
<p class="control">
|
<div class="card-footer-item">
|
||||||
<a class="button is-fullwidth" v-for="bundle_id in item.bundles"
|
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
||||||
v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
|
<span class="tag is-primary is-text-centered"
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
|
v-for="season in static.seasons | filterByArray item.seasons">
|
||||||
<span class="icon">
|
{{ season.name }}
|
||||||
<i class="fa"
|
</span>
|
||||||
v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
|
</div>
|
||||||
</span>
|
</footer>
|
||||||
<span>{{ static.bundles[bundle_id].name }}</span>
|
<footer class="card-footer" v-if="!hideSpoilers">
|
||||||
</a>
|
<div class="card-footer-item">
|
||||||
</p>
|
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
||||||
</div>
|
<span class="tag is-info is-text-centered"
|
||||||
|
v-for="skill in static.skills | filterByArray item.skills">
|
||||||
|
{{ skill.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-calendar-check-o"></i></span>
|
|
||||||
<span class="tag is-primary is-text-centered"
|
|
||||||
v-for="season in static.seasons | filterByArray item.seasons">
|
|
||||||
{{ season.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<div class="card-footer-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-tree"></i></span>
|
|
||||||
<span class="tag is-info is-text-centered"
|
|
||||||
v-for="skill in static.skills | filterByArray item.skills">
|
|
||||||
{{ skill.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
13
main.js
13
main.js
@ -10,7 +10,9 @@ var v = new Vue({
|
|||||||
active_season: "spring",
|
active_season: "spring",
|
||||||
active_skill: "farming",
|
active_skill: "farming",
|
||||||
save_mode: false,
|
save_mode: false,
|
||||||
load_mode: false
|
load_mode: false,
|
||||||
|
hideCompleted: false,
|
||||||
|
hideSpoilers: false
|
||||||
},
|
},
|
||||||
ready: function(){
|
ready: function(){
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
@ -131,6 +133,15 @@ var v = new Vue({
|
|||||||
return this.static.bundles
|
return this.static.bundles
|
||||||
.filter(function(b){ return b.room === roomId; })
|
.filter(function(b){ return b.room === roomId; })
|
||||||
.reduce(function(p, c){ return p + Math.min(v.user_data[c.id].length, c.items_required); }, 0);
|
.reduce(function(p, c){ return p + Math.min(v.user_data[c.id].length, c.items_required); }, 0);
|
||||||
|
},
|
||||||
|
isCompleted: function (item) {
|
||||||
|
for(i=0; i < item.bundles.length; i++){
|
||||||
|
if(!this.isItemInBundle(item.bundles[i], item.id, i)){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user