Other various changes

Add additional sections for shared notes

000-default.conf

@@ -9,7 +9,7 @@
 	#ServerName www.example.com
 
 	ServerAdmin webmaster@localhost
-	DocumentRoot /var/www/html/public
+	DocumentRoot /var/www/html/public/index.php
 
 	# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
 	# error, crit, alert, emerg.

Dockerfile

@@ -1,4 +1,4 @@
-FROM php:8.2-apache
+FROM php:8.3-apache
 
 RUN apt update && \
     apt upgrade -y && \
@@ -45,10 +45,13 @@ RUN rm -rf /var/www/html/tests
 RUN rm -rf /var/www/html/translations
 
 RUN COMPOSER_ALLOW_SUPERUSER=1 composer install --no-scripts --no-dev --optimize-autoloader
-RUN mv /var/www/html/data/data.db /var/www/html/var/
+RUN mkdir /data
+RUN chown -R 33:33 /data
+RUN chmod -R 755 /data
+COPY data/data.db /data/data.db
 
 RUN mkdir /var/www/html/var/cache
 RUN mkdir /var/www/html/var/log
 
-RUN chown -R www-data:www-data /var/www/html
+RUN chown -R 33:33 /var/www/html
 RUN chmod -R 755 /var/www/html

README.md

@@ -4,7 +4,9 @@ A program to take notes during a sermon.  The web app was built with PHP and Sym
 
 ## Installation
 
-The best option for installing is using the Docker container.  Download the `docker-compose.yml` file from this repository and run `docker-compose up -d` from the command line.
+1. Run `docker run -d --name sermon-notes -p 80:80 ryanprather/sermon-notes:latest`, this will download and start the container and keep it running in the background.  If you already have something on port 80 change the first `80` to whatever open port you'd like.
+2. Run `docker exec -it sermon-notes bash install.sh`  This will run an install script to create an .env file specific to your install, populate with the beginning factors, and then run a `composer` command to download the necessary package dependancies.
+3. Once complete you have a running system that you can navigate to in your browser with `http://{ip}:{port}|{hostname}:{port}`.  Then you just need to register for an account.  The first account that is created is made an admin so that you can access the `Reference Editor` and update any reference material if necessary.
 
 ## Operation
 
@@ -24,7 +26,7 @@ Once you get logged in you'll be presented with the main home page
 
 ![HomePage](/assets/images/HomePage.png)
 
-If you are accessing on a regular iPad the menu should be collapsed, if not, you may need to do that.  I built this with a iPad 9th Gen in mind so your mileage may vary.
+If you are accessing on a regular iPad the menu should be collapsed, if not, you may need to do that.  I built this with a iPad 9th Gen in mind so visibility on another device may vary.
 
 ![Header](/assets/images/Header.png)
 
@@ -62,5 +64,5 @@ or if the note was recently made you will see the most recent 4 notes listed und
 
 ![RecentNotes](/assets/images/RecentNotes.png)
 
-By click either of the title links it will open the note and display it for you to edit or read.  I can add "Notes" as future reference content.
+By clicking either of the title links it will open the note and display it for you to edit or read.  I can add "Notes" as future reference content.
 

assets/css/main.css

@@ -106,6 +106,7 @@ menu,
 nav {
     display: block;
     width: 250px;
+    margin-bottom: 1em;
 }
 
 body {
@@ -1891,10 +1892,11 @@ header p {
     text-transform: uppercase;
 }
 
-header.major> :last-child {
+header.major {
+    /*> :last-child {*/
     border-bottom: solid 3px #f56a6a;
     display: inline-block;
-    margin: 0 0 2em 0;
+    margin: 0 0 10px 0;
     padding: 0 0.75em 0.5em 0;
 }
 
@@ -1921,6 +1923,7 @@ input[type="email"],
 input[type="tel"],
 input[type="search"],
 input[type="url"],
+input[type="number"],
 select,
 textarea {
     -moz-appearance: none;
@@ -1967,7 +1970,7 @@ select {
     background-size: 1.25em;
     background-repeat: no-repeat;
     background-position: calc(100% - 1em) center;
-    height: 2.75em;
+    height: 2em;
     padding-right: 2.75em;
     text-overflow: ellipsis;
 }
@@ -1992,8 +1995,9 @@ input[type="tel"],
 input[type="search"],
 input[type="url"],
 input[type="date"],
+input[type="number"],
 select {
-    height: 2.75em;
+    height: 1.5em;
 }
 
 textarea {
@@ -2233,7 +2237,6 @@ a.image:hover img {
 ol {
     list-style: decimal;
     margin: 0 0 2em 0;
-    padding-left: 1.5em;
 }
 
 ol li {
@@ -2243,7 +2246,6 @@ ol li {
 ul {
     list-style: disc;
     margin: 0 0 2em 0;
-    padding-left: 1em;
 }
 
 ul.alt {
@@ -2679,8 +2681,7 @@ button:disabled,
 /* Mini Posts */
 .mini-posts article {
     border-top: solid 1px rgba(210, 215, 217, 0.75);
-    margin-top: 2em;
-    padding-top: 2em;
+    padding-top: 1em;
 }
 
 .mini-posts article .image {
@@ -2695,7 +2696,7 @@ button:disabled,
 
 .mini-posts article:first-child {
     border-top: 0;
-    margin-top: 0;
+    margin-top: 1em;
     padding-top: 0;
 }
 
@@ -3088,13 +3089,13 @@ button:disabled,
 }
 
 #main>.inner {
-    padding: 0 0.5em 0.1em 0.5em;
+    padding: 0 0.25em 0.1em 0.25em;
     margin: 0 auto;
     max-width: 110em;
 }
 
 #main>.inner>section {
-    padding: 0.5em 0 0.5em 0;
+    padding: 0.25em 0 0.25em 0;
     border-top: solid 2px rgba(210, 215, 217, 0.75);
 }
 
@@ -3104,13 +3105,13 @@ button:disabled,
 
 @media screen and (max-width: 1680px) {
     #main>.inner {
-        padding: 0 0 0 2em;
+        padding: 0 0 0 0;
     }
 }
 
 @media screen and (max-width: 1280px) {
     #main>.inner {
-        padding: 0 0 0 2em;
+        padding: 0 0 0 0;
     }
 }
 
@@ -3199,7 +3200,7 @@ button:disabled,
 #sidebar>.inner>* {
     border-bottom: solid 2px rgba(210, 215, 217, 0.75);
     margin: 0 0 3.5em 0;
-    padding: 0 0 3.5em 0;
+    /*padding: 0 0 3.5em 0;*/
 }
 
 #sidebar>.inner>*> :last-child {
@@ -3229,9 +3230,9 @@ button:disabled,
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     border: 0;
     display: block;
-    height: 7.5em;
+    height: 4.5em;
     left: 26em;
-    line-height: 7.5em;
+    line-height: 4.5em;
     outline: 0;
     overflow: hidden;
     position: absolute;
@@ -3283,17 +3284,19 @@ button:disabled,
     }
 
     #sidebar>.inner>.alt {
-        margin: -1.66667em 0 3.33333em -1.66667em;
+        margin: 0;
         padding: 1.66667em;
         width: calc(100% + 3.33333em);
     }
 
     #sidebar .toggle {
-        height: 6.25em;
-        left: 24em;
-        line-height: 6.25em;
+        height: 4.5em;
+        left: 23em;
+        line-height: 4.5em;
         text-indent: 5em;
         width: 5em;
+        background-color: #fff;
+        margin-left: 1em;
     }
 
     #sidebar .toggle:before {
