delete and update convo working

hugoxiong5 · Mar 16, 2020 · 87460ac · 87460ac
1 parent 1d457b6
commit 87460ac
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 49 deletions.
diff --git a/controllers/conversationController.js b/controllers/conversationController.js
@@ -64,7 +64,7 @@ exports.convo_create_post = function(req, res) {
 exports.conversation_list = function(req, res, next) {
 
     Conversation.find({}, 'title language difficulty', function(err, conversations) {
-        if (err) return handleError(err);
+        if(err) console.log(err);
         res.render('peaksay_convos', {conversation_list: conversations}); // IMPORTANT: "conversation-list" is a local variable that will be passed on to the view
 
     });
@@ -75,7 +75,7 @@ exports.conversation_list = function(req, res, next) {
 exports.render_start_screen = function(req, res, next) {
 
     Conversation.find({}, function(err, conversations) {
-        if (err) return handleError(err);
+        if(err) console.log(err);
         res.render('peaksay_layout', {conversation_list: conversations}); // IMPORTANT: "conversation-list" is a local variable that will be passed on to the view
     });
 
@@ -86,20 +86,71 @@ exports.render_start_screen = function(req, res, next) {
 exports.convo_detail = function(req, res) {
 
     Conversation.findById(req.params.id, function(err, convo_this) {
-        if (err) return handleError(err);
+        if(err) console.log(err);
         res.render('peaksay_convo_edit', {convo: convo_this});
     });
 
 };
 
+//edit a conversation
+exports.convo_edit = function(req, res) {
+    console.log("conversation edit function has been called");
+
+    let conversation = new Conversation(
+        {
+            _id: req.params.id,
+            title: req.body.title,
+            language: req.body.language,
+            difficulty: req.body.difficulty,
+            characters: {
+            names: [req.body.character1, req.body.character2],
+            images: ['no image', 'no image'],
+            },
+            lines: [
+            req.body.line1,
+            req.body.line2,
+            req.body.line3,
+            req.body.line4,
+            req.body.line5,
+            req.body.line6,
+            req.body.line7,
+            req.body.line8,
+            req.body.line9,
+            req.body.line10,
+            ],
+            translations: [
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            'no translation',
+            ],
+            audio: [],
+        }
+    );
+
+    console.log(conversation);
+
+    Conversation.findByIdAndUpdate(req.params.id, conversation, {}, function(err, theconvo) {
+        if(err) console.log(err);
+        console.log("conversation " + theconvo.title + " has been updated");
+        res.redirect(theconvo.url);
+    });
+
+}
 
 // delete a conversation
 exports.convo_delete = function(req, res) {
 
     Conversation.findByIdAndDelete(req.body.convoid, function(err) {
         if(err) console.log(err);
         console.log("Conversation deleted!");
-        res.redirect('/peaksay/conversations');
+        res.redirect('/peaksay/sandbox');
     });
 
-};
+};
diff --git a/public/peaksay-form.html b/public/peaksay-form.html
@@ -6,7 +6,11 @@
   </head>
 
   <body>
-    <p>Peaksay: Create New Conversation</p> 
+    <p>Peaksay: Create New Conversation</p>
+
+    <a href='/peaksay/sandbox'>go back</a>
+
+    <br>
 
     <form method="post">
       <ul>

diff --git a/public/scripts.js b/public/scripts.js
@@ -623,7 +623,29 @@ function viewTranslation(evt) {
   }
 }
 
-//#endregion
+
+
+
+// click on edit/delete button (with conversation selected)
+
+function editConvo() {
+  if (conversation._id == undefined) {
+    pingSound.play();
+    document.getElementById('select-popup').classList.toggle('show');
+    return;
+  }
+
+  let id = conversation._id;
+
+  window.location.href = '/peaksay/conversation/' + id;
+
+}
+
+// convo.url + '/delete'
+
+// http://localhost:3000/peaksay/conversation/5e6f9c69a0e60b09d3ffe633
+
+
 
 /*-------------------------------------------------------------------
 8. OPTIONS SCREEN AND START GAME

diff --git a/public/styles.css b/public/styles.css
@@ -12,6 +12,10 @@
   font-size: 1.7vw;
 }
 
+a {
+  text-decoration: none;
+}
+
 /* default flexbox settings */
 .flex-default {
   display: flex;
@@ -77,6 +81,10 @@ li {
   background-color: lightpink;
 }
 
+.btn a:visited {
+  color: white;
+}
+
 /* sets up the background of all Modal Windows, allows clicking outside the window to close it */
 .modal {
   display: none; /* Hidden by default */

diff --git a/routes/index.js b/routes/index.js
@@ -2,9 +2,9 @@ var express = require('express');
 
 var router = express.Router();
 
-/* REDIRECT to main home page (Catalog). */
+/* REDIRECT to Peaksay sandbox */
 router.get('/', function(req, res) {
-  res.redirect('/catalog');
+  res.redirect('/peaksay/sandbox');
 });
 
 module.exports = router;
diff --git a/routes/peaksay-routes.js b/routes/peaksay-routes.js
@@ -29,11 +29,14 @@ router.get('/create', conversation_controller.convo_create_get);
 // // POST request for creating a conversation.
 router.post('/create', conversation_controller.convo_create_post);
 
-// GET request for one conversation at a unique URL.
+// GET request for one conversation at a unique URL: view convo details
 router.get('/conversation/:id', conversation_controller.convo_detail);
 
-// POST request (update/delete?)
-router.post('/conversation/:id', conversation_controller.convo_delete);
+// POST request (update/edit conversation)
+router.post('/conversation/:id', conversation_controller.convo_edit);
+
+// delete a conversation
+router.post('/conversation/:id/delete', conversation_controller.convo_delete);
 
 module.exports = router;
 
diff --git a/views/peaksay_convo_edit.pug b/views/peaksay_convo_edit.pug
@@ -1,31 +1,25 @@
-extends layout
+doctype html
+head
+  meta(charset='utf-8')
+  title Peaksay
 
-block content
   h1 Peaksay: Edit and Delete A Conversation
 
 
   h2= convo.title
 
-
-  form(method='POST' action='')
-    div.form-group
-      input#authorid.form-control(type='hidden',name='convoid', required='true', value=convo._id )
-
-    button.btn.btn-primary(type='submit') Delete
-
+  a(href='/peaksay/sandbox') go back 
+
   hr
-  p
-  //- a(href=author.url+'/delete') Delete author
-
 
-  form
+  form(method='post' action='')
     ul
       li
         label(for='title') Title:
-        input#title(type='text' name='title' required='true' autofocus='')
+        input#title(type='text' name='title' required='true' value=convo.title)
       li
         p Language:
-        input(list='language' name='language' required='true')
+        input(list='language' name='language' required='true' value=convo.language) 
         datalist#language
           option(value='English')
           option(value='Spanish')
@@ -34,7 +28,7 @@ block content
           option(value='Other')
       li
         p Difficulty:
-        input(list='difficulty' name='difficulty' required='true')
+        input(list='difficulty' name='difficulty' required='true' value=convo.difficulty)
         datalist#difficulty
           option(value='A1: Novice 1')
           option(value='A2: Novice 2')
@@ -45,40 +39,52 @@ block content
       br
       li
         label(for='character1') Character 1:
-        input#character-1(type='text' name='character1' required='true')
+        input#character-1(type='text' name='character1' required='true' value=convo.characters.names[0])
       li
         label(for='character2') Character 2:
-        input#character-2(type='text' name='character2' required='true')
+        input#character-2(type='text' name='character2' required='true' value=convo.characters.names[1])
       br
       li
         label(for='line1') Line 1 (Character 1): 
-        input#line1(type='text' name='line1' required='true')
+        input#line1(type='text' name='line1' required='true' value=convo.lines[0])
       li
         label(for='line2') Line 2 (Character 2): 
-        input#line2(type='text' name='line2' required='true')
+        input#line2(type='text' name='line2' required='true' value=convo.lines[1])
       li
         label(for='line3') Line 3 (Character 1): 
-        input#line3(type='text' name='line3' required='true')
+        input#line3(type='text' name='line3' required='true' value=convo.lines[2])
       li
         label(for='line4') Line 4 (Character 2): 
-        input#line4(type='text' name='line4' required='true')
+        input#line4(type='text' name='line4' required='true' value=convo.lines[3])
       li
         label(for='line5') Line 5 (Character 1): 
-        input#line5(type='text' name='line5' required='true')
+        input#line5(type='text' name='line5' required='true' value=convo.lines[4])
       li
         label(for='line6') Line 6 (Character 2): 
-        input#line6(type='text' name='line6' required='true')
+        input#line6(type='text' name='line6' required='true' value=convo.lines[5])
       li
         label(for='line7') Line 7 (Character 1): 
-        input#line7(type='text' name='line7' required='true')
+        input#line7(type='text' name='line7' required='true' value=convo.lines[6])
       li
         label(for='line8') Line 8 (Character 2): 
-        input#line8(type='text' name='line8' required='true')
+        input#line8(type='text' name='line8' required='true' value=convo.lines[7])
       li
         label(for='line9') Line 9 (Character 1): 
-        input#line9(type='text' name='line9' required='true')
+        input#line9(type='text' name='line9' required='true' value=convo.lines[8])
       li
         label(for='line10') Line 10 (Character 2): 
-        input#line10(type='text' name='line10' required='true')
+        input#line10(type='text' name='line10' required='true' value=convo.lines[9])
+
       br
-      li.button
+
+      input#authorid.form-control-edit(type='hidden',name='convoid', required='true', value=convo._id )
+
+      button.btn.btn-primary(type='submit') Edit
+
+  hr
+
+  form(method='post' action= convo.url + '/delete')
+    div.form-group
+      input#authorid.form-control-delete(type='hidden',name='convoid', required='true', value=convo._id )
+
+    button.btn.btn-primary(type='submit') Delete
diff --git a/views/peaksay_layout.pug b/views/peaksay_layout.pug
@@ -6,7 +6,7 @@ head
   meta(name='description' content='The conversation game for learning languages')
   meta(name='author' content='Hugo Xiong')
   // favicon file
-  link(rel='icon' href='/Users/hugo/Dropbox/Programming/node-sandbox/hugo-node-sandbox/public/favicon.ico' type='image/x-icon')
+  link(rel='icon' href= __rootdir + '/public/favicon.ico' type='image/x-icon')
   // link to import the Varela Round font from Google Fonts
   link(href='https://fonts.googleapis.com/css?family=Varela+Round&display=swap' rel='stylesheet')
   // link to main CSS stylesheet
@@ -15,11 +15,6 @@ head
 #startScreen
   #startHeader.flex-default
     h1.title peaksay (pug template engine)
-    //
-      <h1 class="peaksay-logo-link">
-      <a ref="https://peaksay.com">
-      <img width="170.549" height="59.990" src="https://fluentkey.com/blog/wp-content/uploads/cropped-logo-variant-nosloga-square-300x106.png">
-      </a>
     h3.tagline the conversation game!
     // <button class="btn hover" id="text-to-speech" onClick="textToSpeech()">Click for TEXT TO SPEECH</button>
   // elements for start Button
@@ -30,11 +25,12 @@ head
     button#instructionsButton.btn.hover(onclick='instructions()') How to Play
   // elements for conversation button and dropdown
   #conversationWindow
-    button.btn
-      a(href='/peaksay/create') Create New Conversation
     #convo-dropdown.dropdown
       button.btn.dropbtn Choose Conversation
       #convo-dropdown-content.dropdown-content
+    button#editButton.btn.hover(onclick='editConvo()') Edit/Delete Selected Conversation
+    button.btn.hover
+      a(href='/peaksay/create') Create New Conversation
     #convoGrid
 // Instructions Modal Window
 // modal means a pop-up window that appears during certain conditions (i.e. when you click on a button), not usually visible