kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

Merge pull request #5 from kihashi/master

Browse Source 
Add basic Data Binding
This commit is contained in:
John Cleaver 2016-03-21 00:16:52 -04:00
commit 2b22192238
3 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -51,7 +51,7 @@
<div class="panel-body">
<p>{{ item.source }}</p>
<div class="button-area">
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
</div>
</div>
<div class="panel-footer">
@ -93,8 +93,18 @@
<div role="tabpanel" class="tab-pane" id="ab-list">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<form class="form-inline">
<div class="form-group">
<label for="search">Filter</label>
<input type="text" class="form-control" id="search" v-model="search_name" />
</div>
</form>
</div>
</div>
<div class="row row-eq-height">
<template v-for="item in static.items | orderBy 'name'">
<template v-for="item in static.items | orderBy 'name' | filterBy search_name in 'name'">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
@ -103,7 +113,7 @@
<div class="panel-body">
<p>{{ item.source }}</p>
<div class="button-area">
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
</div>
</div>
<div class="panel-footer">
@ -157,7 +167,7 @@
<div class="panel-body">
<p>{{ item.source }}</p>
<div class="button-area">
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
</div>
</div>
<div class="panel-footer">
@ -215,7 +225,7 @@
<div class="panel-body">
<p>{{ item.source }}</p>
<div class="button-area">
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
</div>
</div>
<div class="panel-footer">

4
main.css
View File

@ -95,3 +95,7 @@
.footer-text{
flex-grow: 1;
}
form{
margin-bottom: 1rem;
}

16
main.js
View File

@ -3,10 +3,16 @@ var v = new Vue({
data:{
debug: true,
static: null,
user_data: []
user_data: [],
btnChecked: 'btn-success',
btnUnchecked: 'btn-warning',
boxChecked: 'glyphicon-check',
boxUnchecked: 'glyphicon-unchecked'
},
created: function(){
this.fetchData();
},
ready: function(){
this.fetchData();
$('.list-group-item').on('click', function() {
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
@ -18,8 +24,14 @@ var v = new Vue({
this.$http.get('bundles.json', function(data, status, response){
if(status == 200){
this.static = data;
for(var i = 0; i < this.static.items.length; i++){
this.user_data.push(false);
}
}
});
},
completeItem: function(itemId){
this.user_data.$set(itemId, !this.user_data[itemId]);
}
}
});