Add source code (WIP) for now

Author: acsany

build-a-rest-api-frontend/source_code_working/init_database.py

@@ -1,6 +1,5 @@
 from datetime import datetime
 from sqlalchemy.exc import OperationalError
-from sqlalchemy.ext.serializer import loads, dumps
 
 from config import app, db
 from models import Note, Person
@@ -45,6 +44,7 @@
     },
 ]
 
+
 def get_data_from_table(model):
     try:
         data = db.session.query(model).all()
@@ -53,6 +53,7 @@ def get_data_from_table(model):
     except OperationalError:
         return []
 
+
 def create_database(db):
     db.create_all()
     for data in PEOPLE_NOTES:
@@ -70,6 +71,7 @@ def create_database(db):
     db.session.commit()
     print("Created new database")
 
+
 def update_database(db, existing_people, existing_notes):
     db.drop_all()
     db.create_all()
@@ -80,6 +82,7 @@ def update_database(db, existing_people, existing_notes):
     db.session.commit()
     print("Updated existing database")
 
+
 with app.app_context():
     existing_people = get_data_from_table(Person)
     existing_notes = get_data_from_table(Note)
@@ -88,6 +91,3 @@ def update_database(db, existing_people, existing_notes):
         create_database(db)
     else:
         update_database(db, existing_people, existing_notes)
-
-
-

build-a-rest-api-frontend/source_code_working/static/css/notes.css

@@ -0,0 +1,23 @@
+.note-create-card {
+    background-color: var(--secondary-color);
+    padding: 1em;
+}
+
+.note-create-card input {
+    width: 100%;
+}
+
+.note-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.note-card {
+    background-color: blanchedalmond;
+    padding: 1em;
+    margin: 0.6em 0;
+}
+
+.note-content {
+    padding: 0.3em 0;
+}

build-a-rest-api-frontend/source_code_working/static/css/people.css

@@ -0,0 +1,32 @@
+.person-control-card {
+    text-align: right;
+}
+
+.person-control {
+    text-align: left;
+}
+
+.person-create-card {
+    margin-right: 1em;
+}
+
+.person-create-card,
+.person-control-card.editing {
+    background-color: var(--secondary-color);
+    padding: 1em;
+}
+
+.person-create-card input,
+.person-control-card input {
+    width: 100%;
+}
+
+.people-list {
+    margin-bottom: 1.3em;
+}
+
+.person-card {
+    border-left: 0.3em solid var(--main-color);
+    padding: 0.3em 1em;
+    margin: 1em 0;
+}

build-a-rest-api-frontend/source_code_working/static/css/style.css

@@ -0,0 +1,80 @@
+:root {
+    --bg-color: white;
+    --main-color: coral;
+    --secondary-color: lavenderblush;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    color: var(--main-color);
+    font-size: 1.3em;
+    font-family: sans-serif;
+    display: grid;
+    justify-content: center;
+}
+
+h2 {
+    margin: 0;
+    padding-bottom: 0.3em;
+}
+
+hr {
+    border: 1px solid var(--main-color);
+    border-bottom: none;
+}
+
+label {
+    display: block;
+}
+
+label span {
+    min-width: 9ch;
+    display: inline-block;
+}
+
+input {
+    border: 1px solid var(--main-color);
+    color: inherit;
+    padding: 0.3em;
+}
+
+.hidden {
+    display: none;
+}
+
+.editing {
+    background-color: var(--secondary-color) !important;
+}
+
+button,
+.button {
+    background-color: var(--main-color);
+    border: 1px solid var(--main-color);
+    color: var(--bg-color);
+    cursor: pointer;
+    font-size: 0.6em;
+    font-weight: bold;
+    margin: 0.3em 0;
+    padding: 0.3em 1.3em;
+    text-transform: uppercase;
+    min-width: 23ch;
+}
+
+button:hover {
+    background-color: var(--bg-color);
+    color: var(--main-color);
+}
+
+.button {
+    background-color: transparent;
+    color: var(--main-color);
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--main-color);
+    color: var(--bg-color);
+}

build-a-rest-api-frontend/source_code_working/static/js/debug.js

@@ -0,0 +1,34 @@
+import { getData } from "./request.js";
+
+export class DebugForm {
+  constructor() {
+    this.debugCard = document.querySelector(".debug-card");
+    this.form = this.debugCard.querySelector(".debug-form");
+    this.clearButton = this.form.querySelector("button[data-action='clear']");
+    this.clearButton.addEventListener(
+      "click",
+      this.handleClearClick.bind(this)
+    );
+    this.sendButton = this.form.querySelector("button[data-action='read']");
+    this.sendButton.addEventListener("click", this.handleSendClick.bind(this));
+  }
+
+  handleClearClick(event) {
+    event.preventDefault();
+    let code = this.debugCard.querySelector("code");
+    code.innerText = "";
+  }
+
+  handleSendClick(event) {
+    event.preventDefault();
+    const input = document.querySelector(".debug-card input");
+    const endpoint = input.value;
+    getData(endpoint, this.showResponse);
+  }
+
+  showResponse(data) {
+    const debugCard = document.querySelector(".debug-card");
+    let code = debugCard.querySelector("code");
+    code.innerText = data;
+  }
+}

build-a-rest-api-frontend/source_code_working/static/js/index.js

@@ -0,0 +1,12 @@
+import { People } from "./people.js";
+import { Notes } from "./notes.js";
+import { DebugForm } from "./debug.js";
+
+function main() {
+  new People();
+  new Notes();
+  const debug = new DebugForm();
+  debug.showResponse("");
+}
+
+main();

build-a-rest-api-frontend/source_code_working/static/js/notes.js

@@ -0,0 +1,55 @@
+import { sendForm } from "./request.js";
+
+export class Notes {
+  constructor() {
+    this.allNoteLists = document.querySelectorAll(".note-list");
+    this.allNotes = document.querySelectorAll(".note-card");
+    this.activateAllCreateForms();
+  }
+
+  activateAllCreateForms() {
+    this.allNoteLists.forEach((noteList) => {
+      const personCard = noteList.closest(".person-card");
+      const personID = personCard.getAttribute("data-person-id");
+      new NoteCreateForm(noteList, personID);
+    });
+  }
+}
+
+export class NoteCreateForm {
+  constructor(noteList, personID) {
+    this.noteList = noteList;
+    this.personID = personID;
+    this.form = this.noteList.querySelector(".note-create-card form");
+    this.createButton = this.form.querySelector(
+      "button[data-action='create']"
+    );
+    this.createButton.addEventListener(
+      "click",
+      this.handleCreateClick.bind(this)
+    );
+    this.connectPerson();
+  }
+
+  connectPerson() {
+    let fieldPersonID = this.form.querySelector("input[name='person_id']");
+    fieldPersonID.setAttribute("value", this.personID);
+  }
+
+  handleCreateClick(event) {
+    event.preventDefault();
+    sendForm(this.form, "POST", "/api/notes", this.addNoteToList);
+    this.form.reset();
+  }
+
+  addNoteToList(rawData) {
+    const data = JSON.parse(rawData);
+    const noteList = document
+      .querySelector("[data-person-id= '" + data.person_id + "']")
+      .querySelector(".note-list");
+    const newNoteCard = document.querySelector(".note-card").cloneNode(true);
+    newNoteCard.querySelector(".note-content").textContent = data.content;
+    newNoteCard.setAttribute("data-note-id", data.id);
+    noteList.insertBefore(newNoteCard, noteList.children[1]);
+  }
+}