migrate email to use Util class and method

Fix bug with not clearing noteId
Refactor a class removal and additions
Add script.min.js

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.
 

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)');
+    }
+}

public/css/style.css

@@ -18,7 +18,7 @@ body {
 
 .ref-tab {
   width: 60px;
-  padding-top: 75px !important;
+  padding-top: 55px !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 */

public/css/style.css.map

@@ -1 +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,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"}
+{"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"}

public/css/style.min.css

@@ -1 +1 @@
-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 */
+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:55px !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;font-size:14px;margin-bottom:3px}.ref{width:36%}.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 3px}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#fields-container{display:none}#fields-container.show{display:block}.notes{width:57%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll;padding-left:10px}#notePreview ul,#notePreview ol{list-style-position:inside}#previewBtn.active,#show-hide-btn.active,.tab button.active,#openRefBtn.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;height:100%;overflow-y:scroll}#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:32.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}#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:.5;z-index:1000}.modal-container{position:absolute;width:300px;margin:0 auto;padding:20px;border:1px solid #ddd;background-color:#fff;box-shadow:0 0 10px rgba(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.min.css.map */

public/css/style.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAKJ,OACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,UAAA,CACA,2BAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,iBAAA,CAIJ,YACI,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CACA,wBAAA,CACA,qBAAA,CACA,WAAA,CACA,iBAAA,CACA,mCAAA,CACA,cAAA,CACA,iBAAA,CAEA,mBACI,wBAAA,CAIR,WACI,mCAAA,CAGJ,KACI,SAAA,CAGJ,aACI,kBAAA,CACA,0BAAA,CACA,wBAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,KACI,wBAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,kBACI,YAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CAGJ,yCAEI,mCAAA,CACA,qBAAA,CAGJ,kBACI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,mBAAA,CACA,0BAAA,CACA,SAAA,CAGJ,2BACI,aAAA,CAGJ,WACI,YAAA,CAGJ,cACI,QAAA,CACA,SAAA,CACA,oBAAA,CACA,eAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CACA,WAAA,CACA,YAAA,CAGJ,8BACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA,CACA,YAAA,CAGJ,eACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,qBAAA,CACA,UAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CACA,WAAA,CACA,YAAA,CACA,iBAAA,CAGJ,YACI,SAAA,CACA,gBAAA,CACA,cAAA,CACA,gBAAA,CACA,WAAA,CAGJ,mBACI,YAAA,CAGJ,kBACI,SAAA,CAGJ,iDAEI,WAAA,CACA,oBAAA,CAGJ,iCACI,0BAAA,CACA,cAAA,CAGJ,qBACI,cAAA,CAGJ,gCACI,cAAA,CAGJ,OACI,cAAA,CAGJ,QACI,oBAAA,CAGJ,KACI,cAAA,CAGJ,eACI,YAAA","file":"style.min.css"}
+{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAKJ,OACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,UAAA,CACA,2BAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,iBAAA,CAIJ,YACI,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CACA,cAAA,CACA,iBAAA,CAIJ,KACI,SAAA,CAGJ,aACI,kBAAA,CACA,0BAAA,CACA,wBAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,KACI,uBAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,kBACI,YAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,iBAAA,CAGJ,gCAEI,0BAAA,CAGJ,+EAII,mCAAA,CACA,qBAAA,CAGJ,kBACI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,mBAAA,CACA,0BAAA,CACA,SAAA,CAGJ,2BACI,aAAA,CAGJ,WACI,YAAA,CACA,WAAA,CACA,iBAAA,CAGJ,cACI,QAAA,CACA,SAAA,CACA,oBAAA,CACA,eAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CACA,WAAA,CACA,YAAA,CAGJ,8BACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA,CACA,YAAA,CAGJ,eACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,qBAAA,CACA,UAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CACA,WAAA,CACA,YAAA,CACA,iBAAA,CAGJ,YACI,SAAA,CACA,gBAAA,CACA,cAAA,CACA,gBAAA,CACA,WAAA,CAGJ,mBACI,YAAA,CAGJ,kBACI,SAAA,CAGJ,iDAEI,WAAA,CACA,oBAAA,CAGJ,iCACI,0BAAA,CACA,cAAA,CAGJ,qBACI,cAAA,CAGJ,gCACI,cAAA,CAGJ,OACI,cAAA,CAGJ,QACI,oBAAA,CAGJ,KACI,cAAA,CAGJ,gBAEI,0BAAA,CAGJ,eACI,YAAA,CAGJ,gBACI,aAAA,CACA,UAAA,CACA,oBAAA,CAGJ,eACI,SAAA,CACA,cAAA,CAGJ,gBACI,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CACA,qBAAA,CACA,UAAA,CACA,YAAA,CAGJ,iBACI,iBAAA,CACA,WAAA,CAEA,aAAA,CACA,YAAA,CACA,qBAAA,CACA,qBAAA,CACA,kCAAA,CACA,YAAA,CAGJ,cACI,wBAAA,CACA,YAAA,CACA,4BAAA,CAGJ,YACI,YAAA,CAGJ,cACI,wBAAA,CACA,YAAA,CACA,yBAAA,CAGJ,eACI,aAAA","file":"style.min.css"}

public/css/style.scss

@@ -19,7 +19,7 @@ body {
 
 .ref-tab {
     width: 60px;
-    padding-top: 75px !important;
+    padding-top: 55px !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;
+}

public/js/data.json

@@ -1354,5 +1354,29 @@
     "wlc": [
         1,
         196
+    ],
+    "lbc": [
+        1,
+        32
+    ],
+    "39a": [
+        1,
+        39
+    ],
+    "1hc": [
+        1,
+        10
+    ],
+    "2hc": [
+        1,
+        30
+    ],
+    "sd": [
+        1,
+        32
+    ],
+    "agc": [
+        1,
+        28
     ]
 }

public/js/script.js

@@ -4,11 +4,33 @@ var references = {};
 var tabs = [];
 let saved = false;
 let textDirty = false;
-let saveTimeout = 10000;
 var to = null;
 let controller;
 var BOOKS = {};
 
+$(function () {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/index.php/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+});
+
+function setBooks() {
     fetch('/js/data.json')
         .then((res) => {
             if (!res.ok) {
@@ -22,7 +44,9 @@ fetch('/js/data.json')
         .catch((error) => {
             console.log(error);
         })
+}
 
+function setEventListeners() {
     document.addEventListener('keyup', function (event) {
         if (event.key == "F3") {
             openRef(false);
@@ -37,6 +61,7 @@ document.querySelector('#notes').addEventListener('keyup', function (event) {
             document.querySelector('#note-header-left h2').classList.add('dirty');
         }
     });
+}
 
 function setHeight() {
     md = new markdownit({
@@ -78,7 +103,7 @@ function setHeight() {
         });
     }
     if (!to) {
-        to = setTimeout(saveNote, saveTimeout);
+        to = setTimeout(saveNote, saveInterval);
     }
 }
 
@@ -133,7 +158,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 +179,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,6 +196,7 @@ 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({
@@ -177,33 +205,41 @@ function saveNote(event) {
         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;
+            }
         });
 }
 
@@ -231,7 +267,8 @@ function isUuidValid(uuid) {
 }
 
 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 +282,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,31 +302,37 @@ 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('/index.php/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') {
-                    alert('Note deleted.');
+            if (data.msg != 'deleted') {
+                return;
             }
-            })
-    });
 
-    openRef();
+            alert('Note deleted.');
+            row.remove();
+        });
 }
 
 function newSpeaker() {
@@ -368,6 +412,8 @@ function saveSeries(event) {
 }
 
 function openRef(closeSidebar = true) {
+    document.querySelector('#openRefBtn').classList.add('active');
+
     refQuery = document.querySelector('#refQuery');
     refQuery.style.display = 'block';
 
@@ -389,6 +435,7 @@ function closeRef() {
     document.querySelector('#verse-range').innerText = '';
 
     document.querySelector('#refQuery').style.display = 'none';
+    document.querySelector('#openRefBtn').classList.remove('active');
 }
 
 function queryRef(type = null, book = null, input = null) {
@@ -438,10 +485,11 @@ function queryRef(type = null, book = null, input = null) {
 function makeButton(title) {
     var btn = document.createElement('button');
     btn.innerText = title;
+    btn.class = 'button';
     btn.addEventListener('click', function () {
         removeActiveRef();
         document.querySelector('#ref').innerHTML = md.render(references[title]);
-        this.classList.add('activeRef');
+        this.classList.add('active');
         findRefLinks();
     });
 
@@ -456,16 +504,16 @@ function makeButton(title) {
     });
 
     removeActiveRef();
-    btn.classList.add('activeRef');
+    btn.classList.add('active');
 
     return btn;
 }
 
 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');
         }
     }
 }
