Dictionary shows results in table, changed all "phonetic symbol" to "…

…part of speech"
githubalexliu · Mar 28, 2018 · c6fe5a9 · c6fe5a9
1 parent c7043c7
commit c6fe5a9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 29 deletions.
diff --git a/app/dictionary.js b/app/dictionary.js
@@ -0,0 +1,13 @@
+module.exports = function(req, res) {
+  searchword = function(word, callback) {
+    connection.query("SELECT * FROM dictionary WHERE word = ?", [word], function(err, rows) {
+      if (err) throw err;
+      return callback(null, rows);
+    });
+  }
+};
+var mysql = require('mysql');
+var dbconfig = require('../config/database');
+var bcrypt = require('bcrypt-nodejs');
+var connection = mysql.createConnection(dbconfig.connection);
+connection.query('USE ' + dbconfig.database);
diff --git a/app/routes.js b/app/routes.js
@@ -98,12 +98,12 @@ module.exports = function(app, passport) {
   });
 
   app.post('/addword', function(req, res) {
-    addWord(req.user.id, req.body.word, req.body.phonetic, req.body.meaning);
+    addWord(req.user.id, req.body.word, req.body.pos, req.body.meaning);
     res.redirect('back');
   });
 
   app.post('/editword', function(req, res) {
-    editWord(req.user.id, req.body.id, req.body.word, req.body.phonetic, req.body.meaning);
+    editWord(req.user.id, req.body.id, req.body.word, req.body.pos, req.body.meaning);
     res.redirect('back');
   });
 
@@ -134,6 +134,12 @@ module.exports = function(app, passport) {
       });
   });
 
