initial commit

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

README.md

@@ -0,0 +1,5 @@
+# Integreatly Walkthrough Applications
+
+Repo containing any custom Integreatly applications used in walkthroughs
+
+- [Basic CRUD Application](./fruit-app)

fruit-app/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:12-alpine
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm ci --only=production
+
+COPY . .
+
+EXPOSE 8080
+
+ENTRYPOINT [ "node", "server.js" ]

fruit-app/README.md

@@ -0,0 +1,10 @@
+# Fruit CRUD Application
+
+Very basic CRUD application for fruit
+
+## Running locally
+
+- Install dependencies, `npm install`
+- Run the server, `npm run`
+
+When `client.js` has been modified, run `npm run client:build`

fruit-app/client.js

@@ -0,0 +1,69 @@
+const io = require('socket.io-client');
+
+fetch('/api/fruits')
+  .then(resp => resp.json())
+  .then(fruit => refreshList(fruit))
+  .then(() => {
+    const socket = io();
+
+    socket.on('fruit', (fruitList) => {
+      refreshList(fruitList);
+    });
+});
+
+function handleCreateFruit(e) {
+  e.preventDefault();
+
+  const fruitNameElem = document.getElementById('fruitInput');
+  const fruitName = fruitNameElem.value;
+
+  fetch('/api/fruits', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ name: fruitName })
+  });
+
+  fruitNameElem.value = '';
+
+  return false;
+}
+
+const fruitForm = document.getElementById('fruitForm');
+fruitForm.addEventListener('submit', handleCreateFruit);
+
+function buildFruitElem(fruit) {
+  const fruitElem = document.createElement('tr');
+  const fruitIDElem = document.createElement('td');
+  fruitIDElem.textContent = fruit.id;
+  const fruitNameElem = document.createElement('td');
+  fruitNameElem.textContent = fruit.name;
+  const fruitActionElem = document.createElement('button');
+  fruitActionElem.className = 'pure-button';
+  fruitActionElem.style = 'margin: 5px;'
+  fruitActionElem.textContent = 'Delete';
+  fruitActionElem.onclick = deleteFruit.bind(null, fruit.id);
+
+  fruitElem.appendChild(fruitIDElem);
+  fruitElem.appendChild(fruitNameElem);
+  fruitElem.appendChild(fruitActionElem);
+
+  return fruitElem;
+}
+
+function deleteFruit(fruitID) {
+  fetch(`/api/fruits/${fruitID}`, {
+    method: 'DELETE'
+  });
+}
+
+function refreshList(fruitList) {
+  const fruitListElem = document.getElementById('fruitList');
+  const fruitElems = fruitList.map(f => buildFruitElem(f));
+  // remove existing children
+  while (!!fruitListElem.firstChild) {
+    fruitListElem.removeChild(fruitListElem.firstChild);
+  }
+  fruitElems.forEach(e => fruitListElem.appendChild(e));
+}