@@ -573,6 +621,30 @@ function retrieveBooks() {
             newBook.text = BOOKS.cd[x];
             bookList.appendChild(newBook);
         }
+    } else if (selectedType == 'note') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+
+        fetch('/index.php/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];
@@ -622,15 +694,42 @@ function filterVerse() {
     verseRange.innerText = 'Verse: ' + verse;
 }
 
+function retrieveReferenceType(el) {
+    fetch('/index.php/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);
+            }
+        })
+}
+
 function retrieveReference(el) {
+    if (el.value == 'new') {
+        document.querySelector('#refName').style.display = 'inline-block';
+        return;
+    }
     fetch('/index.php/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())

public/theme/assets/css/main.css

@@ -2233,7 +2233,6 @@ a.image:hover img {
 ol {
     list-style: decimal;
     margin: 0 0 2em 0;
-    padding-left: 1.5em;
 }
 
 ol li {
@@ -2243,7 +2242,6 @@ ol li {
 ul {
     list-style: disc;
     margin: 0 0 2em 0;
-    padding-left: 1em;
 }
 
 ul.alt {
@@ -3088,13 +3086,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 +3102,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;
     }
 }
 
@@ -3229,9 +3227,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;
@@ -3289,11 +3287,13 @@ button:disabled,
     }
 
     #sidebar .toggle {
-        height: 6.25em;
+        height: 4.5em;
         left: 24em;
-        line-height: 6.25em;
+        line-height: 4.5em;
         text-indent: 5em;
         width: 5em;
+        background-color: #fff;
+        margin-left: 1em;
     }
 
     #sidebar .toggle:before {
@@ -3338,7 +3338,7 @@ button:disabled,
 
     #sidebar .toggle {
         text-indent: 6em;
-        width: 6em;
+        width: 4.5em;
     }
 
     #sidebar .toggle:before {

src/Controller/AjaxController.php

@@ -4,6 +4,7 @@ namespace App\Controller;
 
 use DateTime;
 
+use Parsedown;
 use App\Entity\Reference;
 use App\Entity\Template;
 use App\Entity\User;
@@ -11,10 +12,14 @@ use App\Entity\Bible;
 use App\Entity\Speaker;
 use App\Entity\Series;
 use App\Entity\Note;
+use App\Entity\NoteShares;
+use App\Utils\Utils;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Mailer\MailerInterface;
+use Symfony\Component\Mime\Address;
 use Symfony\Component\Routing\Attribute\Route;
 
 class AjaxController extends AbstractController
@@ -166,6 +171,7 @@ class AjaxController extends AbstractController
         }
 
         ReferenceController::$emi = $emi;
