Created
October 13, 2022 12:44
-
-
Save cdeli-sh/9341048eabcc5862546da7fc06df46ad to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| function data() { | |
| return { | |
| page: 1, | |
| filter: 0, | |
| reports: [], | |
| pageCount: 1, | |
| async refreshData() { | |
| const res = await fetch('/backend/molecul/proxy/report/api?' + | |
| new URLSearchParams({ | |
| 'sent': this.filter, | |
| 'page': this.page | |
| }) | |
| ) | |
| const body = await res.json() | |
| this.reports = body.reports | |
| this.pageCount = body.page_count | |
| console.log(body) | |
| }, | |
| date(str) { | |
| date = new Date(str) | |
| console.log(date) | |
| let d = this.formatNumber(date.getDay()) | |
| let m = this.formatNumber(date.getMonth()) | |
| let y = date.getFullYear() | |
| return `${d}/${m}/${y}` | |
| }, | |
| time(str) { | |
| date = new Date(str) | |
| let h = this.formatNumber(date.getHours()) | |
| let m = this.formatNumber(date.getMinutes()) | |
| return `${h}:${m}` | |
| }, | |
| formatNumber(n) { | |
| if (n < 10) { | |
| return '0' + n | |
| } | |
| return n | |
| } | |
| } | |
| } | |
| </script> | |
| <div x-data="data()" x-init="refreshData"> | |
| <div class="flex justify-between items-center p-4"> | |
| <div class="text-3xl">Rapports (page <span x-text="page"></span>)</div> | |
| <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" | |
| @click="filter ? filter = 0 : filter = 1; refreshData()" | |
| x-text="filter ? 'Voir tout' : 'Voir les rapports validés'"></button> | |
| </div> | |
| <div class="flex flex-col" x-transition> | |
| <template x-for="report in reports"> | |
| <div class="border border-purple-400 p-4" x-transition> | |
| <div class="w-full flex justify-between"> | |
| <div> | |
| Rapport de | |
| <span x-text="report.user.name"></span> <br> | |
| <span x-text="report.mandat && 'Mandat : ' + report.mandat.name"></span> | |
| </div> | |
| <div> | |
| Le <span x-text="date(report.start)"></span> de | |
| <span x-text="time(report.start)"></span> à <span x-text="time(report.end)"></span> | |
| </div> | |
| </div> | |
| <div><span x-text="report.event_id && 'Evènement : ' + report.event.name"></span></div> | |
| </div> | |
| </template> | |
| </div> | |
| <template x-if="pageCount > 1"> | |
| <div class="flex w-full justify-between items-center p-4"> | |
| <div>Page <span x-text="page"></span> sur <span x-text="pageCount"></span></div> | |
| <div class="flex space-x-2"> | |
| <button type="button" | |
| class="bg-blue-500 hover:bg-blue-700 disabled:bg-slate-600 text-white font-bold py-2 px-4 rounded" | |
| @click="page != 1 && page--; refreshData()" class="" :disabled="page == 1">Page précédente</button> | |
| <button type="button" | |
| class="bg-blue-500 hover:bg-blue-700 disabled:bg-slate-600 text-white font-bold py-2 px-4 rounded" | |
| @click="page != pageCount && page++; refreshData()" class="" :disabled="page == pageCount">Page | |
| suivante</button> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="//unpkg.com/alpinejs"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment