ershisan99/flashcards-admin-bot
1
0
Fork 0
mirror of https://github.com/ershisan99/flashcards-admin-bot.git synced 2025-12-16 05:09:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

petite-vue example

Browse Source
This commit is contained in:
Andres
2024-05-28 13:19:27 +02:00
parent 7d55082f4d
commit 4a3aee2d41
2 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -4,12 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<script src="index.js" defer></script>
<script src="https://unpkg.com/petite-vue" defer init></script>
</head> </head>
<body> <body v-scope>
<main class="container"> <main class="container">
<div id="root"></div> <div v-for="group in data" :key="group.id">
<table>
<thead>
<tr>
<th>Имя</th>
<th>Время</th>
<th>Telegram</th>
</tr>
</thead>
<tbody>
<tr v-for="el in group" :key="el.id">
<td>{{ el.name }}</td>
<td style="width: 200px">{{ el.availableTime.from }} - {{ el.availableTime.to }}</td>
<td style="width: 200px">{{ el.tgUsername }}</td>
</tr>
</tbody>
</table>
</div>
</main> </main>
<script src="index.js"></script>
</body> </body>
</html> </html>

26
index.js
View File

@@ -77,29 +77,3 @@ const data = [
}, },
], ],
]; ];
const root = document.getElementById('root');
const html = `<div>${data
.map((group) => {
return `<table><thead>
<tr>
<th>Имя</th>
<th>Время</th>
<th>Telegram</th>
</tr>
</thead>
<tbody>${group
.map((el) => {
return `<tr>
<td >${el.name}</td>
<td style='width: 200px'">${el.availableTime.from} - ${el.availableTime.to}</td>
<td style='width: 200px'>${el.tgUsername}</td>
</tr>`;
})
.join('')}</tbody>
</table>`;
})
.join('')}</div>`;
root.innerHTML = html;