+        $user = $this->getUser();
 
         $ret = match(strtolower($data->type)) {
             'bible' => ReferenceController::retrieveBible("{$data->book} {$search}"),
@@ -175,7 +181,14 @@ class AjaxController extends AbstractController
             'wcf' => ReferenceController::retrieveWCF($ref),
             'wsc' => ReferenceController::retrieveWSC($ref),
             'wlc' => ReferenceController::retrieveWLC($ref),
-            'creed' => ReferenceController::retrieveCreed($data->book)
+            'lbc' => ReferenceController::retrieveLBC($ref),
+            'creed' => ReferenceController::retrieveCreed($data->book),
+            '39a' => ReferenceController::retrieve39a($ref),
+            '1hc' => ReferenceController::retrieve1HC($ref),
+            '2hc' => ReferenceController::retrieve2HC($ref),
+            'sd' => ReferenceController::retrieveSD($ref),
+            'agc' => ReferenceController::retrieveAGC($ref),
+            'note' => ReferenceController::retrieveNote($user)
         };
 
         if (!is_a($ret, Reference::class)) {
@@ -195,19 +208,12 @@ class AjaxController extends AbstractController
     {
         $res = new Response();
         $data = json_decode($req->getContent());
-        $ret = match ($data->type) {
-            'creed' => '/Creeds/',
-            'bc' => '/Belgic/',
-            'hc' => '/Heidelberg/',
-            'cd' => '/Dort/',
-            'wcf' => '/Westminster/Confessions/',
-            'wsc' => '/Westminster/Shorter Catechism/',
-            'wlc' => '/Westminster/Larger Catechism/'
-        };
+        $ref = $emi->getRepository(Reference::class)->find($data->id);
 
-        $fc = file_get_contents(dirname(dirname(__DIR__))."/references{$ret}{$data->file}");
-
-        $res->setContent(json_encode(['text' => $fc]));
+        if (!is_a($ref, Reference::class)) {
+            $ref = new Reference();
+        }
+        $res->setContent(json_encode(['text' => $ref->getContent()]));
 
         return $res;
     }
@@ -224,7 +230,13 @@ class AjaxController extends AbstractController
             'cd' => 'Dort',
             'wcf' => 'Westminster/Confessions',
             'wsc' => 'Westminster/Shorter Catechism',
-            'wlc' => 'Westminster/Larger Catechism'
+            'wlc' => 'Westminster/Larger Catechism',
+            'lbc' => 'London',
+            '39a' => '39 Articles',
+            '1hc' => '1 Helvetic Catechism',
+            '2hc' => '2 Helvetic Catechism',
+            'sd' => 'Savor Declaration',
+            'agc' => 'Augsburg Confession'
         };
 
         $ret = file_put_contents(dirname(dirname(__DIR__))."/references/{$path}/{$data->file}", $data->text);
@@ -251,6 +263,18 @@ class AjaxController extends AbstractController
         return $res;
     }
 
+    #[Route('/get-notes', name: 'app_get_notes')]
+    public function getNotes(EntityManagerInterface $emi): Response
+    {
+        /** @var User $user */
+        $user = $this->getUser();
+        $notes = $emi->getRepository(Note::class)->reverseNoteSort($user);
+        $res = new Response();
+        $res->setContent(json_encode(['data'=> $notes]));
+
+        return $res;
+    }
+
     #[Route('/get-note', name: 'app_get_note')]
     public function getNote(Request $req, EntityManagerInterface $emi): Response
     {
@@ -274,6 +298,10 @@ class AjaxController extends AbstractController
             if (is_array($note) && count($note) > 0) {
                 /** @var Note $note */
                 $note = $note[0];
+            } else {
+                $note = new Note();
+                $newNote = true;
+                $note->setUser($this->getUser());
             }
         } else {
             $note = new Note();
@@ -293,6 +321,7 @@ class AjaxController extends AbstractController
              ->setSpeaker($speaker)
              ->setText($data->note)
              ->setPassage($data->passage)
+             ->setRecording($data->recording)
              ->setRefs($refs);
 
         $emi->persist($note);
@@ -308,7 +337,7 @@ class AjaxController extends AbstractController
         return $res;
     }
 
-    #[Route('/discard-note', name: 'app_discard_note', methods: ['POST'])]
+    #[Route('/delete-note', name: 'app_discard_note', methods: ['POST'])]
     public function discardNote(Request $req, EntityManagerInterface $emi): Response
     {
         $data = json_decode($req->getContent());
@@ -323,6 +352,61 @@ class AjaxController extends AbstractController
         return $res;
     }
 
+    #[Route('/share-note', name: 'app_share_note', methods: ['POST'])]
+    public function shareNote(Request $req, EntityManagerInterface $emi, MailerInterface $mailer): Response
+    {
+        $data = json_decode($req->getContent());
+        $note = $emi->getRepository(Note::class)->find($data->id);
+        /** @var User $user */
+        $user = $this->getUser();
+        $shared = $emi->getRepository(User::class)->findBy(['email' => $data->email]);
+        $email = $data->email;
+        $isRegistered = false;
+
+        if (!$note) {
+            $res = new Response();
+            $res->setContent(json_encode([
+                'msg' => 'Note Not Found'
+            ]));
+        }
+
+        if (is_array($shared) && count($shared) > 0) {
+            $ns = new NoteShares();
+            $ns->setNote($note)
+               ->setOwner($user)
+               ->setShare($shared[0]);
+            $emi->persist($ns);
+            $emi->flush();
+
+            $email = $shared[0]->getEmail();
+            $isRegistered = true;
+        }
+
+        $Parsedown = new Parsedown();
+
+        $util = new Utils();
+        $util->sendEmail(
+            $mailer,
+            new Address('ryan@rkprather.com', 'Sermon Notes'),
+            new Address($email),
+            'Note Shared',
+            $this->renderView('emails/note-shared.html.twig', [
+                'note' => $note,
+                'owner' => $user,
+                'isRegistered' => $isRegistered,
+                'formattedText' => $Parsedown->text($note->getText()),
+                'domain' => $_ENV['DOMAIN'],
+            ])
+        );
+
+        $res = new Response();
+        $res->setContent(json_encode([
+            'msg' => 'shared'
+        ]));
+
+        return $res;
+    }
+
     #[Route('/get-passage/{passage}', name: 'app_get_passage')]
     public function getPassage($passage, EntityManagerInterface $emi): Response
     {
@@ -363,4 +447,52 @@ class AjaxController extends AbstractController
 
         return $res;
     }
+
+    #[Route('/save-settings', name: 'app_save_settings', methods: ['POST'])]
+    public function saveSettings(Request $req, EntityManagerInterface $emi): Response
+    {
+        $data = json_decode($req->getContent());
+        /** @var User $user */
+        $user = $this->getUser();
+
+        if (!$user) {
+            return new Response(json_encode([
+                'msg' => 'No User'
+            ]));
+        }
+
+        if (!$data->saveInterval) {
+            $data->saveInterval = 15;
+        }
+
+        if (!$data->saveReferences) {
+            $data->saveReferences = true;
+        }
+
+        if (!$data->noteTextSize) {
+            $data->noteTextSize = 12;
+        }
+
+        if (!$data->trackSaveSize) {
+            $data->trackSaveSize = false;
+        }
+
+        $meta = $user->getMetaData();
+        $meta['saveInterval'] = $data->saveInterval;
+        $meta['saveReferences'] = $data->saveReferences;
+        $meta['noteTextSize'] = $data->noteTextSize;
+        $meta['trackSaveSize'] = $data->trackSaveSize;
+        $meta['saveTimeout'] = $data->saveTimeout;
+        $meta['save-failure-count'] = $data->saveFailureCount;
+        $user->setMetaData($meta);
+        $emi->persist($user);
+        $emi->flush();
+
+        $res = new Response();
+        $res->setContent(json_encode([
+            'msg' => 'Settings Saved'
+        ]));
+
+        return $res;
+    }
 }

