Skip to content

Commit

Permalink
final
Browse files Browse the repository at this point in the history
  • Loading branch information
@phiphan148
phiphan148 committed Sep 12, 2018
1 parent 9993287 commit 197f6d9
Show file tree
Hide file tree
Showing 16 changed files with 405 additions and 290 deletions.
39 changes: 33 additions & 6 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,47 @@
<template>
<div id="app">
<Header></Header>
<Footer></Footer>
</div>
<div id="app">
<Header></Header>
<Footer></Footer>
</div>
</template>
<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
components: {Header, Footer},
data(){
data() {
return {
senator: [],
}
},
created: function () {
this.getData();
},
methods: {
getData() {
let pathSenate = 'senate';
let url = '';
let currentPage = window.location.href;
if (currentPage.includes(pathSenate)) {
url = 'https://api.myjson.com/bins/1eja30';
} else {
url = 'https://api.myjson.com/bins/j83do';
}
fetch(url)
.then(response => response.json())
.then((jsonData) => {
let data = jsonData;
this.senator = data.results[0].members;
this.senator.forEach(mem => {
mem.fullname = (mem.first_name + ' ' + mem.middle_name + ' ' + mem.last_name).replace(null, '');
});
this.$store.commit('setCurrentSenator', this.senator);
console.log(this.$store.state.senator);
});
},
},
}
</script>
<style>
</style>
50 changes: 50 additions & 0 deletions src/components/BottomTable.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div>
<h5>Least Engaged (Top 10% of least votes with party)</h5>
<table class="table table-bordered mt-3 table-hover">
<thead class="thead-dark">
<tr>
<th v-for="label in TopTableHeader">{{label}}</th>
</tr>
</thead>
<tbody>
<tr v-for="mem in getDataBottom">
<td>{{mem.fullname}}</td>
<td>{{mem.missed_votes}}</td>
<td>{{mem.missed_votes_pct}}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
name: "BottomTable",
data() {
return {
TopTableHeader: ['Full name', 'Number of missed votes', 'Percent missed votes'],
BottomTableBody: [],
}
},
props: {
senatorB: {
type: Array,
required: true,
},
},
computed: {
getDataBottom() {
let length = this.senatorB.length * 0.1;
return this.senatorB.slice(0, length).sort(function (a, b) {
return b.missed_votes - a.missed_votes
});
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
50 changes: 50 additions & 0 deletions src/components/BottomTableLoyalty.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div>
<h5>Most Engaged (Top 10% of most votes with party)</h5>
<table class="table table-bordered mt-3 table-hover">
<thead class="thead-dark">
<tr>
<th v-for="label in TopTableHeaderL">{{label}}</th>
</tr>
</thead>
<tbody>
<tr v-for="mem in getDataBottom">
<td>{{mem.fullname}}</td>
<td>{{Math.round(((mem.total_votes - mem.missed_votes) * mem.votes_with_party_pct) / 100)}}</td>
<td>{{mem.votes_with_party_pct}}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
name: "BottomTableLoyalty",
data() {
return {
TopTableHeaderL: ['Full name', 'Number of party votes', 'Percent party votes'],
BottomTableBody: [],
}
},
props: {
senatorB: {
type: Array,
required: true,
},
},
computed: {
getDataBottom() {
let length = this.senatorB.length * 0.1;
return this.senatorB.slice(0, length).sort(function (a, b) {
return a.votes_with_party_pct - b.votes_with_party_pct
});
},
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
76 changes: 27 additions & 49 deletions src/components/FilterData.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
<div class="col-lg-2 col-md-6 col-sm-12 col-9 mt-2">
<select class="container-fluid" v-model="selectarr">
<option value=''>Choose state</option>
<option v-for="state in statearr">{{state}}</option>
<option v-for="state in getStates">{{state}}</option>
</select>
</div>
<div class="input-group col-lg-3 col-md-6 col-sm-12 col-9">
<input v-model="searchName" id="search-data" class="form-control py-2" type="search"
placeholder="Search name">
placeholder="Search name">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
Expand All @@ -27,81 +27,59 @@
</template>

<script>
import DataTable from './DataTable'
import DataTable from './DataTable';
export default {
name: "FilterData",
components: {DataTable},
data () {
data() {
return {
senatorF: [],
checkarr: [],
selectarr: '',
statearr: [],
searchName: '',
tempt: [],
}
},
created: function(){
this.getData();
},
computed: {
senator() {
return this.$store.state.senator;
},
getStates() {
this.senator.forEach(mem => {
if (!this.statearr.includes(mem.state)) {
this.statearr.push(mem.state);
}
});
return this.statearr;
},
displayParty() {
if (this.checkarr.length == 0 && this.selectarr == '') {
return this.searchData(this.senatorF);
return this.searchData(this.senator);
} else if (this.checkarr.length != 0 && this.selectarr == '') {
this.tempt = this.senatorF.filter(j => this.checkarr.includes(j.party));
this.tempt = this.senator.filter(j => this.checkarr.includes(j.party));
return this.searchData(this.tempt);
} else if (this.selectarr != '' && this.checkarr.length == 0) {
this.tempt = this.senatorF.filter(j => this.selectarr.includes(j.state));
this.tempt = this.senator.filter(j => this.selectarr.includes(j.state));
return this.searchData(this.tempt)
} else {
let memFilter= [];
for (let j = 0; j < this.senatorF.length; j++) {
let memFilter = [];
for (let j = 0; j < this.senator.length; j++) {
for (let i = 0; i < this.checkarr.length; i++) {
if (this.senatorF[j].party == this.checkarr[i] && this.senatorF[j].state == this.selectarr) {
memFilter.push(this.senatorF[j]);
if (this.senator[j].party == this.checkarr[i] && this.senator[j].state == this.selectarr) {
memFilter.push(this.senator[j]);
}
}
}
return this.searchData(memFilter);
}
},
}
},
methods: {
getData() {
let pathSenate = 'senate';
let url = '';
let currentPage = window.location.href;
if (currentPage.includes(pathSenate)) {
url = 'https://api.myjson.com/bins/1eja30';
} else {
url = 'https://api.myjson.com/bins/j83do';
}
fetch(url)
.then(response => response.json())
.then((jsonData) => {
let data = jsonData;
this.senatorF = data.results[0].members;
this.senatorF.forEach(mem => {
mem.fullname = (mem.first_name + ' ' + mem.middle_name + ' ' + mem.last_name).replace(null, '');
});
this.getStates();
});
},
getStates: function () {
console.log(this.senatorF)
this.senatorF.forEach(mem => {
if (!this.statearr.includes(mem.state)) {
this.statearr.push(mem.state);
console.log('addrow')
}
});
},
searchData: function(array){
searchData: function (array) {
return array.filter(mem => mem.fullname.toLowerCase().includes(this.searchName.toLowerCase()) || mem.votes_with_party_pct.toString().includes(this.searchName.toLowerCase()))
}
},
},
}
};
</script>
Expand Down
Loading

0 comments on commit 197f6d9

Please sign in to comment.