From 71e3c478dcbe5f8f913af26fc937fba55dcf0bd2 Mon Sep 17 00:00:00 2001 From: The17thDoctor Date: Thu, 30 Mar 2023 19:28:40 +0200 Subject: [PATCH] Sort fonctionnel --- components/main-controller.riot | 6 +- components/school.riot | 93 ++++++++++++----- index.html | 2 +- javascript/fili-info.js | 44 ++++----- javascript/main-controller.js | 26 +++-- javascript/school-info.js | 16 +-- javascript/school.js | 170 ++++++++++++++++++++------------ javascript/search.js | 28 +++--- 8 files changed, 236 insertions(+), 149 deletions(-) diff --git a/components/main-controller.riot b/components/main-controller.riot index 7bf37ec..84b9374 100644 --- a/components/main-controller.riot +++ b/components/main-controller.riot @@ -9,7 +9,7 @@
- +
@@ -21,13 +21,15 @@ //Initial state this.state = { course: null, + updating: false, shouldShowInfos: false } }, updateCourse(course){ this.update({ course: course, - shouldShowInfos: course != null + shouldShowInfos: course != null, + updating: !this.state.updating }) } } diff --git a/components/school.riot b/components/school.riot index 7ee2392..6a3d36d 100644 --- a/components/school.riot +++ b/components/school.riot @@ -13,11 +13,12 @@ - - - - - + @@ -39,18 +40,18 @@ return PAPI.fetchEtablissement(course.fili, course.sousfili, course.soussousfili); } + const SORT_TABLE = [ + {name: "Nom", id: "g_ea_lib_vx"}, + {name: "Ville", id: "ville_etab"}, + {name: "Département", id: "dep"}, + {name: "Moyenne", id: "moyenne"}, + {name: "Sélectivité", id: "taux_acces_ens"} + ] + export default function search() { return { - onBeforeMount(props, state) { - state = { - items: null, - breakCycle: false, - ascOrder: true - } - }, - onUpdated(props, state) { - if (!props.shouldShowInfos || state.breakCycle) return - fetchEtablissement(props.course).then((response) => { + updateList() { + fetchEtablissement(this.props.course).then((response) => { response.forEach(etablissement => { // calcul la moyenne let pct_sansmention = etablissement.fields.pct_sansmention @@ -64,23 +65,61 @@ etablissement.fields.moyenne = ((pct_TBF*19)+(pct_TB*17)+(pct_B*15)+(pct_AB*13)+(pct_sansmention*11))/100 }) - state.breakCycle = true this.update({ - items: response + items: response, + parentUpdate: this.props.parentUpdate }) - state.breakCycle = false }) }, - sort(e){ - console.log("sort") - console.log(e.target) - if (this.state.ascOrder){ - this.state.items.sort((etablissement1, etablissement2)=>etablissement2.fields[order]-etablissement1.fields[order])) - } else { - this.state.items.sort((etablissement1, etablissement2)=>etablissement1.fields[order]-etablissement2.fields[order])) + sortList(sortBy) { + //Si la liste est déjà triée par la bonne catégorie, on l'inverse + if (sortBy == this.state.sortBy) { + this.state.items.reverse() + } + //Sinon on l'ordonne par la nouvelle catégorie (ascendant par défaut) + else { + this.state.sortBy = sortBy + + switch (sortBy) { + case SORT_TABLE[3].id: + case SORT_TABLE[4].id: { + this.state.items.sort((a, b) => { + if (a.fields[sortBy] > b.fields[sortBy]) return 1 + else return -1 + }) + break + } + + default: { + this.state.items.sort((a, b) => { + return (a.fields[sortBy]).localeCompare(b.fields[sortBy]) + }) + break + } + } } - this.state.ascOrder=!this.state.ascOrder - this.update() + + this.update({ + items: this.state.items + }) + }, + onBeforeMount(props, state) { + state = { + items: null, + breakCycle: false, + sortBy: null, + parentUpdate: null, + sortFields: null + } + }, + onMounted(props, state) { + this.update({ + sortFields: SORT_TABLE + }) + }, + onUpdated(props, state) { + if (!props.shouldShowInfos || state.parentUpdate == props.parentUpdate) return + this.updateList() } } } diff --git a/index.html b/index.html index 41f24d7..7b79d06 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + diff --git a/javascript/fili-info.js b/javascript/fili-info.js index a84ba1c..b0bf782 100644 --- a/javascript/fili-info.js +++ b/javascript/fili-info.js @@ -11,54 +11,54 @@ var filiInfo = { }, onUpdated(props, state) {} }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.IF, evaluate: _scope => _scope.props.shouldShowInfos, - redundantAttribute: 'expr1500', - selector: '[expr1500]', - template: template('