src/Controller/DefaultController.php

@@ -3,7 +3,6 @@
 namespace App\Controller;
 
 use App\Entity\Note;
-use App\Entity\Reference;
 use App\Entity\User;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -11,13 +10,15 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Http\Attribute\CurrentUser;
-use Symfony\Component\Uid\Uuid;
 
 class DefaultController extends AbstractController
 {
     #[Route('/', name: 'app_index')]
     public function index(): Response
     {
+        if ($this->isGranted('IS_AUTHENTICATED_FULLY')) {
+            return $this->redirect('/index.php/home');
+        }
         return $this->render('default/index.html.twig');
     }
 
@@ -27,11 +28,47 @@ class DefaultController extends AbstractController
         $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
         $last4Notes = $emi->getRepository(Note::class)->getLast4Notes($user);
         $openNotes = $emi->getRepository(Note::class)->reverseNoteSort($user);
+        $meta = $user->getMetaData();
 
         return $this->render('default/home.html.twig', [
             'last4Notes' => $last4Notes,
             'reverseNoteSort' => $openNotes,
             'isAdmin' => $this->isGranted('ROLE_ADMIN'),
+            'meta' => $meta,
+        ]);
+    }
+
+    #[Route('/cheat-sheet', name: 'app_cheat_sheet')]
+    public function cheatSheet(): Response
+    {
+        return $this->render('default/cheat-sheet.html.twig');
+    }
+
+    #[Route('/profile', name: 'app_profile')]
+    public function profile(): Response
+    {
+        /** @var User $user */
+        $user = $this->getUser();
+        if (!$user) {
+            return $this->redirectToRoute('app_login');
+        }
+        $meta = $user->getMetaData();
+        if (!$meta) {
+            $meta = [
+                'saveInterval' => 15,
+                'saveReferences' => 'checked',
+                'noteTextSize' => 12,
+                'trackSaveSize' => null,
+                'saveFailureCount' => 3,
+                'saveTimeout' => 5,
+            ];
+        } else {
+            $meta['saveReferences'] = $meta['saveReferences'] ? 'checked' : null;
+            $meta['trackSaveSize'] = $meta['trackSaveSize'] ? 'checked' : null;
+        }
+
+        return $this->render('default/profile.html.twig', [
+            'meta' => $meta,
         ]);
     }
 
@@ -40,23 +77,7 @@ class DefaultController extends AbstractController
     {
         $this->denyAccessUnlessGranted('ROLE_ADMIN');
 
-        $creeds = $emi->getRepository(Reference::class)->findByType('creed');
-        $belgic = $emi->getRepository(Reference::class)->findByType('belgic');
-        $heidelberg = $emi->getRepository(Reference::class)->findByType('heidelberg');
-        $dort = $emi->getRepository(Reference::class)->findByType('dort');
-        $wcf = $emi->getRepository(Reference::class)->findByType('wcf');
-        $wsc = $emi->getRepository(Reference::class)->findByType('wsc');
-        $wlc = $emi->getRepository(Reference::class)->findByType('wlc');
-
-        return $this->render('editors/reference-editor.html.twig', [
-            'creeds' => $creeds,
-            'belgic' => $belgic,
-            'heidelberg' => $heidelberg,
-            'dort' => $dort,
-            'wcf' => $wcf,
-            'wsc' => $wsc,
-            'wlc' => $wlc
-        ]);
+        return $this->render('editors/reference-editor.html.twig');
     }
 
     #[Route('/template-editor', name: 'app_template_editor')]

src/Controller/ReferenceController.php

@@ -3,7 +3,9 @@
 namespace App\Controller;
 
 use App\Entity\Bible;
+use App\Entity\Note;
 use App\Entity\Reference;
