Add Related Words field & display

src/constants.js

@@ -36,6 +36,7 @@ export const DEFAULT_DICTIONARY = {
       definition: '',
       details: '',
       etymology: [],
+      related: [],
       wordId: 0
     }, */
   ],

src/js/render/words.js

@@ -62,6 +62,8 @@ export function renderWords() {
         details: parseReferences(removeTags(originalWord.details)),
         etymology: typeof originalWord.etymology === 'undefined' || originalWord.etymology.length < 1 ? null
           : originalWord.etymology.map(root => getWordReferenceMarkdown(removeTags(root))).join(', '),
+        related: typeof originalWord.related === 'undefined' || originalWord.related.length < 1 ? null
+          : originalWord.related.map(relatedWord => getWordReferenceMarkdown(removeTags(relatedWord))).join(', '),
         wordId: originalWord.wordId,
       });
       const homonymnNumber = getHomonymnNumber(originalWord);
@@ -88,11 +90,15 @@ export function renderWords() {
           <dd class="details">
             ${md(word.details)}
           </dd>
-          ${word.etymology === null ? '' : `<hr>
-          <dt>Etymology <small>(Root Word${originalWord.etymology.length !== 1 ? 's' : ''})</small></dt>
+          ${word.etymology === null && word.related === null ? '' : `<hr>`}
+          ${word.etymology === null ? '' : `<dt>Etymology <small>(Root Word${originalWord.etymology.length !== 1 ? 's' : ''})</small></dt>
           <dd class="etymology">
             ${md(word.etymology).replace(/<\/?p>/g, '')}
           </dd>`}
+          ${word.related === null ? '' : `<dt>Related Word${originalWord.related.length !== 1 ? 's' : ''}</dt>
+          <dd class="related">
+            ${md(word.related).replace(/<\/?p>/g, '')}
+          </dd>`}
         </dl>
       </article>`;
     });
