express-generator-typescript 2.8.1 → 2.9.0

package/lib/template/src/public/scripts/renderUsers.js

@@ -0,0 +1,90 @@
+// ========================================================================= //
+//                                 CONSTANTS                                 //
+// ========================================================================= //
+
+const DateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+const formatDate = (date) => DateFormatter.format(new Date(date));
+
+const HTML_ESCAPES = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+// User data is untrusted, so escape it before it goes into innerHTML
+const esc = (val) => String(val).replace(/[&<>"']/g, (ch) => HTML_ESCAPES[ch]);
+
+// ========================================================================= //
+//                                 FUNCTIONS                                 //
+// ========================================================================= //
+
+/**
+ * Render users
+ */
+function renderUsers(users) {
+  return users
+    .map((user) => {
+      return `
+        <div class="user-display-ele">
+          <div class="normal-view">
+            <div><b>Name:</b> ${esc(user.name)}</div>
+            <div><b>Email:</b> ${esc(user.email)}</div>
+            <div><b>Created:</b> ${esc(formatDate(user.created))}</div>
+            <button
+              type="button"
+              class="btn btn-primary edit-user-btn"
+              data-user-id="${esc(user.id)}"
+            >
+              Edit
+            </button>
+            <button
+              class="btn btn-danger delete-user-btn"
+              data-user-id="${esc(user.id)}"
+            >
+              Delete
+            </button>
+          </div>
+
+          <div class="edit-view">
+            <div>
+              Name:&nbsp;
+              <input
+                type="text"
+                class="form-control name-edit-input"
+                value="${esc(user.name)}"
+              />
+            </div>
+            <div class="email-edit">
+              Email:&nbsp;
+              <input
+                type="email"
+                class="form-control email-edit-input"
+                value="${esc(user.email)}"
+              />
+            </div>
+            <button
+              class="btn btn-primary submit-edit-btn"
+              data-user-id="${esc(user.id)}"
+              data-user-created="${esc(user.created)}"
+            >
+              Submit
+            </button>
+            <button
+              class="btn btn-secondary cancel-edit-btn"
+              data-user-id="${esc(user.id)}"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      `;
+    })
+    .join('');
+}

package/lib/template/src/public/scripts/users.js

@@ -0,0 +1,142 @@
+// ========================================================================= //
+//                                   EXEC                                    //
+// ========================================================================= //
+
+// Start
+displayUsers();
+
+// ========================================================================= //
+//                                 FUNCTIONS                                 //
+// ========================================================================= //
+
+/**
+ * Call api
+ */
+function displayUsers() {
+  Http.get('/api/users/all')
+    .then(checkResponse)
+    .then((resp) => resp.json())
+    .then((resp) => {
+      const allUsersAnchor = document.getElementById('all-users-anchor');
+      allUsersAnchor.innerHTML = renderUsers(resp.users);
+    })
+    .catch(showError);
+}
+
+// Setup event listener for button click
+document.addEventListener('click', (event) => {
+  var ele = event.target;
+  if (ele.matches('#add-user-btn')) {
+    addUser();
+  } else if (ele.matches('.edit-user-btn')) {
+    showEditView(ele.parentNode.parentNode);
+  } else if (ele.matches('.cancel-edit-btn')) {
+    cancelEdit(ele.parentNode.parentNode);
+  } else if (ele.matches('.submit-edit-btn')) {
+    submitEdit(ele);
+  } else if (ele.matches('.delete-user-btn')) {
+    deleteUser(ele);
+  }
+});
+
+/**
+ * Add a new user.
+ */
+function addUser() {
+  var nameInput = document.getElementById('name-input');
+  var emailInput = document.getElementById('email-input');
+  if (!nameInput.value || !emailInput.value) {
+    return;
+  }
+  var data = {
+    user: {
+      name: nameInput.value,
+      email: emailInput.value,
+    },
+  };
+  Http.post('/api/users/add', data)
+    .then(checkResponse)
+    .then(() => {
+      nameInput.value = '';
+      emailInput.value = '';
+      displayUsers();
+    })
+    .catch(showError);
+}
+
+/**
+ * Show edit view.
+ */
+function showEditView(userEle) {
+  var normalView = userEle.getElementsByClassName('normal-view')[0];
+  var editView = userEle.getElementsByClassName('edit-view')[0];
+  normalView.style.display = 'none';
+  editView.style.display = 'block';
+}
+
+/**
+ * Cancel edit.
+ */
+function cancelEdit(userEle) {
+  var normalView = userEle.getElementsByClassName('normal-view')[0];
+  var editView = userEle.getElementsByClassName('edit-view')[0];
+  normalView.style.display = 'block';
+  editView.style.display = 'none';
+}
+
+/**
+ * Submit edit.
+ */
+function submitEdit(ele) {
+  var userEle = ele.parentNode.parentNode;
+  var nameInput = userEle.getElementsByClassName('name-edit-input')[0];
+  var emailInput = userEle.getElementsByClassName('email-edit-input')[0];
+  if (!nameInput.value || !emailInput.value) {
+    return;
+  }
+  var data = {
+    user: {
+      id: ele.getAttribute('data-user-id'),
+      name: nameInput.value,
+      email: emailInput.value,
+      created: ele.getAttribute('data-user-created'),
+    },
+  };
+  Http.put('/api/users/update', data)
+    .then(checkResponse)
+    .then(() => displayUsers())
+    .catch(showError);
+}
+
+/**
+ * Delete a user
+ */
+function deleteUser(ele) {
+  var id = ele.getAttribute('data-user-id');
+  Http.delete('/api/users/delete?id=' + encodeURIComponent(id))
+    .then(checkResponse)
+    .then(() => displayUsers())
+    .catch(showError);
+}
+
+/**
+ * Reject non-2xx responses with the server's error message.
+ */
+function checkResponse(resp) {
+  if (resp.ok) {
+    return resp;
+  }
+  return resp
+    .json()
+    .catch(() => ({}))
+    .then((body) => {
+      throw new Error(body.error || 'Request failed: ' + resp.status);
+    });
+}
+
+/**
+ * Surface a failed request to the user.
+ */
+function showError(err) {
+  alert(err.message);
+}