+use App\Entity\User;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
@@ -144,6 +146,9 @@ class ReferenceController extends AbstractController
     public static function retrieveWSC($ref): Reference
     {
         $r = self::$emi->getRepository(Reference::class)->findBy(['type' => $ref->getType(), 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
         return $r[0];
     }
 
@@ -157,6 +162,9 @@ class ReferenceController extends AbstractController
     public static function retrieveWLC($ref): Reference
     {
         $r = self::$emi->getRepository(Reference::class)->findBy(['type' => $ref->getType(), 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
         return $r[0];
     }
 
@@ -170,6 +178,79 @@ class ReferenceController extends AbstractController
     public static function retrieveWCF($ref): Reference
     {
         $r = self::$emi->getRepository(Reference::class)->findBy(['type' => $ref->getType(), 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
         return $r[0];
     }
+
+    public static function retrieveLBC($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => 'lbc', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieveAGC($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => 'agc', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieve39a($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => '39a', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieve1HC($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => '1hc', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieve2HC($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => '2hc', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieveSD($ref): Reference
+    {
+        $r = self::$emi->getRepository(Reference::class)->findBy(['type' => 'sd', 'ndx' => $ref->getNdx()]);
+        if (!$r) {
+            return new Reference();
+        }
+        return $r[0];
+    }
+
+    public static function retrieveNote(?User $user): array
+    {
+        $notes = self::$emi->getRepository(Note::class)->findBy(['user' => $user], ['date' => 'DESC']);
+        return $notes;
+    }
+
+    #[Route('/reference/{type}', name: 'app_reference_by_type', methods: ['GET'])]
+    public function retrieveReferenceByType(string $type, EntityManagerInterface $emi): Response
+    {
+        $res = new Response();
+        $data = $emi->getRepository(Reference::class)->findByType($type);
+
+        $res->setContent(json_encode($data));
+        return $res;
+    }
 }

src/Controller/RegistrationController.php

@@ -4,18 +4,25 @@ namespace App\Controller;
 
 use App\Entity\User;
 use App\Form\RegistrationFormType;
+use App\Utils\Utils;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Mailer\MailerInterface;
+use Symfony\Component\Mime\Address;
 use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
 use Symfony\Component\Routing\Attribute\Route;
 
 class RegistrationController extends AbstractController
 {
     #[Route('/register', name: 'app_register')]
-    public function register(Request $request, UserPasswordHasherInterface $userPasswordHasher, EntityManagerInterface $entityManager): Response
-    {
+    public function register(
+        Request $request,
+        UserPasswordHasherInterface $userPasswordHasher,
+        EntityManagerInterface $entityManager,
+        MailerInterface $mailer
+    ): Response {
         $user = new User();
 
         $form = $this->createForm(RegistrationFormType::class, $user);
@@ -39,6 +46,8 @@ class RegistrationController extends AbstractController
             $entityManager->persist($user);
             $entityManager->flush();
 
+            $this->sendEmail($user, $mailer);
+
             return $this->redirectToRoute('app_home');
         }
 
@@ -46,4 +55,18 @@ class RegistrationController extends AbstractController
             'registrationForm' => $form,
         ]);
     }
+
+    private function sendEmail(User $user, MailerInterface $mailer): void
+    {
+        $util = new Utils();
+        $util->sendEmail(
+            $mailer,
+            new Address('ryan@rkprather.com'),
+            new Address('ryan@rkprather.com'),
+            'New Account',
+            $this->renderView('emails/registration.html.twig', [
+                'user' => $user
+            ])
+        );
+    }
 }

src/Entity/Note.php

@@ -42,6 +42,9 @@ class Note implements JsonSerializable
     #[ORM\ManyToOne(inversedBy: 'notes')]
     private ?User $user = null;
 
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $recording = null;
+
     public function getId(): ?Uuid
     {
         return $this->id;
@@ -166,12 +169,21 @@ class Note implements JsonSerializable
     {
         return "<a href='#' onclick=\"retrieveNote('{$this->id}')\">".
             $this->title.
-            "</a>";
+            "</a>&nbsp;".
+            "<a href='#' onclick=\"deleteNote('{$this->id}', this)\">".
+                "<i class='fas fa-trash-alt'></i>".
+            "</a>".
+            (
+                $this->recording ? "<br/>".
+                "<a href='{$this->recording}' target='_blank' class='recording-link'>".
+                    "<i class='fa fa-play-circle'></i>".
+                "</a>" : null
+            );
     }
 
     public function toTableRow(): string
     {
-        return "<tr>".
+        return "<tr data-id='row-{$this->id->toHex()}'>".
             "<td>{$this->toLink()}</td>".
             "<td>{$this->speaker->getName()}</td>".
             "<td>{$this->passage}</td>".
@@ -183,6 +195,7 @@ class Note implements JsonSerializable
     {
         return [
             'id' => $this->getId(),
+            'link' => $this->toLink(),
             'title' => $this->getTitle(),
             'date' => $this->getDate(),
             'passage' => $this->getPassage(),
@@ -193,4 +206,16 @@ class Note implements JsonSerializable
             'user' => $this->getUser(),
         ];
     }
+
+    public function getRecording(): ?string
+    {
+        return $this->recording;
+    }
+
+    public function setRecording(?string $recording): static
+    {
+        $this->recording = $recording;
+
+        return $this;
+    }
 }

src/Entity/User.php

@@ -11,6 +11,7 @@ use Symfony\Bridge\Doctrine\Types\UuidType;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
 use Symfony\Component\Uid\Uuid;
+use Symfony\Component\Validator\Constraints as Assert;
 
 #[ORM\Entity(repositoryClass: UserRepository::class)]
 #[ORM\UniqueConstraint(name: 'UNIQ_IDENTIFIER_EMAIL', fields: ['email'])]
@@ -23,6 +24,9 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, JsonSer
     private ?Uuid $id = null;
 
     #[ORM\Column(length: 180)]
+    #[Assert\Email(
+        message: 'The email {{ value }} is not a valid email.',
+    )]
     private ?string $email = null;
 
     /**
@@ -64,12 +68,22 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, JsonSer
     #[ORM\OneToMany(targetEntity: Note::class, mappedBy: 'user')]
     private Collection $notes;
 
+    /**
+     * @var Collection<int, NoteShares>
+     */
+    #[ORM\OneToMany(targetEntity: NoteShares::class, mappedBy: 'ownerId', orphanRemoval: true)]
+    private Collection $noteShares;
+
+    #[ORM\Column(nullable: true)]
+    private ?array $metaData = null;
+
     public function __construct()
     {
         $this->series = new ArrayCollection();
         $this->speakers = new ArrayCollection();
         $this->templates = new ArrayCollection();
         $this->notes = new ArrayCollection();
+        $this->noteShares = new ArrayCollection();
     }
 
     public function getId(): ?Uuid
@@ -77,6 +91,11 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, JsonSer
         return $this->id;
     }
 
+    public function getHexId(): string
+    {
+        return $this->id->toHex();
+    }
+
     public function setId(?Uuid $id): static
     {
         $this->id = $id;
@@ -299,4 +318,46 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, JsonSer
             'name' => $this->name,
         ];
     }
+
+    /**
+     * @return Collection<int, NoteShares>
+     */
+    public function getNoteShares(): Collection
+    {
+        return $this->noteShares;
+    }
+
+    public function addNoteShare(NoteShares $noteShare): static
+    {
+        if (!$this->noteShares->contains($noteShare)) {
+            $this->noteShares->add($noteShare);
+            $noteShare->setOwner($this);
+        }
+
+        return $this;
+    }
+
+    public function removeNoteShare(NoteShares $noteShare): static
+    {
+        if ($this->noteShares->removeElement($noteShare)) {
+            // set the owning side to null (unless already changed)
+            if ($noteShare->getOwner() === $this) {
+                $noteShare->setOwner(null);
+            }
+        }
+
+        return $this;
+    }
+
+    public function getMetaData(): ?array
+    {
+        return $this->metaData;
+    }
+
+    public function setMetaData(?array $metaData): static
+    {
+        $this->metaData = $metaData;
+
+        return $this;
+    }
 }

src/Utils/Utils.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Utils;
+
+use Symfony\Component\Mailer\Exception\TransportExceptionInterface;
+use Symfony\Component\Mailer\MailerInterface;
+use Symfony\Component\Mime\Address;
+use Symfony\Component\Mime\Email;
+
+class Utils
+{
+    public function sendEmail(MailerInterface $mailer, Address $from, Address $to, string $subject, string $content)
+    {
+        //$dsn = "smtp://{$_ENV['MAIL_USER']}:{$_ENV['MAIL_PWD']}@{$_ENV['MAIL_SERVER']}:{$_ENV['MAIL_PORT']}";
+        //dump($_ENV['MAILER_DSN']);
+        //$_ENV['MAILER_DSN'] = $dsn;
+        //dump($_ENV['MAILER_DSN']);
+        //die;
+
+        $mail = (new Email())
+            ->from($from)
+            ->to($to)
+            ->subject($subject)
+            ->replyTo($from)
+            ->html($content);
+
+        try {
+            $mailer->send($mail);
+        } catch (TransportExceptionInterface $e) {
+            die($e->getMessage());
+            // some error prevented the email sending; display an
+            // error message or try to resend the message
+        }
+    }
+}

templates/base.html.twig

@@ -12,7 +12,7 @@
         <title>{% block title %}Welcome!{% endblock %}</title>
         {% block stylesheets %}{% endblock %}
     </head>
-    <body class='is-preload' onload='setHeight()' onresize='setHeight()'>
+    <body class='is-preload' onresize='setHeight()'>
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock %}
     </body>

templates/default/cheat-sheet.html.twig

@@ -0,0 +1,163 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Markdown Cheat Sheet{% endblock %}
+
+{% block stylesheets %}
+<link href="/theme/assets/css/main.css" rel="stylesheet" />
+<link href='/theme/assets/css/jquery-ui.theme.css' rel='stylesheet' />
+<link href='/theme/assets/css/jquery-ui.structure.css' rel='stylesheet' />
+<link href='/css/style.css' rel='stylesheet' />
+<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
+{% endblock %}
+
+{% block javascripts %}
+<script src="/theme/assets/js/jquery.min.js"></script>
+<script src='/theme/assets/js/jquery-ui.js'></script>
+<script src="/theme/assets/js/browser.min.js"></script>
+<script src="/theme/assets/js/breakpoints.min.js"></script>
+<script src="/theme/assets/js/util.js"></script>
+<script src="/theme/assets/js/main.js"></script>
+<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
+<script src='/js/script.js'></script>
+{% endblock %}
+
+{% block body %}
+<div style='padding-left:5px;'>
+<h1>Markdown Cheat Sheet</h1>
+
+<p>The following was provided by <a href='https://www.markdownguide.com'>The Markdown Guid</a></p>
+
+<p> This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements.  It can't cover every edge case, so if you need more information about any of these elements, refere to the reference guides for <a href='//www.markdownguide.org/basic-syntax/'>basic syntax</a> and </a href='//www.markdownguide.org/extended-syntax/'>extended syntax</a>.</p>
+
+<h2>Basic Syntax</h2>
+
+<p>These are the elements outlined in John Gruberal's original design document. All Markdown applications support these elements. The quoted text is what is needed to render what is displayed right below</p>
+
+<h3>Headings</h3>
+
+"# H1"<br/>
+<h1># H1</h1>
+
+"## H2"<br/>
+<h2>## H2</h2>
+
+"### H3"<br/>
+<h3>### H3</h3>
+
+<h3>Bold</h3>
+
+"**bold text**"<br/>
+<strong>bold text</strong>
+
+<h3>Italic</h3>
+
+"*italicized text*"<br/>
+<i>italicized text</i>
+
+<h3>Blockquote</h3>
+
+"> blockquote"<br/>
+<blockquote>blockquote</blockquote>
+
+<h3>Ordered List</h3>
+
+"1. First item"<br/>
+"2. Second item"<br/>
+"3. Third item"<br/>
+<br/>
+
+<ol style='list-style-position:inside;'>
+    <li>First item</li>
+    <li>Second item</li>
+    <li>Third item</li>
+</ol>
+
+<h3>Unordered List</h3>
+
+"- First item"<br/>
+"- Second item"<br/>
+"- Third item"<br/>
+<br/>
+
+<ul style='list-style-position:inside;'>
+    <li>First item</li>
+    <li>Second item</li>
+    <li>Third item</li>
+</ul>
+
+<h3>Code</h3>
+
+"`code`"<br/>
+
+<code>code</code><br/>
+
+<h3>Horizontal Rule</h3>
+
+"---"<br/>
+
+<hr/>
+
+<h3>Link</h3>
+
+"[Markdown Guide](https://www.markdownguide.org)"<br/>
+
+<a href='//www.markdownguide.org'>Markdown Guide</a><br/>
+
+<h3>Image</h3>
+
+"![alt text](https://www.markdownguide.org/assets/images/tux.png)"<br/>
+
+<img src='//www.markdownguide.org/assets/images/tux.png' alt='alt text' /><br/>
+
+<h2>Extended Syntax</h2>
+
+<p>These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.</p>
+
+<h3>Table</h3>
+
+| Syntax | Description |<br/>
+| ----------- | ----------- |<br/>
+| Header | Title |<br/>
+| Paragraph | Text |<br/>
+<br/>
+
+<table>
+<thead>
+<th>Syntax</th>
+<th>Description</th>
+</thead>
+<tbody>
+<tr>
+<td>Header</td>
+<td>Title</td>
+</tr>
+<tr>
+<td>Paragraph</td>
+<td>Text</td>
+</tr>
+</tbody>
+</table>
+
+<h3>Fenced Code Block</h3>
+
+<p>Specifying the language after the first 3 backticks may help with text formatting and highlighting based on the language entered, may or may not be supported in a given Markdown tools implementation</p>
+
+```json<br/>
+{<br/>
+&nbsp;&nbsp;"firstName": "John",<br/>
+&nbsp;&nbsp;"lastName": "Smith",<br/>
+&nbsp;&nbsp;"age": 25,<br/>
+}<br/>
+```<br/>
+
+<pre>
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+</pre>
+</div>
+{% endblock %}

templates/default/home.html.twig

@@ -7,17 +7,32 @@
 <link href='/theme/assets/css/jquery-ui.theme.css' rel='stylesheet' />
 <link href='/theme/assets/css/jquery-ui.structure.css' rel='stylesheet' />
 <link href='/css/style.css' rel='stylesheet' />
+<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
+<style>
+#notes,
+#notePreview {
+    font-size: {{ meta.noteTextSize }}pt;
+}
+</style>
 {% endblock %}
 
 {% block javascripts %}
-<script src='/js/script.js'></script>
 <script src="/theme/assets/js/jquery.min.js"></script>
 <script src='/theme/assets/js/jquery-ui.js'></script>
 <script src="/theme/assets/js/browser.min.js"></script>
 <script src="/theme/assets/js/breakpoints.min.js"></script>
 <script src="/theme/assets/js/util.js"></script>
 <script src="/theme/assets/js/main.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
+<script>
+let saveInterval = ({{ meta.saveInterval }} * 1000);
+let saveTimeout = ({{ meta.saveTimeout }} * 1000);
+const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
+let saveFailureCount = {{ meta.saveFailureCount }};
+</script>
+<script src='/js/script.js'></script>
 {% endblock %}
 
 {% block body %}
@@ -34,11 +49,11 @@
                 <div style='display:inline-block'>
                     <button onclick='increaseFont()'><i class='fa fa-plus'></i></button>&nbsp;
                     <button onclick='decreaseFont()'><i class='fa fa-minus'></i></button>&nbsp;
-                    <button onclick='openRef(false)'><i class='fa fa-book'></i></button>
+                    <button id='openRefBtn' class='button' onclick='openRef(false)'><i class='fa fa-book'></i></button>
                 </div>
                 <div id="ref" style='font-size:12pt;'></div>
                 <div id='note-list'>
-                    <table>
+                    <table id='note-table' data-order='[[ 3, "desc" ]]'>
                         <thead>
                             <tr>
                                 <th>Title</th>
@@ -47,11 +62,6 @@
                                 <th>Date</th>
                             </tr>
                         </thead>
-                        <tbody>
-                        {% for n in reverseNoteSort %}
-                        {{ n.toTableRow()|raw }}
-                        {% endfor %}
-                        </tbody>
                     </table>
                 </div>
             </section>
@@ -59,10 +69,10 @@
             <section class="notes">
                 <div id='note-header-left'>
                     <h2>Notes</h2>
-                    <i id='save-check' class='fa fa-check'></i>
+                    <i id='save-check' class='fa fa-save'></i>
                 </div>
                 <div id='note-header-right'>
-                    <select id='template' onchange="retrieveTemplate('template','notes')">
+                    <select id='template' onchange="retrieveTemplate('template','notes')" style='width:200px;'>
                         <option value=0>-- Template --</option>
                         {% for t in app.user.templates %}
                         <option value="{{ t.id }}">{{ t.name }}</option>
@@ -80,7 +90,10 @@
                 <div id='fields-container'>
                     <input type="hidden" id="noteId" value="" />
                     <input type="text" id="noteTitle" placeholder="Title..." />
-                    <input type='text' id='noteDate' onchange='textDirty=true;saved=false;' />
+                    <input type='text' id='noteDate' placeholder='Date...' onchange='textDirty=true;saved=false;' />
+                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
+                    <br />
+                    <input type='text' id='recording' name='recording' placeholder='Recording link...' />
                     <input type='text' id='newSpeaker' placeholder='Name...' onkeyup='saveSpeaker(event)' style='display:none;' />
                     <select id="speaker" onchange='newSpeaker()'>
                         <option value=0>-- Speaker --</option>
@@ -97,7 +110,6 @@
                         <option value='{{ s.id }}'>{{ s.name }}</option>
                         {% endfor %}
                     </select>
-                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
                 </div>
 
                 <textarea id="notes" wrap="hard"></textarea>
@@ -121,6 +133,12 @@
         <option value='wcf'>Westminster Confession of Faith</option>
         <option value='wsc'>Westminster Shorter Catechism</option>
         <option value='wlc'>Westminster Larger Catechism</option>
+        <option value='lbc'>London Baptist Confession</option>
+        <option value='39a'>Thirty-Nine Articles</option>
+        <option value='1hc'>First Helvetic Confession</option>
+        <option value='2hc'>Second Helvetic Confession</option>
+        <option value='sd'>Savoy Declaration</option>
+        <option value='agc'>Augsburg Confession</option>
     </select>
     <select id='referenceBook' onchange='filterBooks()'>
     </select>

templates/default/profile.html.twig

@@ -0,0 +1,156 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Profile | Sermon Notes{% endblock %}
+
+{% block stylesheets %}
+<link href="/theme/assets/css/main.css" rel="stylesheet" />
+<link href='/theme/assets/css/jquery-ui.theme.css' rel='stylesheet' />
+<link href='/theme/assets/css/jquery-ui.structure.css' rel='stylesheet' />
+<link href='/css/style.css' rel='stylesheet' />
+<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
+<style>
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: normal;
+  align-items: normal;
+  align-content: normal;
+}
+
+.user-flex {
+  display: block;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  align-self: auto;
+  order: 0;
+  border: solid 1px black;
+}
+
+.settings-flex {
+  display: block;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+  align-self: auto;
+  order: 0;
+}
+
+.notes-flex {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+}
+
+label,
+input[type="number"],
+input[type="email"],
+input[type="text"] {
+    display: inline !important;
+}
+
+input[type="checkbox"] {
+    appearance: auto;
+    opacity: 1;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+}
+</style>
+{% endblock %}
+
+{% block javascripts %}
+<script src="/theme/assets/js/jquery.min.js"></script>
+<script src='/theme/assets/js/jquery-ui.js'></script>
+<script src="/theme/assets/js/browser.min.js"></script>
+<script src="/theme/assets/js/breakpoints.min.js"></script>
+<script src="/theme/assets/js/util.js"></script>
+<script src="/theme/assets/js/main.js"></script>
+<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
+<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
+<script type='text/javascript'>
+$(function() {
+
+});
+
+function saveSettings() {
+    var saveInterval = $('#save-interval');
+    var saveReferences = $('#save-references');
+    var noteTextSize = $('#note-text-size');
+    var trackSaveSize = $('#track-save-size');
+    var saveTimeout = $('#save-timeout');
+    var saveFailureCount = $('#save-failure-count');
+
+    fetch('/index.php/save-settings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'saveInterval': saveInterval.val(),
+            'saveReferences': saveReferences.is(':checked'),
+            'noteTextSize': noteTextSize.val(),
+            'trackSaveSize': trackSaveSize.is(':checked'),
+            'saveTimeout': saveTimeout.val(),
+            'saveFailureCount': saveFailureCount.val()
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            alert(results.msg);
+        });
+}
+</script>
+{% endblock %}
+
+{% block body %}
+<div class="flex-container">
+    <div class="user-flex">
+        <label for='name'>Name: </label>
+        <input type='text' id='name' name='name' value='{{ app.user.name }}' /><br />
+
+        <label for='email'>Email: </label>
+        <input type='email' id='email' name='email' value='{{ app.user.email }}' /><br />
+
+        <label for='password'>Password: </label>
+        <input type='password' id='password' name='password' /><br/>
+
+        <label for='new-password'>New Password: </label>
+        <input type='password' id='new-password' name='new-password' /><br />
+
+        <label for='conf-password'>Confirm Password: </label>
+        <input type='password' id='conf-password' name='conf-password' /><br />
+    </div>
+    <div class="settings-flex">
+        <label for='save-interval'>Save Interval (seconds)?</label>
+        <input type='number' id='save-interval' value='{{ meta.saveInterval }}' title='What is the interval to trigger an autosave, in seconds?' /><br/>
+
+        <label for='save-references'>Save References?</label>
+        <input type='checkbox' id='save-references' {{ meta.saveReferences }} title='Do you want to also save reference content' /><br />
+
+        <label for='note-text-size'>Note Text Size? (points)</label>
+        <input type='number' id='note-text-size' value='{{ meta.noteTextSize }}' title='Font size of the note preview, in points' /><br />
+
+        <label for='track-save-size'>Track Save Size?</label>
+        <input type='checkbox' id='track-save-size' {{ meta.noteTextSize }} title='Do you want to track the size of saves, useful if teathering to mobile device?' /><br />
+
+        <label for='save-timeout'>Save Timeout? (seconds)</label>
+        <input type='number' id='save-timeout' value='{{ meta.saveTimeout }}' title='How long does it wait to before cancelling the save and trying again later?' /><br />
+
+        <label for='save-failure-count'>Save Failure Count? </label>
+        <input type='number' id='save-failure-count' value='{{ meta.saveFailureCount }}' title='How many times do you want to attempt to auto save before it stops and waits for a manual attempt' /><br />
+
+        <button id='save-settings' onclick='saveSettings()'>Save Settings</button>
+        <button id='back' onclick='history.go(-1)'>Back</button>
+    </div>
+    <div class="notes-fles">
+        <table id='notes'>
+            <thead>
+        </table>
+    </div>
+</div>
+{% endblock %}