/ \r\n / \r\n

Moyenne des admis

Nombre de formations

Capacité

Sélectivité

', [{ - redundantAttribute: 'expr1501', - selector: '[expr1501]', + redundantAttribute: 'expr0', + selector: '[expr0]', + template: template('

/ \r\n / \r\n

Moyenne des admis

Nombre de formations

Capacité

Sélectivité

', [{ + redundantAttribute: 'expr1', + selector: '[expr1]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.props.course.fili }] }, { - redundantAttribute: 'expr1502', - selector: '[expr1502]', + redundantAttribute: 'expr2', + selector: '[expr2]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.props.course.sousfili }] }, { - redundantAttribute: 'expr1503', - selector: '[expr1503]', + redundantAttribute: 'expr3', + selector: '[expr3]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.props.course.soussousfili }] }, { - redundantAttribute: 'expr1504', - selector: '[expr1504]', + redundantAttribute: 'expr4', + selector: '[expr4]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.state.average }] }, { - redundantAttribute: 'expr1505', - selector: '[expr1505]', + redundantAttribute: 'expr5', + selector: '[expr5]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.state.courseNumber }] }, { - redundantAttribute: 'expr1506', - selector: '[expr1506]', + redundantAttribute: 'expr6', + selector: '[expr6]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, @@ -70,24 +70,24 @@ var filiInfo = { evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr1507', - selector: '[expr1507]' + redundantAttribute: 'expr7', + selector: '[expr7]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr1508', - selector: '[expr1508]' + redundantAttribute: 'expr8', + selector: '[expr8]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr1509', - selector: '[expr1509]' + redundantAttribute: 'expr9', + selector: '[expr9]' }]) }]), name: 'fili-info' diff --git a/javascript/main-controller.js b/javascript/main-controller.js index 94634fc..44707ad 100644 --- a/javascript/main-controller.js +++ b/javascript/main-controller.js @@ -5,17 +5,19 @@ var mainController = { //Initial state this.state = { course: null, + updating: false, shouldShowInfos: false }; }, updateCourse(course) { this.update({ course: course, - shouldShowInfos: course != null + shouldShowInfos: course != null, + updating: !this.state.updating }); } }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'search', @@ -25,8 +27,8 @@ var mainController = { name: 'updateCourse', evaluate: _scope => _scope.updateCourse }], - redundantAttribute: 'expr1334', - selector: '[expr1334]' + redundantAttribute: 'expr125', + selector: '[expr125]' }, { type: bindingTypes.TAG, getComponent: getComponent, @@ -41,14 +43,18 @@ var mainController = { name: 'shouldShowInfos', evaluate: _scope => _scope.state.shouldShowInfos }], - redundantAttribute: 'expr1335', - selector: '[expr1335]' + redundantAttribute: 'expr126', + selector: '[expr126]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'school', slots: [], attributes: [{ + type: expressionTypes.ATTRIBUTE, + name: 'parentUpdate', + evaluate: _scope => _scope.state.updating + }, { type: expressionTypes.ATTRIBUTE, name: 'course', evaluate: _scope => _scope.state.course @@ -57,16 +63,16 @@ var mainController = { name: 'shouldShowInfos', evaluate: _scope => _scope.state.shouldShowInfos }], - redundantAttribute: 'expr1336', - selector: '[expr1336]' + redundantAttribute: 'expr127', + selector: '[expr127]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'school-info', slots: [], attributes: [], - redundantAttribute: 'expr1337', - selector: '[expr1337]' + redundantAttribute: 'expr128', + selector: '[expr128]' }]), name: 'main-controller' }; diff --git a/javascript/school-info.js b/javascript/school-info.js index 241673e..1f1aaf8 100644 --- a/javascript/school-info.js +++ b/javascript/school-info.js @@ -10,14 +10,14 @@ var schoolInfo = { this.update(); } }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.IF, evaluate: _scope => _scope.state.enabled, - redundantAttribute: 'expr9', - selector: '[expr9]', - template: template('

', [{ - redundantAttribute: 'expr10', - selector: '[expr10]', + redundantAttribute: 'expr10', + selector: '[expr10]', + template: template('

', [{ + redundantAttribute: 'expr11', + selector: '[expr11]', expressions: [{ type: expressionTypes.EVENT, name: 'onclick', @@ -29,8 +29,8 @@ var schoolInfo = { evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr11', - selector: '[expr11]' + redundantAttribute: 'expr12', + selector: '[expr12]' }]) }]), name: 'school-info' diff --git a/javascript/school.js b/javascript/school.js index 07a7e84..320cd7d 100644 --- a/javascript/school.js +++ b/javascript/school.js @@ -44,15 +44,28 @@ class PAPI { async function fetchEtablissement(course) { return PAPI.fetchEtablissement(course.fili, course.sousfili, course.soussousfili); } +const SORT_TABLE = [{ + name: "Nom", + id: "g_ea_lib_vx" +}, { + name: "Ville", + id: "ville_etab" +}, { + name: "Département", + id: "dep" +}, { + name: "Moyenne", + id: "moyenne" +}, { + name: "Sélectivité", + id: "taux_acces_ens" +}]; var school = { css: null, exports: function search() { return { - onBeforeMount(props, state) { - }, - onUpdated(props, state) { - if (!props.shouldShowInfos || state.breakCycle) return; - fetchEtablissement(props.course).then(response => { + updateList() { + fetchEtablissement(this.props.course).then(response => { response.forEach(etablissement => { // calcul la moyenne let pct_sansmention = etablissement.fields.pct_sansmention; @@ -65,108 +78,135 @@ var school = { // Exemple : Assez bien est entre 12 et 14 donc 13. etablissement.fields.moyenne = (pct_TBF * 19 + pct_TB * 17 + pct_B * 15 + pct_AB * 13 + pct_sansmention * 11) / 100; }); - state.breakCycle = true; this.update({ - items: response + items: response, + parentUpdate: this.props.parentUpdate }); - state.breakCycle = false; }); }, - sort(e) {} + sortList(sortBy) { + //Si la liste est déjà triée par la bonne catégorie, on l'inverse + if (sortBy == this.state.sortBy) { + this.state.items.reverse(); + } + //Sinon on l'ordonne par la nouvelle catégorie (ascendant par défaut) + else { + this.state.sortBy = sortBy; + switch (sortBy) { + case SORT_TABLE[3].id: + case SORT_TABLE[4].id: + { + this.state.items.sort((a, b) => { + if (a.fields[sortBy] > b.fields[sortBy]) return 1;else return -1; + }); + break; + } + default: + { + this.state.items.sort((a, b) => { + return a.fields[sortBy].localeCompare(b.fields[sortBy]); + }); + break; + } + } + } + this.update({ + items: this.state.items + }); + }, + onBeforeMount(props, state) { + }, + onMounted(props, state) { + this.update({ + sortFields: SORT_TABLE + }); + }, + onUpdated(props, state) { + if (!props.shouldShowInfos || state.parentUpdate == props.parentUpdate) return; + this.updateList(); + } }; }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.IF, evaluate: _scope => _scope.props.shouldShowInfos, - redundantAttribute: 'expr693', - selector: '[expr693]', - template: template('
NomVilleDptMoyenneSélectivité + {sortField.name} + sortList(sortField.id)}> + + +
NomVilleDptMoyenneSélectivité
', [{ - redundantAttribute: 'expr694', - selector: '[expr694]', - expressions: [{ - type: expressionTypes.EVENT, - name: 'onclick', - evaluate: _scope => _scope.sort - }] - }, { - redundantAttribute: 'expr695', - selector: '[expr695]', - expressions: [{ - type: expressionTypes.EVENT, - name: 'onclick', - evaluate: _scope => _scope.sort - }] - }, { - redundantAttribute: 'expr696', - selector: '[expr696]', - expressions: [{ - type: expressionTypes.EVENT, - name: 'onclick', - evaluate: _scope => _scope.sort - }] - }, { - redundantAttribute: 'expr697', - selector: '[expr697]', - expressions: [{ - type: expressionTypes.EVENT, - name: 'onclick', - evaluate: _scope => _scope.sort - }] - }, { - redundantAttribute: 'expr698', - selector: '[expr698]', - expressions: [{ - type: expressionTypes.EVENT, - name: 'onclick', - evaluate: _scope => _scope.sort - }] + redundantAttribute: 'expr336', + selector: '[expr336]', + template: template('
', [{ + type: bindingTypes.EACH, + getKey: null, + condition: null, + template: template(' ', [{ + expressions: [{ + type: expressionTypes.TEXT, + childNodeIndex: 0, + evaluate: _scope => [_scope.sortField.name].join('') + }] + }, { + redundantAttribute: 'expr338', + selector: '[expr338]', + expressions: [{ + type: expressionTypes.ATTRIBUTE, + name: 'id', + evaluate: _scope => _scope.sortField.id + }, { + type: expressionTypes.EVENT, + name: 'onclick', + evaluate: _scope => () => _scope.sortList(_scope.sortField.id) + }] + }]), + redundantAttribute: 'expr337', + selector: '[expr337]', + itemName: 'sortField', + indexName: null, + evaluate: _scope => _scope.state.sortFields }, { type: bindingTypes.EACH, getKey: null, condition: null, - template: template(' ', [{ - redundantAttribute: 'expr700', - selector: '[expr700]', + template: template(' ', [{ + redundantAttribute: 'expr340', + selector: '[expr340]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.etablissement.fields.g_ea_lib_vx }] }, { - redundantAttribute: 'expr701', - selector: '[expr701]', + redundantAttribute: 'expr341', + selector: '[expr341]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.etablissement.fields.ville_etab }] }, { - redundantAttribute: 'expr702', - selector: '[expr702]', + redundantAttribute: 'expr342', + selector: '[expr342]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.etablissement.fields.dep }] }, { - redundantAttribute: 'expr703', - selector: '[expr703]', + redundantAttribute: 'expr343', + selector: '[expr343]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.etablissement.fields.moyenne }] }, { - redundantAttribute: 'expr704', - selector: '[expr704]', + redundantAttribute: 'expr344', + selector: '[expr344]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.etablissement.fields.taux_acces_ens }] }]), - redundantAttribute: 'expr699', - selector: '[expr699]', + redundantAttribute: 'expr339', + selector: '[expr339]', itemName: 'etablissement', indexName: null, evaluate: _scope => _scope.state.items diff --git a/javascript/search.js b/javascript/search.js index 5715002..8481acf 100644 --- a/javascript/search.js +++ b/javascript/search.js @@ -144,9 +144,9 @@ var search = { this.updateList(); } }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ - redundantAttribute: 'expr626', - selector: '[expr626]', + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + redundantAttribute: 'expr27', + selector: '[expr27]', expressions: [{ type: expressionTypes.EVENT, name: 'onkeyup', @@ -157,8 +157,8 @@ var search = { evaluate: _scope => _scope.state.placeholder }] }, { - redundantAttribute: 'expr627', - selector: '[expr627]', + redundantAttribute: 'expr28', + selector: '[expr28]', expressions: [{ type: expressionTypes.ATTRIBUTE, name: 'disabled', @@ -172,9 +172,9 @@ var search = { type: bindingTypes.EACH, getKey: null, condition: null, - template: template('', [{ - redundantAttribute: 'expr629', - selector: '[expr629]', + template: template('', [{ + redundantAttribute: 'expr30', + selector: '[expr30]', expressions: [{ type: expressionTypes.ATTRIBUTE, name: 'disabled', @@ -185,24 +185,24 @@ var search = { evaluate: _scope => () => _scope.cruiseForward(_scope.item.name) }] }, { - redundantAttribute: 'expr630', - selector: '[expr630]', + redundantAttribute: 'expr31', + selector: '[expr31]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.item.name }] }, { - redundantAttribute: 'expr631', - selector: '[expr631]', + redundantAttribute: 'expr32', + selector: '[expr32]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.item.count }] }]), - redundantAttribute: 'expr628', - selector: '[expr628]', + redundantAttribute: 'expr29', + selector: '[expr29]', itemName: 'item', indexName: null, evaluate: _scope => _scope.state.items