express-generator-typescript
Version:
Generate new Express applications similar to express-generate which but sets it up to use TypeScript instead
133 lines (123 loc) • 3.5 kB
HTML
<html lang="en">
<!-- Head -->
<head>
<meta charset="UTF-8">
<title>Users</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/users.css" />
<!-- Handlebars -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</head>
<!-- Body -->
<body>
<!-- Add Users -->
<div class="users-column add-user-col">
<div class="column-header">
Add User:
</div>
<div>
<input
id="name-input"
type="text"
class="form-control"
placeholder="Name"
/>
</div>
<div>
<input
id="email-input"
type="email"
class="form-control"
placeholder="Email"
/>
</div>
<div>
<button
id="add-user-btn"
class="btn btn-success"
>
Add
</button>
</div>
</div>
<!-- Display Users -->
<div class="users-column">
<div class="column-header">
Users:
</div>
<div id="all-users-anchor"></div>
<script
id="all-users-template"
type="text/x-handlebars-template"
>
{{#each users}}
<div class="user-display-ele">
<div class="normal-view">
<div><b>Name:</b> {{name}}</div>
<div><b>Email:</b> {{email}}</div>
<div><b>Created:</b> {{createdFormatted}}</div>
<button
type="button"
class="btn btn-primary edit-user-btn"
data-user-id="{{id}}"
>
Edit
</button>
<button
class="btn btn-danger delete-user-btn"
data-user-id="{{id}}"
>
Delete
</button>
</div>
<div class="edit-view">
<div>
Name:
<input
type="text"
class="form-control name-edit-input"
value="{{name}}"
/>
</div>
<div class="email-edit">
Email:
<input
type="email"
class="form-control email-edit-input"
value="{{email}}"
/>
</div>
<button
class="btn btn-primary submit-edit-btn"
data-user-id="{{id}}"
data-user-created="{{created}}"
>
Submit
</button>
<button
class="btn btn-secondary cancel-edit-btn"
data-user-id="{{id}}"
>
Cancel
</button>
</div>
</div>
{{/each}}
</script>
</div>
</body>
<script src="scripts/http.js"></script>
<script src="scripts/users.js"></script>
</html>