templates/default/sidebar.html.twig

@@ -13,7 +13,7 @@
         <nav id="menu">
             <header class="major">
                 {% if app.user %}
-                <h3>Welcome {{ app.user.name }}</h3>
+                <h3>Welcome <a href='/index.php/profile' style='text-decoration:underline;'>{{ app.user.name }}</a></h3>
                 <a href='/index.php/logout'>Logout</a>
                 {% endif %}
             </header>
@@ -29,6 +29,7 @@
                 {% endif %}
                 <li><a href='#' onclick="openRef()">Open Reference</a></li>
                 <li><a href='/index.php/template-editor'>Template Editor</a></li>
+                <li><a href='/index.php/cheat-sheet' target='_blank'>Markdown Cheat Sheet</a></li>
                 {% else %}
                 <li><a href="/index.php/">Home</a></li>
                 <li><a href='/index.php/register'>Register</a></li>

templates/editors/reference-editor.html.twig

@@ -5,44 +5,26 @@
     </head>
 
     <body>
-        <select id='references' onchange='retrieveReference(this)'>
+        <select id='referenceTypes' onchange='retrieveReferenceType(this)'>
             <option value=''>-- Select Reference --</option>
-            <optgroup id='creeds' label='Creeds'>
-                {% for c in creeds %}
-                <option type='creed'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='belgic' label='Belgic Confession'>
-                {% for c in belgic %}
-                <option type='bc'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='heidelberg' label='Heidelberg Catechism'>
-                {% for c in heidelberg %}
-                <option type='hc'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='dort' label='Canons of Dort'>
-                {% for c in dort %}
-                <option type='cd'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='wcf' label='Westminster Confession of Faith'>
-                {% for c in wcf %}
-                <option type='wcf'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='wsc' label='Westminster Short Catechism'>
-                {% for c in wsc %}
-                <option type='wsc'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-            <optgroup id='wlc' label='Westminster Larger Catechism'>
-                {% for c in wlc %}
-                <option type='wlc'>{{ c }}</option>
-                {% endfor %}
-            </optgroup>
-        </select>
+            <option value='new'>-- Insert New --</option>
+            <option value='creed'>Creed</option>
+            <option value='belgic'>Belgic Confession</option>
+            <option value='hc'>Heidelberg Catechism</option>
+            <option value='cd'>Canons of Dort</option>
+            <option value='wcf'>Westminster Confession of Faith</option>
+            <option value='wsc'>Westminster Shorter Catechism</option>
+            <option value='wlc'>Westminster Larger Catechism</option>
+            <option value='agc'>Augsberg Confession</option>
+            <option value='1hc'>First Helvetic Confession</option>
+            <option value='2hc'>Second Helvetic Confession</option>
+            <option value='sd'>Savoy Declaration</option>
+            <option value='39a'>Thirty-Nine Articles</option>
+            <option value='lbc'>London Baptist Confession</option>
+        </select>&nbsp;&nbsp;
+        <select id='referenceSeries' onchange='retrieveReference(this)'>
+        </select>&nbsp;&nbsp;
+        <input type='text' name='name' id='refName' style='display:none;' />&nbsp;&nbsp;
         <button id='save' name='save' onclick='saveReference()'>Save</button>
         <a href='/index.php/home'>Back</a><br />