+  app.post('/searchword', function(req, res) {
+    searchword(req.body.word, function(err, data){
+      res.send(data);
+    });
+  });
+
   app.get('/logout', function(req, res) {
     req.logout();
     res.redirect('/');
@@ -148,6 +154,7 @@ connection.query('USE ' + dbconfig.database);
 require('./profile.js')();
 require('./word-list.js')();
 require('./review.js')();
+require('./dictionary.js')();
 
 function isLoggedIn(req, res, next) {
   if (req.isAuthenticated())

diff --git a/app/word-list.js b/app/word-list.js
@@ -1,5 +1,5 @@
 module.exports = function(req, res) {
-  addWord = function(userid, word, phonetic, meaning) {
+  addWord = function(userid, word, pos, meaning) {
     var today = new Date();
     var dd = today.getDate();
     var mm = today.getMonth()+1;
@@ -12,8 +12,8 @@ module.exports = function(req, res) {
     yyyy = tomorrow.getFullYear();
     tomorrow = yyyy + '-' + mm + '-' + dd;
     // review date is set to today for testing purpose
-    connection.query("INSERT INTO ?? ( word, phonetic, meaning, progress, dateadded, daterev, datecomp ) values (?,?,?,?,?,?,?)",
-     [userid, word, phonetic, meaning, 0, today, today, "1000-1-1"], function(err, rows) {
+    connection.query("INSERT INTO ?? ( word, pos, meaning, progress, dateadded, daterev, datecomp ) values (?,?,?,?,?,?,?)",
+     [userid, word, pos, meaning, 0, today, today, "1000-1-1"], function(err, rows) {
       if (err) throw err;
     });
   }
@@ -27,9 +27,9 @@ module.exports = function(req, res) {
     });
   }
 
-  editWord = function(userid, wordid, word, phonetic, meaning) {
-    connection.query("UPDATE ?? SET word = ?, phonetic = ?, meaning = ? WHERE id = ?",
-     [userid, word, phonetic, meaning, wordid], function(err, rows){
+  editWord = function(userid, wordid, word, pos, meaning) {
+    connection.query("UPDATE ?? SET word = ?, pos = ?, meaning = ? WHERE id = ?",
+     [userid, word, pos, meaning, wordid], function(err, rows){
       if (err) throw err;
     });
   }

diff --git a/config/passport.js b/config/passport.js
@@ -47,7 +47,7 @@ module.exports = function(passport) {
               console.log(rows.insertId);
               var tablename = rows.insertId;
               connection.query('CREATE TABLE ?? (id INT AUTO_INCREMENT PRIMARY KEY, \
-                word VARCHAR(30), phonetic VARCHAR(10), meaning VARCHAR(255), \
+                word VARCHAR(30), pos VARCHAR(10), meaning VARCHAR(255), \
                 progress TINYINT, dateadded DATE, daterev DATE, datecomp DATE, \
                 UNIQUE INDEX `id_UNIQUE` (`id` ASC))', [tablename], function(err, rows) {
                 if (err) throw err;

diff --git a/views/dictionary.ejs b/views/dictionary.ejs
@@ -3,28 +3,86 @@
 
 <head>
   <% include partials/head %>
+  <link rel="stylesheet" type="text/css" href="node_modules/datatables.net-dt/css/jquery.dataTables.css" />
+  <script type="text/javascript" src="node_modules/datatables.net/js/jquery.dataTables.js"></script>
+  <script type="text/javascript" charset="utf-8">
+      $(document).ready(function() {
+        $('#results').wrap('<div id="hide" style="display:none"/>');
+        var results = $('#results').DataTable();
+        $("#word").keyup(function(event) {
+          if (event.keyCode === 13) {
+            $("#search").click();
+          }
+        });
+        $('#search').on('click', function() {
+          $.ajax({
+            url: "/searchword",
+            type: "post",
+            data: {
+              word: $("#word").val()
+            }
+          }).done(function(data) {
+            $('#hide').css( 'display', 'block' );
+            results.clear();
+            for (var i = 0; i < data.length; i++) {
+              data[i].word = data[i].word.charAt(0).toLowerCase() + data[i].word.slice(1);
+              if (data[i].wordtype === 'v. i.' || data[i].wordtype ==='v. t.') {
+                data[i].wordtype = 'v.';
+              }
+            }
+            if (data.length === 0) {
+              results.row.add(['',$("#word").val(),'','Sorry, the database does not have the word "'
+               + $("#word").val() + '".']).draw(true);
+            }
+            else if (data.length === 1) {
+              results.row.add([
+                '<input type="radio" checked>',
+                data[0].word,
+                data[0].wordtype.slice(0, -1),
+                data[0].definition
+              ]).draw(true);
+            }
+            else {
+              for (var i = 0; i < data.length; i++) {
+                results.row.add([
+                  '<input type="radio">',
+                  data[i].word,
+                  data[i].wordtype.slice(0, -1),
+                  data[i].definition
+                ]).draw(true);
+              }
+            }
+          });
+        });
+      });
+    </script>
 </head>
 
 <body>
   <% include partials/nav %>
     <div class="container-fluid text-center top-buffer-50">
       <div class="row">
         <div class="col-md-6 offset-md-3">
-          <form class="" method="post" action="/searchword">
-            <div class="input-group">
-              <input type="text" class="form-control" id="word" name="word"
-              placeholder="Search for a word">
-              <span class="input-group-btn">
-                <button type="submit" class="btn btn-primary ml-2">Search</button>
+          <div class="input-group">
+            <input type="text" class="form-control" id="word" name="word" placeholder="Search for a word">
+            <span class="input-group-btn">
+                <button type="button" id="search" class="btn btn-primary ml-2">Search</button>
               </span>
-            </div>
-            <!-- <button type="submit" class="btn btn-primary">Search</button> -->
-          </form>
+          </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-12">
+      <div class="row top-buffer-20">
+        <div class="col-md-8 offset-md-2">
           <table id="results" class="display" cellspacing="0" width="100%">
+            <thead>
+              <tr>
+                <th></th>
+              <th>Word</th>
+              <th>Part of Speech</th>
+              <th>Meaning</th>
+            </tr>
+            </thead>
+
           </table>
         </div>
       </div>

diff --git a/views/modals/word-list.ejs b/views/modals/word-list.ejs
@@ -16,9 +16,9 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="phonetic" class="col-md-4 col-form-label">Phonetic Symbol:</label>
+            <label for="pos" class="col-md-4 col-form-label">Part of Speech:</label>
             <div class="col-md-3">
-              <input type="text" class="form-control" id="phonetic" name="phonetic">
+              <input type="text" class="form-control" id="pos" name="pos">
             </div>
           </div>
           <div class="form-group row">
@@ -73,9 +73,9 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="phonetic" class="col-md-4 col-form-label">Phonetic Symbol:</label>
+            <label for="pos" class="col-md-4 col-form-label">Part of Speech:</label>
             <div class="col-md-3">
-              <input type="text" class="form-control" id="phonetic" name="phonetic">
+              <input type="text" class="form-control" id="pos" name="pos">
             </div>
           </div>
           <div class="form-group row">

diff --git a/views/review.ejs b/views/review.ejs
@@ -38,7 +38,6 @@
               numDontRem: wordlist[0].numDontRem
             }
           });
-          console.log(wordlist[0].numDontRem);
           wordlist.shift();
           this.disabled = true;
           dontRem.disabled = true;
@@ -55,7 +54,6 @@
         });
         $('#dontRem').on('click', function() {
           wordlist[0].numDontRem++;
-          console.log(wordlist[0].numDontRem);
           wordlist.push(wordlist.shift());
           this.disabled = true;
           rem.disabled = true;

diff --git a/views/word-list.ejs b/views/word-list.ejs
@@ -38,7 +38,7 @@
           var data = table.rows('.selected').data();
           $(this).find('#id').val(data[0][0]);
           $(this).find('#word').val(data[0][1]);
-          $(this).find('#phonetic').val(data[0][2]);
+          $(this).find('#pos').val(data[0][2]);
           $(this).find('#meaning').val(data[0][3]);
         });
 
@@ -84,7 +84,7 @@
               <tr>
                 <th>ID</th>
                 <th>Word</th>
-                <th>Phonetic<br>Symbol</th>
+                <th>Part of Speech</th>
                 <th>Meaning</th>
                 <th>Progress</th>
                 <th>Date added</th>
@@ -100,7 +100,7 @@
                     <%= wordlist[i].word %>
                   </td>
                   <td>
-                    <%= wordlist[i].phonetic %>
+                    <%= wordlist[i].pos %>
                   </td>
                   <td>
                     <%= wordlist[i].meaning %>