@@ -3338,7 +3341,7 @@ button:disabled,
 
     #sidebar .toggle {
         text-indent: 6em;
-        width: 6em;
+        width: 4.5em;
     }
 
     #sidebar .toggle:before {
@@ -3408,7 +3411,18 @@ button:disabled,
 }
 
 @media screen and (max-width: 1680px) {
-    #header {}
+    #header .logo {
+        font-size: 1.25em;
+        margin: 0;
+    }
+
+    #header .icons {
+        height: 5em;
+        line-height: 5em;
+        position: absolute;
+        right: -0.5em;
+        top: 0;
+    }
 }
 
 @media screen and (max-width: 736px) {

assets/js/register.js

@@ -39,7 +39,7 @@ function handleSubmit(event) {
         "csrf_token": csrfToken
     };
 
-    fetch("/index.php/register", {
+    fetch("/register", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",

assets/js/script.js

@@ -4,12 +4,41 @@ var references = {};
 var tabs = [];
 let saved = false;
 let textDirty = false;
-let saveTimeout = 10000;
 var to = null;
 let controller;
 var BOOKS = {};
 
-fetch('/js/data.json')
+$(function () {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+    $('#shareBtn').on('click', openShareNote);
+    $('#modal-backdrop').on('click', closeShareNote);
+});
+
+/**
+ * Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
+ *
+ * @return {void}
+ */
+function setBooks() {
+    fetch('js/data.json')
         .then((res) => {
             if (!res.ok) {
                 throw new Error('HTTP Error: Status: ${res.status}');
@@ -22,7 +51,14 @@ fetch('/js/data.json')
         .catch((error) => {
             console.log(error);
         })
+}
 
+/**
+ * Sets event listeners for keyup events on the document and the '#notes' element.
+ *
+ * @return {void}
+ */
+function setEventListeners() {
     document.addEventListener('keyup', function (event) {
         if (event.key == "F3") {
             openRef(false);
@@ -37,7 +73,14 @@ document.querySelector('#notes').addEventListener('keyup', function (event) {
             document.querySelector('#note-header-left h2').classList.add('dirty');
         }
     });
+}
 
+/**
+ * Sets the height of various elements on the page based on the window's inner height.
+ * Also initializes a datepicker and event listener for the search input field.
+ *
+ * @return {void}
+ */
 function setHeight() {
     md = new markdownit({
         html: true,
@@ -55,13 +98,13 @@ function setHeight() {
     tabs.style.height = (window.innerHeight - 13) + 'px';
 
     ref = document.querySelector('.ref');
-    ref.style.height = (window.innerHeight - 50) + 'px';
+    ref.style.height = (window.innerHeight - 60) + 'px';
 
     noteList = document.querySelector('#note-list');
-    noteList.style.height = (window.innerHeight - 50) + 'px';
+    noteList.style.height = (window.innerHeight - 60) + 'px';
 
     notes = document.querySelector('.notes');
-    notes.style.height = (window.innerHeight - 50) + 'px';
+    notes.style.height = (window.innerHeight - 60) + 'px';
 
     notePreview = document.querySelector('#notePreview');
     notePreview.style.height = (window.innerHeight - 50) + 'px';
@@ -78,13 +121,20 @@ function setHeight() {
         });
     }
     if (!to) {
-        to = setTimeout(saveNote, saveTimeout);
+        to = setTimeout(saveNote, saveInterval);
     }
 }
 
+/**
+ * Searches for notes based on the query entered in the search field.
+ * Sends a POST request to the '/search' endpoint with the query as a JSON payload.
+ * Updates the '#old-notes' element with the search results.
+ *
+ * @return {Promise} A Promise that resolves with the search results.
+ */
 function search() {
     query = document.querySelector('#query').value;
-    fetch('/index.php/search', {
+    fetch('/search', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -115,6 +165,15 @@ function search() {
         });
 }
 
+/**
+ * Resets the state of the note editor by clearing the text and form fields,
+ * resetting the references, and removing any dirty classes. It also sets the
+ * date to the current date, clears the speaker, series, template, passage,
+ * recording, and note ID fields. Finally, it clears the reference list and
+ * reference display.
+ *
+ * @return {void} This function does not return anything.
+ */
 function newNote() {
     notes = document.querySelector('#notes');
     notes.text = '';
@@ -133,7 +192,8 @@ function newNote() {
     document.querySelector('#series').value = 0;
     document.querySelector('#template').value = 0;
     document.querySelector('#passage').value = '';
-    document.querySelector('#noteId').value = uuidv4();
+    document.querySelector('#recording').value = '';
+    document.querySelector('#noteId').value = '';
 
     document.querySelector('#ref-list').innerHTML = '';
     document.querySelector('#ref').innerHTML = '';
@@ -153,11 +213,12 @@ function saveNote(event) {
 
     if (!textDirty || !validateNote()) {
         clearTimeout(to);
-        to = setTimeout(saveNote, saveTimeout);
+        to = setTimeout(saveNote, saveInterval);
         return;
     }
 
     let saveCheck = document.querySelector('#save-check');
+    var noteText = document.querySelector('#notes').value;
 
     startSave();
 
@@ -169,44 +230,58 @@ function saveNote(event) {
         series: document.querySelector('#series').value,
         passage: document.querySelector('#passage').value,
         note: document.querySelector('#notes').value,
+        recording: document.querySelector('#recording').value,
         refs: references
     };
     $.ajax({
-        url: '/index.php/save-note',
+        url: '/save-note',
         method: 'POST',
         contentType: 'application/json',
         data: JSON.stringify(note),
         dataType: 'json',
-        timeout: 5000
+        timeout: saveTimeout
     })
         .done(function (data) {
             if (data.msg == 'saved' && !saved) {
-                saveCheck.classList.remove('saving');
+                saveFailureCount = SAVE_FAILURE_LIMIT;
+                saveCheck.classList.remove('saving', 'error', 'fa-times-circle', 'fa-save');
                 showSave();
+                if (noteText == document.querySelector('#notes').value) {
                     saved = true;
                     textDirty = false;
                     document.querySelector('#note-header-left h2').classList.remove('dirty');
+                }
 
                 if (data.new) {
                     document.querySelector('#noteId').value = data.id;
                 }
             }
         })
-        .fail(function (data) {
-            saveCheck.classList.remove('saving');
-            saveCheck.classList.add('error');
-            console.error(data);
+        .fail(function (xhr, status, error) {
+            saveFailureCount--;
+            saveCheck.classList.remove('saving', 'fa-save');
+            saveCheck.classList.add('fa-times-circle', 'error');
+            console.error(error);
         })
         .always(function (xhr, status) {
             if (status == 'timeout') {
-                saveCheck.classList.remove('saving');
-                saveCheck.classList.add('error');
+                saveCheck.classList.remove('saving', 'fa-save');
+                saveCheck.classList.add('error', 'fa-times-circle');
             }
             clearTimeout(to);
-            to = setTimeout(saveNote, saveTimeout);
+            if (saveFailureCount > 0) {
+                to = setTimeout(saveNote, saveInterval);
+            } else {
+                saveFailureCount = SAVE_FAILURE_LIMIT;
+            }
         });
 }
 
+/**
+ * Validates a note by checking if all required fields are filled.
+ *
+ * @return {boolean} Returns true if all required fields are filled, false otherwise.
+ */
 function validateNote() {
     const note = document.querySelector('#notes');
     const date = document.querySelector('#noteDate');
@@ -225,13 +300,26 @@ function validateNote() {
     return true;
 }
 
+/**
+ * Checks if a given UUID is valid.
+ *
+ * @param {string} uuid - The UUID to be validated.
+ * @return {boolean} Returns true if the UUID is valid, false otherwise.
+ */
 function isUuidValid(uuid) {
     const regex = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[8|9|a|b][a-f0-9]{3}-[a-f0-9]{12}$/i;
     return regex.test(uuid);
 }
 
+/**
+ * Starts the save process by updating the save-check element's classList, removing error, fa-times-circle, and fa-save classes,
+ * adding the 'saving' and 'fa-save' classes, and setting the opacity to 1.
+ *
+ * @return {void} This function does not return anything.
+ */
 function startSave() {
-    document.querySelector('#save-check').classList.add('saving');
+    document.querySelector('#save-check').classList.remove('error', 'fa-times-circle', 'fa-save');
+    document.querySelector('#save-check').classList.add('saving', 'fa-save');
     document.querySelector('#save-check').style.opacity = 1;
 }
 
@@ -245,6 +333,7 @@ function showSave() {
     if (saved) { return; }
 
     var checkmark = document.getElementById("save-check");
+    checkmark.classList.add('fa-save');
 
     // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
     var si = setInterval(function () {
@@ -264,33 +353,44 @@ function showSave() {
 /**
  * Function to discard the note by clearing all input fields and closing the menu.
  */
-function discardNote() {
+function deleteNote(noteId, link) {
     document.querySelector('#noteTitle').value = '';
     document.querySelector('#speaker').value = 0;
     document.querySelector('#series').value = 0;
     document.querySelector('#template').value = 0;
     document.querySelector('#passage').value = '';
     document.querySelector('#notes').value = '';
+    document.querySelector('#recording').value = '';
+    document.querySelector('#noteDate').value = '';
+    document.querySelector('#noteId').value = '';
 
-    fetch('/index.php/discard-note', {
+    var row = link.parentElement.parentElement;
+
+    fetch('/delete-note', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            'id': document.querySelector('#noteId').value
+            'id': noteId
+        })
     })
         .then(response => response.json())
         .then(data => {
-                if (data.msg == 'deleted') {
+            if (data.msg != 'deleted') {
+                return;
+            }
+
             alert('Note deleted.');
-                }
-            })
+            row.remove();
         });
-
-    openRef();
 }
 
+/**
+ * Toggles the display of the new speaker input field and hides the speaker select field.
+ *
+ * @return {void} This function does not return anything.
+ */
 function newSpeaker() {
     if (document.querySelector('#speaker').value == 'new') {
         document.querySelector('#newSpeaker').style.display = 'inline-block';
@@ -301,9 +401,15 @@ function newSpeaker() {
     textDirty = true;
 }
 
+/**
+ * Saves a new speaker to the database and updates the UI with the new speaker option.
+ *
+ * @param {Event} event - The keydown event triggered by the user.
+ * @return {Promise} A Promise that resolves with the results of the fetch request.
+ */
 function saveSpeaker(event) {
     if (event.keyCode == 13) {
-        fetch('/index.php/save-speaker', {
+        fetch('/save-speaker', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -329,6 +435,9 @@ function saveSpeaker(event) {
     }
 }
 
+/**
+ * A description of the entire function.
+ */
 function newSeries() {
     if (document.querySelector('#series').value == 'new') {
         document.querySelector('#newSeries').style.display = 'inline-block';
@@ -339,9 +448,15 @@ function newSeries() {
     textDirty = true;
 }
 
+/**
+ * Saves a series by making a POST request to '/save-series' with the series name as the request body.
+ *
+ * @param {Event} event - The keydown event.
+ * @return {Promise} A Promise that resolves with the response from the server.
+ */
 function saveSeries(event) {
     if (event.keyCode == 13) {
-        fetch('/index.php/save-series', {
+        fetch('/save-series', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -367,7 +482,14 @@ function saveSeries(event) {
     }
 }
 
+/**
+ * Opens the reference with the option to close the sidebar.
+ *
+ * @param {boolean} closeSidebar - Indicates whether to close the sidebar when opening the reference.
+ */
 function openRef(closeSidebar = true) {
+    document.querySelector('#openRefBtn').classList.add('active');
+
     refQuery = document.querySelector('#refQuery');
     refQuery.style.display = 'block';
 
@@ -379,6 +501,11 @@ function openRef(closeSidebar = true) {
     }
 }
 
+/**
+ * Closes the reference query and resets the reference search form.
+ *
+ * @return {void} This function does not return anything.
+ */
 function closeRef() {
     document.querySelector('#referenceSearch').value = '';
     document.querySelector('#referenceSearch').style.display = '';
@@ -389,8 +516,17 @@ function closeRef() {
     document.querySelector('#verse-range').innerText = '';
 
     document.querySelector('#refQuery').style.display = 'none';
+    document.querySelector('#openRefBtn').classList.remove('active');
 }
 
+/**
+ * Fetches a reference based on the provided type, book, and input.
+ *
+ * @param {string} type - The type of reference.
+ * @param {string} book - The book of the reference.
+ * @param {string} input - The input for the reference.
+ * @return {void} This function does not return anything directly, but processes the fetched reference data.
+ */
 function queryRef(type = null, book = null, input = null) {
     if (!input) {
         var input = document.querySelector('#refQuery #referenceSearch').value;
@@ -401,7 +537,7 @@ function queryRef(type = null, book = null, input = null) {
     if (!book) {
         var book = document.querySelector('#referenceBook').value;
     }
-    fetch('/index.php/retrieve-reference', {
+    fetch('/retrieve-reference', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -435,13 +571,21 @@ function queryRef(type = null, book = null, input = null) {
         });
 }
 
+/**
+ * A function to create a button element with the specified title and event listeners for click and double click actions.
+ *
+ * @param {string} title - The title to be displayed on the button.
+ * @return {Element} The created button element.
+ */
 function makeButton(title) {
     var btn = document.createElement('button');
     btn.innerText = title;
+    btn.class = 'button';
+    btn.style = 'line-height:normal;'
     btn.addEventListener('click', function () {
         removeActiveRef();
         document.querySelector('#ref').innerHTML = md.render(references[title]);
-        this.classList.add('activeRef');
+        this.classList.add('active');
         findRefLinks();
     });
 
@@ -456,27 +600,39 @@ function makeButton(title) {
     });
 
     removeActiveRef();
-    btn.classList.add('activeRef');
+    btn.classList.add('active');
 
     return btn;
 }
 
+/**
+ * Removes the 'active' class from all elements with the class 'active'.
+ *
+ * @return {void} This function does not return a value.
+ */
 function removeActiveRef() {
-    tabs = document.querySelectorAll('.activeRef');
+    tabs = document.querySelectorAll('.active');
     for (var t in tabs) {
         if (isFinite(parseInt(t))) {
-            tabs[t].classList.remove('activeRef');
+            tabs[t].classList.remove('active');
         }
     }
 }
 
+/**
+ * Retrieves a template from the server and sets it as the value of a specified destination element.
+ *
+ * @param {string} orig - The ID of the element containing the original template value.
+ * @param {string} dest - The ID of the destination element where the retrieved template will be set.
+ * @return {Promise} A Promise that resolves when the template is successfully retrieved and set as the value of the destination element.
+ */
 function retrieveTemplate(orig, dest) {
     const temp = document.querySelector('#' + orig);
     if (temp.value == '0') {
         document.querySelector('#' + dest).value = '';
         return;
     }
-    fetch('/index.php/retrieve-template', {
+    fetch('/retrieve-template', {
         method: 'POST',
         headers: {
             'Content-Type': 'plain/text'
@@ -496,7 +652,7 @@ function retrieveTemplate(orig, dest) {
  * Saves the template by sending a POST request to the server with template data.
  */
 function saveTemplate() {
-    fetch('/index.php/save-template', {
+    fetch('/save-template', {
         method: 'POST',
         headers: {
             'Content-Type': 'plain/text'
@@ -513,6 +669,11 @@ function saveTemplate() {
         });
 }
 
+/**
+ * Toggles the visibility of the fields container and updates the active state of the show/hide button.
+ *
+ * @return {void}
+ */
 function toggleFields() {
     const fieldsContainer = document.getElementById('fields-container');
     const showHideBtn = document.getElementById('show-hide-btn');
@@ -530,6 +691,11 @@ function toggleFields() {
     setHeight();
 }
 
+/**
+ * Retrieves the list of books based on the selected reference type.
+ *
+ * @return {void}
+ */
 function retrieveBooks() {
     document.querySelector('#chapter-range').innerText = '';
     document.querySelector('#verse-range').innerText = '';
@@ -573,6 +739,51 @@ function retrieveBooks() {
             newBook.text = BOOKS.cd[x];
             bookList.appendChild(newBook);
         }
+    } else if (selectedType == 'hc') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x in BOOKS[selectedType]) {
+            var newBook = document.createElement("optgroup");
+            newBook.label = "Lord's Day " + (parseInt(x) + 1)
+            var ld = document.createElement("option");
+            ld.value = 'ld' + (parseInt(x) + 1);
+            ld.text = "LD " + (parseInt(x) + 1) + " All";
+            newBook.appendChild(ld);
+
+            for (var y in BOOKS[selectedType][x]) {
+                var question = document.createElement("option");
+                question.value = 'hc' + BOOKS[selectedType][x][y];
+                question.text = "HC" + BOOKS[selectedType][x][y];
+                newBook.appendChild(question);
+            }
+            bookList.appendChild(newBook);
+        }
+    } else if (selectedType == 'note') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+
+        fetch('/retrieve-reference', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'type': 'note'
+            })
+        })
+            .then(response => response.json())
+            .then(results => {
+                for (var x in results) {
+                    var newBook = document.createElement("option");
+                    newBook.value = results[x].id;
+                    newBook.text = results[x].title;
+                    bookList.appendChild(newBook);
+                }
+            });
     } else {
         var min = BOOKS[selectedType][0];
         var max = BOOKS[selectedType][1];
@@ -589,6 +800,11 @@ function retrieveBooks() {
     }
 }
 
+/**
+ * Filters the books based on the selected reference type and updates the chapter range.
+ *
+ * @return {void} This function does not return anything.
+ */
 function filterBooks() {
     document.querySelector('#chapter-range').innerText = '';
     document.querySelector('#verse-range').innerText = '';
@@ -604,6 +820,11 @@ function filterBooks() {
     chapterRange.innerText = 'Chapters: ' + max;
 }
 
+/**
+ * Filters the verse based on the selected book and chapter.
+ *
+ * @return {void} This function does not return anything.
+ */
 function filterVerse() {
     if (document.querySelector('#referenceType').value != 'bible') {
         return;
@@ -622,15 +843,54 @@ function filterVerse() {
     verseRange.innerText = 'Verse: ' + verse;
 }
 
+/**
+ * Retrieves the reference type from the server and populates the reference series dropdown.
+ *
+ * @param {HTMLElement} el - The element that triggered the function.
+ * @return {Promise} A promise that resolves with the response from the server.
+ */
+function retrieveReferenceType(el) {
+    fetch('/reference/' + el.value, {
+        method: 'GET',
+        header: {
+            'Content-Type': 'application/json'
+        }
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#referenceSeries').innerHTML = '';
+            var none = document.createElement('option');
+            none.value = '';
+            none.text = '-- Select --';
+            document.querySelector('#referenceSeries').appendChild(none);
+
+            for (var x in results) {
+                var newSeries = document.createElement('option');
+                newSeries.value = results[x].id;
+                newSeries.text = results[x].label;
+                document.querySelector('#referenceSeries').appendChild(newSeries);
+            }
+        })
+}
+
+/**
+ * Retrieves a reference based on the provided element value.
+ *
+ * @param {Element} el - The element triggering the reference retrieval
+ * @return {void} No return value
+ */
 function retrieveReference(el) {
-    fetch('/index.php/get-reference', {
+    if (el.value == 'new') {
+        document.querySelector('#refName').style.display = 'inline-block';
+        return;
+    }
+    fetch('/get-reference', {
         method: "POST",
         header: {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            file: el.value,
-            type: el.options[el.selectedIndex].getAttribute('type')
+            id: el.value
         })
     })
         .then(response => response.json())
@@ -639,17 +899,24 @@ function retrieveReference(el) {
         });
 }
 
+/**
+ * Saves a reference by sending a POST request to the server with the selected type,
+ * file, and text values. Displays an alert with the response message, and clears
+ * the reference and file input fields.
+ *
+ * @return {Promise} A Promise that resolves with the response message from the server.
+ */
 function saveReference() {
-    var select = document.querySelector('#references');
-    fetch('/index.php/save-reference', {
+    let ref = document.querySelector('#referenceSeries');
+    let cont = document.querySelector('#reference');
+    fetch('/save-reference', {
         method: 'POST',
         header: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            type: select.options[select.selectedIndex].getAttribute('type'),
-            file: select.value,
-            text: document.querySelector('#reference').value
+            refId: ref.value,
+            text: cont.value
         })
     })
         .then(response => response.json())
@@ -658,9 +925,17 @@ function saveReference() {
 
             document.querySelector('#reference').value = '';
             document.querySelector('#references').value = '';
+            document.querySelector('#referenceType').value = '';
+            document.querySelector('#referenceSeries').value = '';
         });
 }
 
+/**
+ * Previews a note by rendering the markdown content of the note in a preview section.
+ * Toggles between the note text and preview sections.
+ *
+ * @return {void} This function does not return anything.
+ */
 function previewNote() {
     var noteText = document.querySelector('#notes');
     var notePreview = document.querySelector('#notePreview');
@@ -688,6 +963,11 @@ function previewNote() {
     findLinks();
 }
 
+/**
+ * Finds all links in the note preview and adds event listeners to them.
+ *
+ * @return {void}
+ */
 function findLinks() {
     var links = document.querySelector('#notePreview').querySelectorAll('a');
 
@@ -730,6 +1010,9 @@ function findLinks() {
     }
 }
 
+/**
+ * Function that finds reference links and fetches passage data when clicked.
+ */
 function findRefLinks() {
     var links = document.querySelector('#ref').querySelectorAll('a');
 
@@ -772,6 +1055,13 @@ function findRefLinks() {
     }
 }
 
+/**
+ * Shows a passage in a popup element relative to the cursor position.
+ *
+ * @param {Event} event - The event that triggered the function.
+ * @param {string} text - The text to be displayed in the popup.
+ * @return {void} This function does not return a value.
+ */
 function showPassage(event, text) {
     // Create a new div element for the popup
     const popup = document.querySelector('#passage-popup');
@@ -787,12 +1077,23 @@ function showPassage(event, text) {
     popup.style.display = 'block';
 }
 
+/**
+ * Closes the passage popup by clearing its content and hiding it.
+ *
+ * @return {void} This function does not return anything.
+ */
 function closePopup() {
     const popup = document.querySelector('#passage-popup');
     popup.innerHTML = '';
     popup.style.display = 'none';
 }
 
+/**
+ * Toggles the visibility of the note list and reference elements.
+ *
+ * @param {boolean} [openSidebar=true] - Whether to open the sidebar after toggling the visibility.
+ * @return {void}
+ */
 function openNote(openSidebar = true) {
     const noteList = document.querySelector('#note-list');
     const refs = document.querySelector('#ref');
@@ -810,8 +1111,15 @@ function openNote(openSidebar = true) {
     }
 }
 
+/**
+ * Retrieves a note from the server based on the provided ID.
+ *
+ * @param {string} id - The ID of the note to retrieve.
+ * @param {boolean} [runOpen=true] - Whether to open the note sidebar after retrieving the note.
+ * @return {Promise<void>} A promise that resolves when the note is successfully retrieved and the UI is updated.
+ */
 function retrieveNote(id, runOpen = true) {
-    fetch('/index.php/get-note', {
+    fetch('/get-note', {
         method: 'POST',
         header: {
             'Content-Type': 'application/json'
@@ -857,11 +1165,84 @@ function retrieveNote(id, runOpen = true) {
         });
 }
 
+/**
+ * Opens the share note functionality.
+ */
+function openShareNote() {
+    var id = document.querySelector('#noteId').value;
+    if (!id) {
+        alert('No Open Note Found');
+        return;
+    }
+
+    bd = document.querySelector('#modal-backdrop');
+    bd.style.display = 'block';
+    cont = document.querySelector('#modal-container');
+    cont.style.display = bd.style.display;
+
+    emailCont = document.querySelector('#modal-container');
+    emailCont.style.left = ((window.innerWidth / 2) - (emailCont.clientWidth / 2)) + 'px';
+    emailCont.style.top = ((window.innerHeight / 2) - (emailCont.clientHeight / 2)) + 'px';
+}
+
+/**
+ * Closes the share note modal by hiding the backdrop and container,
+ * and clears the email input value.
+ */
+function closeShareNote() {
+    var bd = document.querySelector('#modal-backdrop');
+    var cont = document.querySelector('#modal-container');
+    bd.style.display = 'none';
+    cont.style.display = 'none';
+    document.querySelector('#shareEmail').value = '';
+}
+
+/**
+ * Function to share a note by sending the note ID and email to the server.
+ */
+function shareNote(event) {
+    var id = document.querySelector('#noteId').value;
+    var email = document.querySelector('#shareEmail').value;
+    if (!id || !email) {
+        alert('Invalid Input');
+        return;
+    }
+
+    fetch('/share-note', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'id': id,
+            'email': email
+        })
+    })
+        .then(response => response.json())
+        .then(result => {
+            if (result) {
+                alert(result.msg);
+            }
+        });
+
+    closeShareNote();
+}
+
+/**
+ * Increases the font size of the element with the id 'ref' by 1 point.
+ *
+ * @return {void} This function does not return a value.
+ */
 function increaseFont() {
     var currentSize = document.querySelector('#ref').style.fontSize;
     document.querySelector('#ref').style.fontSize = (parseInt(currentSize) + 1) + 'pt';
 }
 
+/**
+ * Decreases the font size of the element with the id 'ref' by 1 point.
+ *
+ * @return {void} This function does not return a value.
+ */
 function decreaseFont() {
     var currentSize = document.querySelector('#ref').style.fontSize;
     document.querySelector('#ref').style.fontSize = (parseInt(currentSize) - 1) + 'pt';

assets/js/script.min.js

@@ -0,0 +1 @@
+function setBooks(){fetch("/js/data.json").then(res=>{if(!res.ok)throw new Error("HTTP Error: Status: ${res.status}");return res.json()}).then(data=>{BOOKS=data}).catch(error=>{console.log(error)})}function setEventListeners(){document.addEventListener("keyup",function(event){"F3"==event.key&&openRef(!1)}),document.querySelector("#notes").addEventListener("keyup",function(event){let key=event.keyCode;(key>=48&&key<=90||key>=96&&key<=111||key>=186&&key<=222)&&(textDirty=!0,document.querySelector("#note-header-left h2").classList.add("dirty"))})}function setHeight(){md=new markdownit({html:!0,linkify:!0,breaks:!0}),body=document.querySelector("body"),body.style.height=window.innerHeight+"px",cont=document.querySelector("#main"),cont.style.height=window.innerHeight+"px",tabs=document.querySelector(".ref-tab"),tabs.style.height=window.innerHeight-13+"px",ref=document.querySelector(".ref"),ref.style.height=window.innerHeight-60+"px",noteList=document.querySelector("#note-list"),noteList.style.height=window.innerHeight-60+"px",notes=document.querySelector(".notes"),notes.style.height=window.innerHeight-60+"px",notePreview=document.querySelector("#notePreview"),notePreview.style.height=window.innerHeight-50+"px",$("#noteDate")&&$("#noteDate").datepicker(),$("#query")&&document.querySelector("#query").addEventListener("keyup",function(event){"Enter"==event.key&&search()}),to||(to=setTimeout(saveNote,saveInterval))}function search(){query=document.querySelector("#query").value,fetch("/search",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({query:query})}).then(response=>response.json()).then(results=>{var oldNotes=document.querySelector("#old-notes");for(var n in oldNotes.innerHTML="",results){var link=document.createElement("a");link.href="#",link.setAttribute("onclick","retrieveNote('"+results[n].id+"');openNote();"),link.innerHTML=results[n].title;var p=document.createElement("p");p.innerHTML=results[n].passage;var article=document.createElement("article");article.appendChild(link),article.appendChild(p),oldNotes.append(article)}})}function newNote(){notes=document.querySelector("#notes"),notes.text="",notes.value="",references={},saved=!0,textDirty=!1,document.querySelector("#note-header-left h2").classList.remove("dirty"),dt=new Date,document.querySelector("#noteDate").value=dt.getFullYear()+"-"+(dt.getMonth()<9?"0"+(dt.getMonth()+1):dt.getMonth()+1)+"-"+(dt.getDate()<10?"0"+dt.getDate():dt.getDate()),document.querySelector("#noteTitle").value="",document.querySelector("#speaker").value=0,document.querySelector("#series").value=0,document.querySelector("#template").value=0,document.querySelector("#passage").value="",document.querySelector("#recording").value="",document.querySelector("#noteId").value="",document.querySelector("#ref-list").innerHTML="",document.querySelector("#ref").innerHTML="",document.querySelector(".toggle").click()}function saveNote(event){if(event&&event.preventDefault(),!textDirty||!validateNote())return clearTimeout(to),void(to=setTimeout(saveNote,saveInterval));let saveCheck=document.querySelector("#save-check");var noteText=document.querySelector("#notes").value;startSave();var note={id:document.querySelector("#noteId").value,date:document.querySelector("#noteDate").value,title:document.querySelector("#noteTitle").value,speaker:document.querySelector("#speaker").value,series:document.querySelector("#series").value,passage:document.querySelector("#passage").value,note:document.querySelector("#notes").value,recording:document.querySelector("#recording").value,refs:references};$.ajax({url:"/save-note",method:"POST",contentType:"application/json",data:JSON.stringify(note),dataType:"json",timeout:saveTimeout}).done(function(data){"saved"!=data.msg||saved||(saveFailureCount=SAVE_FAILURE_LIMIT,saveCheck.classList.remove("saving","error","fa-times-circle","fa-save"),showSave(),noteText==document.querySelector("#notes").value&&(saved=!0,textDirty=!1,document.querySelector("#note-header-left h2").classList.remove("dirty")),data.new&&(document.querySelector("#noteId").value=data.id))}).fail(function(xhr,status,error){saveFailureCount--,saveCheck.classList.remove("saving","fa-save"),saveCheck.classList.add("fa-times-circle","error"),console.error(error)}).always(function(xhr,status){"timeout"==status&&(saveCheck.classList.remove("saving","fa-save"),saveCheck.classList.add("error","fa-times-circle")),clearTimeout(to),saveFailureCount>0?to=setTimeout(saveNote,saveInterval):saveFailureCount=SAVE_FAILURE_LIMIT})}function validateNote(){const note=document.querySelector("#notes"),date=document.querySelector("#noteDate"),speaker=document.querySelector("#speaker"),series=document.querySelector("#series"),title=document.querySelector("#noteTitle"),psg=document.querySelector("#passage");return!!title.value.length&&(!!date.value&&(!!parseInt(speaker.value)&&(!!parseInt(series.value)&&(!!psg.value&&!!note.value.length))))}function isUuidValid(uuid){const regex=/^[a-f0-9]{8}-[Line truncated

assets/styles/style.css

@@ -18,7 +18,7 @@ body {
 
 .ref-tab {
   width: 60px;
-  padding-top: 75px !important;
+  padding-top: 60px !important;
 }
 
 .ref-tab ul {
@@ -43,24 +43,12 @@ body {
   height: 80px;
   width: 100%;
   text-align: center;
-  background-color: #f56a6a;
-  color: #fff !important;
-  border: none;
-  border-radius: 3px;
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
   font-size: 14px;
   margin-bottom: 3px;
 }
-.tab button:active {
-  background-color: #7a0016;
-}
-
-.activeRef {
-  background-color: #3e8e41 !important;
-}
 
 .ref {
-  width: 35%;
+  width: 36%;
 }
 
 .ref > div#ref {
@@ -76,7 +64,7 @@ body {
 }
 
 #ref {
-  padding: 3px 3px 3px 10px;
+  padding: 3px 3px 3px 3px;
 }
 
 #passage {
@@ -102,7 +90,7 @@ body {
 }
 
 .notes {
-  width: 55%;
+  width: 57%;
 }
 
 textarea#notes {
@@ -114,10 +102,18 @@ textarea#notes {
 #notePreview {
   display: none;
   overflow-x: scroll;
+  padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+  list-style-position: inside;
 }
 
 #previewBtn.active,
-#show-hide-btn.active {
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
   background-color: #f56a6a !important;
   color: white !important;
 }
@@ -140,6 +136,8 @@ textarea#notes {
 
 #note-list {
   display: none;
+  height: 100%;
+  overflow-y: scroll;
 }
 
 #note-list ul {
@@ -205,7 +203,7 @@ div#refQuery #referenceSearch {
 
 #fields-container input,
 #fields-container select {
-  width: 19.5%;
+  width: 32.5%;
   display: inline-block;
 }
 
@@ -234,6 +232,65 @@ div#refQuery #referenceSearch {
   font-size: 12pt;
 }
 
+#ref ol,
+#ref ul {
+  list-style-position: inside;
+}
+
 #referenceBook {
   display: none;
+}
+
+.recording-link {
+  font-size: 8pt;
+  color: blue;
+  text-decoration: none;
+}
+
+.fas-trash-alt {
+  color: red;
+  cursor: pointer;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.modal-container {
+  position: absolute;
+  width: 300px;
+  /* adjust this to your desired modal width */
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  z-index: 1001;
+}
+
+.modal-header {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.modal-footer {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+  color: #337ab7;
 }/*# sourceMappingURL=style.css.map */

assets/styles/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACAJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,2BAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,wBAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,kBAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;;;;EAII,oCAAA;EACA,uBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;EACA,WAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,YAAA;EACA,4CAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,sBAAA;EACA,uCAAA;EACA,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,6BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,0BAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ","file":"style.css"}

assets/styles/style.scss

@@ -19,7 +19,7 @@ body {
 
 .ref-tab {
     width: 60px;
-    padding-top: 75px !important;
+    padding-top: 60px !important;
 }
 
 .ref-tab ul {
@@ -44,25 +44,13 @@ body {
     height: 80px;
     width: 100%;
     text-align: center;
-    background-color: #f56a6a;
-    color: #fff !important;
-    border: none;
-    border-radius: 3px;
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.8);
     font-size: 14px;
     margin-bottom: 3px;
-
-    &:active {
-        background-color: #7a0016;
-    }
 }
 
-.activeRef {
-    background-color: #3e8e41 !important;
-}
 
 .ref {
-    width: 35%;
+    width: 36%;
 }
 
 .ref>div#ref {
@@ -78,7 +66,7 @@ body {
 }
 
 #ref {
-    padding: 3px 3px 3px 10px;
+    padding: 3px 3px 3px 3px;
 }
 
 #passage {
@@ -104,7 +92,7 @@ body {
 }
 
 .notes {
-    width: 55%
+    width: 57%
 }
 
 textarea#notes {
@@ -116,10 +104,18 @@ textarea#notes {
 #notePreview {
     display: none;
     overflow-x: scroll;
+    padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+    list-style-position: inside;
 }
 
 #previewBtn.active,
-#show-hide-btn.active {
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
     background-color: #f56a6a !important;
     color: white !important;
 }
@@ -142,6 +138,8 @@ textarea#notes {
 
 #note-list {
     display: none;
+    height: 100%;
+    overflow-y: scroll;
 }
 
 #note-list ul {
@@ -207,7 +205,7 @@ div#refQuery #referenceSearch {
 
 #fields-container input,
 #fields-container select {
-    width: 19.5%;
+    width: 32.5%;
     display: inline-block;
 }
 
@@ -236,6 +234,65 @@ div#refQuery #referenceSearch {
     font-size: 12pt;
 }
 
+#ref ol,
+#ref ul {
+    list-style-position: inside;
+}
+
 #referenceBook {
     display: none;
 }
+
+.recording-link {
+    font-size: 8pt;
+    color: blue;
+    text-decoration: none;
+}
+
+.fas-trash-alt {
+    color: red;
+    cursor: pointer;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 1000;
+}
+
+.modal-container {
+    position: absolute;
+    width: 300px;
+    /* adjust this to your desired modal width */
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    z-index: 1001;
+}
+
+.modal-header {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+.modal-footer {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+    color: #337ab7;
+}

composer.json

@@ -12,41 +12,42 @@
         "doctrine/doctrine-bundle": "^2.12",
         "doctrine/doctrine-migrations-bundle": "^3.3",
         "doctrine/orm": "^3.1",
+        "erusev/parsedown": "^1.7",
         "phpdocumentor/reflection-docblock": "^5.4",
         "phpstan/phpdoc-parser": "^1.28",
-        "symfony/asset": "7.0.*",
-        "symfony/asset-mapper": "7.0.*",
-        "symfony/console": "7.0.*",
-        "symfony/doctrine-messenger": "7.0.*",
-        "symfony/dotenv": "7.0.*",
-        "symfony/expression-language": "7.0.*",
+        "symfony/asset": "7.2.*",
+        "symfony/asset-mapper": "7.2.*",
+        "symfony/console": "7.2.*",
+        "symfony/debug-bundle": "7.2.*",
+        "symfony/doctrine-messenger": "7.2.*",
+        "symfony/dotenv": "7.2.*",
+        "symfony/expression-language": "7.2.*",
         "symfony/flex": "^2",
-        "symfony/form": "7.0.*",
-        "symfony/framework-bundle": "7.0.*",
-        "symfony/http-client": "7.0.*",
-        "symfony/intl": "7.0.*",
-        "symfony/mailer": "7.0.*",
-        "symfony/mime": "7.0.*",
+        "symfony/form": "7.2.*",
+        "symfony/framework-bundle": "7.2.*",
+        "symfony/http-client": "7.2.*",
+        "symfony/intl": "7.2.*",
+        "symfony/mailer": "7.2.*",
+        "symfony/mime": "7.2.*",
         "symfony/monolog-bundle": "^3.0",
-        "symfony/notifier": "7.0.*",
-        "symfony/process": "7.0.*",
-        "symfony/property-access": "7.0.*",
-        "symfony/property-info": "7.0.*",
-        "symfony/runtime": "7.0.*",
-        "symfony/security-bundle": "7.0.*",
-        "symfony/serializer": "7.0.*",
+        "symfony/notifier": "7.2.*",
+        "symfony/process": "7.2.*",
+        "symfony/property-access": "7.2.*",
+        "symfony/property-info": "7.2.*",
+        "symfony/runtime": "7.2.*",
+        "symfony/security-bundle": "7.2.*",
+        "symfony/serializer": "7.2.*",
         "symfony/stimulus-bundle": "^2.17",
-        "symfony/string": "7.0.*",
-        "symfony/translation": "7.0.*",
-        "symfony/twig-bundle": "7.0.*",
-        "symfony/uid": "7.0.*",
+        "symfony/string": "7.2.*",
+        "symfony/translation": "7.2.*",
+        "symfony/twig-bundle": "7.2.*",
+        "symfony/uid": "7.2.*",
         "symfony/ux-turbo": "^2.17",
-        "symfony/validator": "7.0.*",
-        "symfony/web-link": "7.0.*",
-        "symfony/yaml": "7.0.*",
+        "symfony/validator": "7.2.*",
+        "symfony/web-link": "7.2.*",
+        "symfony/yaml": "7.2.*",
         "twig/extra-bundle": "^2.12|^3.0",
-        "twig/twig": "^2.12|^3.0",
-        "symfony/debug-bundle": "7.0.*"
+        "twig/twig": "^2.12|^3.0"
     },
     "config": {
         "allow-plugins": {
@@ -95,16 +96,16 @@
     "extra": {
         "symfony": {
             "allow-contrib": false,
-            "require": "7.0.*"
+            "require": "7.2.*"
         }
     },
     "require-dev": {
         "phpunit/phpunit": "^9.5",
-        "symfony/browser-kit": "7.0.*",
-        "symfony/css-selector": "7.0.*",
+        "symfony/browser-kit": "7.2.*",
+        "symfony/css-selector": "7.2.*",
         "symfony/maker-bundle": "^1.0",
-        "symfony/phpunit-bridge": "^7.0",
-        "symfony/stopwatch": "7.0.*",
-        "symfony/web-profiler-bundle": "7.0.*"
+        "symfony/phpunit-bridge": "^7.2",
+        "symfony/stopwatch": "7.2.*",
+        "symfony/web-profiler-bundle": "7.2.*"
     }
 }

config/packages/mailer.yaml

@@ -1,3 +1,4 @@
 framework:
   mailer:
-        dsn: '%env(MAILER_DSN)%'
+    dsn: "%env(MAILER_DSN)%"
+    message_bus: false

docker-compose.yml

@@ -4,10 +4,7 @@ services:
   sermon-notes:
     container_name: sermon-notes
     image: ryanprather/sermon-notes:latest
-    command:
-      - "php bin/console doctrine:migrations:migrate --no-interaction"
-      - "bash install.sh"
     ports:
       - 80:80
     volumes:
-      - .:/var/www/html
+      - ./data:/data

install.sh

@@ -10,8 +10,10 @@ LENGTH=32
 SECRET_KEY=$(openssl rand -base64 $LENGTH | tr -d '=' | tr -d '+' | tr -d '/' | tr -d ' ')
 TRIMMED_KEY=$(cut -c1-32 <<< $SECRET_KEY)
 echo "APP_SECRET=$TRIMMED_KEY" >> .env
-echo "DATABASE_URL=\"sqlite:///%kernel.project_dir%/var/data.db\"" >> .env
+echo "DATABASE_URL=\"sqlite:///data/data.db\"" >> .env
 echo "MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0" >> .env
 
-symfony console doctrine:migrations:migrate --no-interaction
 COMPOSER_ALLOW_SUPERUSER=1 composer update
+symfony console doctrine:migrations:migrate --no-interaction
+
+chown -R www-data:www-data /data

migrations/Version20240527010736.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240527010736 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE note ADD COLUMN recording VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE TEMPORARY TABLE __temp__note AS SELECT id, speaker_id, series_id, user_id, title, date, passage, refs, text FROM note');
+        $this->addSql('DROP TABLE note');
+        $this->addSql('CREATE TABLE note (id BLOB NOT NULL --(DC2Type:uuid)
+        , speaker_id BLOB DEFAULT NULL --(DC2Type:uuid)
+        , series_id BLOB DEFAULT NULL --(DC2Type:uuid)
+        , user_id BLOB DEFAULT NULL --(DC2Type:uuid)
+        , title VARCHAR(255) NOT NULL, date DATE NOT NULL, passage VARCHAR(255) NOT NULL, refs CLOB DEFAULT NULL --(DC2Type:json)
+        , text CLOB DEFAULT NULL, PRIMARY KEY(id), CONSTRAINT FK_CFBDFA14D04A0F27 FOREIGN KEY (speaker_id) REFERENCES speaker (id) NOT DEFERRABLE INITIALLY IMMEDIATE, CONSTRAINT FK_CFBDFA145278319C FOREIGN KEY (series_id) REFERENCES series (id) NOT DEFERRABLE INITIALLY IMMEDIATE, CONSTRAINT FK_CFBDFA14A76ED395 FOREIGN KEY (user_id) REFERENCES user (id) NOT DEFERRABLE INITIALLY IMMEDIATE)');
+        $this->addSql('INSERT INTO note (id, speaker_id, series_id, user_id, title, date, passage, refs, text) SELECT id, speaker_id, series_id, user_id, title, date, passage, refs, text FROM __temp__note');
+        $this->addSql('DROP TABLE __temp__note');
+        $this->addSql('CREATE INDEX IDX_CFBDFA14D04A0F27 ON note (speaker_id)');
+        $this->addSql('CREATE INDEX IDX_CFBDFA145278319C ON note (series_id)');
+        $this->addSql('CREATE INDEX IDX_CFBDFA14A76ED395 ON note (user_id)');
+    }
+}

migrations/Version20240622233923.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240622233923 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE user ADD COLUMN meta_data CLOB DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE TEMPORARY TABLE __temp__user AS SELECT id, email, roles, password, name FROM user');
+        $this->addSql('DROP TABLE user');
+        $this->addSql('CREATE TABLE user (id BLOB NOT NULL --(DC2Type:uuid)
+        , email VARCHAR(180) NOT NULL, roles CLOB NOT NULL --(DC2Type:json)
+        , password VARCHAR(255) NOT NULL, name VARCHAR(255) NOT NULL, PRIMARY KEY(id))');
+        $this->addSql('INSERT INTO user (id, email, roles, password, name) SELECT id, email, roles, password, name FROM __temp__user');
+        $this->addSql('DROP TABLE __temp__user');
+        $this->addSql('CREATE UNIQUE INDEX UNIQ_IDENTIFIER_EMAIL ON user (email)');
+    }
+}

migrations/Version20240717022017.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240717022017 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE TABLE shared_note (id BLOB NOT NULL --(DC2Type:uuid)
+        , note_id BLOB NOT NULL --(DC2Type:uuid)
+        , owner_id BLOB NOT NULL --(DC2Type:uuid)
+        , shared_user_id BLOB NOT NULL --(DC2Type:uuid)
+        , PRIMARY KEY(id), CONSTRAINT FK_754B918C26ED0855 FOREIGN KEY (note_id) REFERENCES note (id) NOT DEFERRABLE INITIALLY IMMEDIATE)');
+        $this->addSql('CREATE INDEX IDX_754B918C26ED0855 ON shared_note (note_id)');
+        $this->addSql('CREATE TABLE shared_series (id BLOB NOT NULL --(DC2Type:uuid)
+        , series_id BLOB NOT NULL --(DC2Type:uuid)
+        , owner_id BLOB NOT NULL --(DC2Type:uuid)
+        , shared_user_id BLOB NOT NULL --(DC2Type:uuid)
+        , PRIMARY KEY(id), CONSTRAINT FK_59E803195278319C FOREIGN KEY (series_id) REFERENCES series (id) NOT DEFERRABLE INITIALLY IMMEDIATE)');
+        $this->addSql('CREATE INDEX IDX_59E803195278319C ON shared_series (series_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('DROP TABLE shared_note');
+        $this->addSql('DROP TABLE shared_series');
+    }
+}

public/css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;EACA,wCAAA;EACA,eAAA;EACA,kBAAA;ACAJ;ADEI;EACI,yBAAA;ACAR;;ADIA;EACI,oCAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,2BAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,yBAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;ACDJ;;ADIA;;EAEI,oCAAA;EACA,uBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ","file":"style.css"}

public/css/style.min.css

@@ -1 +0,0 @@
-body{margin:0}.inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1060px;margin:0 auto}.ref-tab{width:60px;padding-top:75px !important}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.tab{margin-bottom:3px}.tab button{display:flex;justify-content:center;align-items:center;height:80px;width:100%;text-align:center;background-color:#f56a6a;color:#fff !important;border:none;border-radius:3px;box-shadow:0 4px 5px rgba(0,0,0,.8);font-size:14px;margin-bottom:3px}.tab button:active{background-color:#7a0016}.activeRef{background-color:#3e8e41 !important}.ref{width:35%}.ref>div#ref{vertical-align:top;justify-content:flex-start;align-content:flex-start;overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}#ref{padding:3px 3px 3px 10px}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#fields-container{display:none}#fields-container.show{display:block}.notes{width:55%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll}#previewBtn.active,#show-hide-btn.active{background-color:#f56a6a !important;color:#fff !important}#note-header-left{display:inline-flex;flex-direction:row;width:25%}#note-header-right{display:inline-flex;flex-direction:row-reverse;width:74%}#note-header-left h2.dirty{color:#ff8c00}#note-list{display:none}#note-list ul{margin:0;padding:0;list-style-type:none;list-style:none}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.8);width:400px;height:200px}div#refQuery #referenceSearch{border:none;border-radius:5px;padding:10px 20px;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f4;width:150px;height:25px;cursor:pointer;display:none}#passage-popup{display:none;position:absolute;z-index:100;background-color:#fff;color:#000;padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.3);width:300px;height:300px;overflow-x:scroll}#save-check{opacity:0;text-align:right;font-size:20pt;margin-left:15px;color:green}#save-check.saving{color:orange}#save-check.error{color:red}#fields-container input,#fields-container select{width:19.5%;display:inline-block}#old-notes article p:first-child{margin-bottom:0 !important;font-size:10pt}#old-notes article a{font-size:12pt}#old-notes article p:last-child{font-size:12pt}.inner{padding-left:0}.ref h2{display:inline-block}#ref{font-size:12pt}#referenceBook{display:none}/*# sourceMappingURL=style.min.css.map */