From e6dd6a9f1bfdac6416ca362dc1a5a6e4b582a003 Mon Sep 17 00:00:00 2001
From: Xtina <2006peacegypsy@gmail.com>
Date: Tue, 20 Nov 2018 16:37:59 -0800
Subject: [PATCH 01/12] starting
---
index.css | 8 ++++
index.html | 45 +++++++++++++++++++++++
index.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 159 insertions(+)
create mode 100644 index.css
create mode 100644 index.html
create mode 100644 index.js
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..17e6ca79
--- /dev/null
+++ b/index.css
@@ -0,0 +1,8 @@
+body {
+ font-family: sans-serif;
+}
+
+main {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..0a1916c5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+ Sites with axios
+
+
+
+
+
+
+
+ TAKE A TREK! A whole big world is waiting!
+
+
+
+ List-o-Trips
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..dc20fd6c
--- /dev/null
+++ b/index.js
@@ -0,0 +1,106 @@
+const URL = "https://trektravel.herokuapp.com/trips";
+
+//
+// Status Management
+//
+const reportStatus = message => {
+ $("#status-message").html(message);
+};
+
+const reportError = (message, errors) => {
+ let content = `${message}
`;
+ for (const field in errors) {
+ for (const problem of errors[field]) {
+ content += `- ${field}: ${problem}
`;
+ }
+ }
+ content += "
";
+ reportStatus(content);
+};
+
+//
+// Loading Pets
+//
+const loadTrips = () => {
+ reportStatus("Loading trips...");
+
+ const tripList = $("#trip-list");
+ tripList.empty();
+
+ axios
+ .get(URL)
+ .then(response => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+ response.data.forEach(trip => {
+ tripList.append(` `).addClass("showTrip");
+ });
+ })
+ .catch(error => {
+ reportStatus(
+ `Encountered an error while loading trips: ${error.message}`
+ );
+ console.log(error);
+ });
+};
+
+//
+// Creating Pets
+//
+const readFormData = () => {
+ const parsedFormData = {};
+
+ const nameFromForm = $(`#pet-form input[name="name"]`).val();
+ parsedFormData["name"] = nameFromForm ? nameFromForm : undefined;
+
+ const ageFromForm = $(`#pet-form input[name="age"]`).val();
+ parsedFormData["age"] = ageFromForm ? ageFromForm : undefined;
+
+ const ownerFromForm = $(`#pet-form input[name="owner"]`).val();
+ parsedFormData["owner"] = ownerFromForm ? ownerFromForm : undefined;
+
+ return parsedFormData;
+};
+
+const clearForm = () => {
+ $(`#pet-form input[name="name"]`).val("");
+ $(`#pet-form input[name="email"]`).val("");
+ $(`#pet-form input[name="trip-name"]`).val("");
+};
+
+const createTrip = event => {
+ // Note that createPet is a handler for a `submit`
+ // event, which means we need to call `preventDefault`
+ // to avoid a page reload
+ event.preventDefault();
+
+ const tripData = readFormData();
+ console.log(tripData);
+
+ reportStatus("Sending trip data...");
+
+ axios
+ .post(URL, tripData)
+ .then(response => {
+ reportStatus(`Successfully reserved a trip with ID ${response.data.id}!`);
+ clearForm();
+ })
+ .catch(error => {
+ console.log(error.response);
+ if (error.response.data && error.response.data.errors) {
+ reportError(
+ `Encountered an error: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ reportStatus(`Encountered an error: ${error.message}`);
+ }
+ });
+};
+
+//
+// OK GO!!!!!
+//
+$(document).ready(() => {
+ $("#load").click(loadTrips);
+ $("#pet-form").submit(createTrip);
+});
From a82ca5016b7ce6d43561a7dabaee7c5b7d886c0a Mon Sep 17 00:00:00 2001
From: Xtina <2006peacegypsy@gmail.com>
Date: Tue, 20 Nov 2018 17:56:00 -0800
Subject: [PATCH 02/12] trip list working, created links, then changed to fake
links, finding alt way to show trip info
---
index.html | 4 ++++
index.js | 19 ++++++++++++++++---
2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 0a1916c5..a3ca84e2 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,10 @@ List-o-Trips
+
+