Skip to content
This repository has been archived by the owner on Jul 27, 2024. It is now read-only.

Commit

Permalink
managed to properly connect the progress bar to the data
Browse files Browse the repository at this point in the history
  • Loading branch information
rbenjos committed Jun 28, 2021
1 parent f38d3da commit 25c069b
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 103 deletions.
224 changes: 140 additions & 84 deletions Closure_Front_End/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion Closure_Front_End/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vue3-chart-v2": "^0.8.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
Expand Down
39 changes: 21 additions & 18 deletions Closure_Front_End/src/components/ProgressBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
<br />
<div class="sub">
סך הכל:
<progress class="progress total" v-bind:value="total" max="100">
<progress class="progress total" v-bind:value="len(allcourses,1)+len(allcourses,2)+len(allcourses,3)" max="100">
15%
</progress>
</div>

<div class="sub">
חובה:
<progress class="progress must" v-bind:value="mustValue" max="80">
<progress class="progress must" v-bind:value="len(allcourses,1)" max="80">
15%
</progress>
</div>
Expand All @@ -19,7 +19,7 @@
חובת בחירה:
<progress
class="progress choose_from_list"
v-bind:value="chooseListValue"
v-bind:value="len(allcourses,2)"
max="15"
>
15%
Expand All @@ -28,7 +28,7 @@

<div class="sub">
בחירה:
<progress class="progress choice" v-bind:value="choiceValue" max="30">
<progress class="progress choice" v-bind:value="len(allcourses,3)" max="30">
15%
</progress>
</div>
Expand All @@ -44,10 +44,10 @@ export default {
mandatory: 30,
mand_choice: 20,
choice: 15,
coursesByType: null,
mustValue: null,
chooseListValue: null,
choiceValue: null,
coursesByType: this.groupBy(this.allcourses, "type"),
// mustValue: this.len(coursesByType,1),
// chooseListValue: this.coursesByType[2].length,
// choiceValue: this.coursesByType[3].length,
};
},
Expand All @@ -58,22 +58,25 @@ export default {
return rv;
}, {});
},
len: function(allcourses, index){
return this.groupBy(this.allcourses, "type")[index].length;
}
},
mounted() {
this.coursesByType = this.groupBy(this.allcourses, "type");
this.mustValue = this.coursesByType[1].length;
this.chooseListValue = this.coursesByType[2].length;
this.choiceValue = this.coursesByType[3].length;
console.log(this.coursesByType);
// this.coursesByType = this.groupBy(this.allcourses, "type");
// this.mustValue = this.coursesByType[1].length;
// this.chooseListValue = this.coursesByType[2].length;
// this.choiceValue = this.coursesByType[3].length;
// console.log(this.coursesByType);
},
updated() {
this.coursesByType = this.groupBy(this.allcourses, "type");
this.mustValue = this.coursesByType[1].length;
this.chooseListValue = this.coursesByType[2].length;
this.choiceValue = this.coursesByType[3].length;
console.log(this.coursesByType);
// this.coursesByType = this.groupBy(this.allcourses, "type");
// this.mustValue = this.coursesByType[1].length;
// this.chooseListValue = this.coursesByType[2].length;
// this.choiceValue = this.coursesByType[3].length;
// console.log(this.coursesByType);
},
};
</script>
Expand Down

1 comment on commit 25c069b

@rbenjos
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

by binding directly to methods, i managed to keep the progress bars updated at all times. a certain reduce function was added so i can group the courses by type, and count them easily.

Please sign in to comment.