@@ -174,6 +180,9 @@ export function renderEditForm(wordId = false) {
         <label>Etymology / Root Words<br>
           <input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">
         </label>
+        <label>Related Words<br>
+          <input id="wordRelated_${wordId}" maxlength="2500" placeholder="comma,separated,related,words" value="${word.hasOwnProperty('related') ? word.related : ''}">
+        </label>
       </div>
       <div id="wordErrorMessage_${wordId}"></div>
       <a class="button edit-save-changes" id="editWordButton_${wordId}">Save Changes</a>

src/js/wordManagement.js

@@ -182,7 +182,8 @@ export function submitWordForm() {
     partOfSpeech = document.getElementById('wordPartOfSpeech').value,
     definition = document.getElementById('wordDefinition').value,
     details = document.getElementById('wordDetails').value,
-    etymology = document.getElementById('wordEtymology').value;
+    etymology = document.getElementById('wordEtymology').value,
+    related = document.getElementById('wordRelated').value;
 
   const word = {
     name: removeTags(name).trim(),
@@ -197,6 +198,10 @@ export function submitWordForm() {
     word.etymology = removeTags(etymology).split(',').map(w => w.trim()).filter(w => w.length > 0);
   }
 
+  if (removeTags(related).trim() !== '') {
+    word.related = removeTags(related).split(',').map(w => w.trim()).filter(w => w.length > 0);
+  }
+
   if (validateWord(word)) {
     addWord(word);
     sortWords(true);
@@ -280,7 +285,8 @@ export function confirmEditWord(id) {
     partOfSpeech = document.getElementById('wordPartOfSpeech_' + wordId).value,
     definition = document.getElementById('wordDefinition_' + wordId).value,
     details = document.getElementById('wordDetails_' + wordId).value,
-    etymology = document.getElementById('wordEtymology_' + wordId).value;
+    etymology = document.getElementById('wordEtymology_' + wordId).value,
+    related = document.getElementById('wordRelated_' + wordId).value;
 
   const word = {
     name: removeTags(name).trim(),
@@ -295,6 +301,10 @@ export function confirmEditWord(id) {
     word.etymology = removeTags(etymology).split(',').map(w => w.trim()).filter(w => w.length > 0);
   }
 
+  if (removeTags(related).trim() !== '') {
+    word.related = removeTags(related).split(',').map(w => w.trim()).filter(w => w.length > 0);
+  }
+
   if (validateWord(word, wordId)) {
     if (confirm(`Are you sure you want to save changes to "${word.name}"?`)) {
       document.getElementById('editForm_' + wordId).classList.add('done');

src/php/api/Dictionary.php

@@ -215,7 +215,7 @@ WHERE dictionary=$dictionary";
   }
 
   public function getWords ($user, $dictionary) {
-    $query = "SELECT words.*, words_advanced.etymology FROM words
+    $query = "SELECT words.*, words_advanced.etymology, words_advanced.related FROM words
 LEFT JOIN words_advanced ON words_advanced.dictionary = words.dictionary AND words_advanced.word_id = words.word_id
 JOIN dictionaries ON dictionaries.id = words.dictionary
 WHERE words.dictionary=$dictionary AND dictionaries.user=$user";
@@ -233,10 +233,14 @@ WHERE words.dictionary=$dictionary AND dictionaries.user=$user";
           'wordId' => intval($row['word_id']),
         );
 
-        if (!is_null($row['etymology'])) {
+        if (!is_null($row['etymology']) && $row['etymology'] !== '') {
           $word['etymology'] = explode(',', $row['etymology']);
         }
 
+        if (!is_null($row['related']) && $row['related'] !== '') {
+          $word['related'] = explode(',', $row['related']);
+        }
+
         return $word;
       }, $results);
     }
@@ -263,7 +267,7 @@ WHERE words.dictionary=$dictionary AND dictionaries.user=$user";
     }
 
     $query1 = 'INSERT INTO words (dictionary, word_id, name, pronunciation, part_of_speech, definition, details, last_updated, created_on) VALUES ';
-    $query2 = 'INSERT INTO words_advanced (dictionary, word_id, etymology) VALUES ';
+    $query2 = 'INSERT INTO words_advanced (dictionary, word_id, etymology, related) VALUES ';
     $params1 = array();
     $params2 = array();
     $word_ids = array();
@@ -285,10 +289,11 @@ WHERE words.dictionary=$dictionary AND dictionaries.user=$user";
       $params1[] = $last_updated;
       $params1[] = $word['createdOn'];
 
-      $query2 .= "(?, ?, ?), ";
+      $query2 .= "(?, ?, ?, ?), ";
       $params2[] = $dictionary;
       $params2[] = $word['wordId'];
-      $params2[] = isset($word['etymology']) ? implode(',', $word['etymology']) : null;
+      $params2[] = isset($word['etymology']) ? implode(',', $word['etymology']) : '';
+      $params2[] = isset($word['related']) ? implode(',', $word['related']) : '';
     }
     $query1 = trim($query1, ', ') . ' ON DUPLICATE KEY UPDATE
 name=VALUES(name),
@@ -299,7 +304,8 @@ details=VALUES(details),
 last_updated=VALUES(last_updated),
 created_on=VALUES(created_on)';
     $query2 = trim($query2, ', ') . ' ON DUPLICATE KEY UPDATE
-etymology=VALUES(etymology)';
+etymology=VALUES(etymology),
+related=VALUES(related)';
     
     $results1 = $this->db->execute($query1, $params1);
 

template-index.html

@@ -146,6 +146,9 @@
           <label>Etymology / Root Words<br>
             <input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">
           </label>
+          <label>Related Words<br>
+            <input id="wordRelated" maxlength="2500" placeholder="comma,separated,related,words">
+          </label>
         </div>
         <div id="wordErrorMessage"></div>
         <a class="button" id="addWordButton">Add Word</a>