Change openNotes process

This commit is contained in:
Ryan Prather 2024-04-30 13:29:26 -04:00
parent e858a5d4e8
commit 82573d052c
10 changed files with 142 additions and 10 deletions

View File

@ -187,6 +187,25 @@ textarea#notes {
color: darkorange;
}
#note-list {
display: none;
}
#note-list ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
}
.noteListLinks {
cursor: pointer;
text-decoration: none;
color: purple;
font-weight: bold;
font-size: 16px;
}
div#refQuery {
display: none;
position: absolute;

View File

@ -1 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,wCAAA;ACAJ;;ADGA;EACI,YAAA;ACAJ;;ADGA;;EAEI,YAAA;ACAJ;;ADIA;EACI,yBAAA;EACA,yBAAA;EACA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,eAAA;ACDJ;;ADIA;EACI,WAAA;ACDJ;;ADIA;EACI,aAAA;EACA,2BAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;ACDJ;;ADIA;EACI,gBAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,yBAAA;EACA,UAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,kBAAA;EACA,wCAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;EACA,eAAA;EAGA,6BAAA;ACDJ;ADGI;EACI,yBAAA;EACA,iBAAA;ACDR;ADII;EACI,eAAA;EACA,eAAA;ACFR;;ADMA;EACI,eAAA;EACA,eAAA;EACA,sCAAA;ACHJ;;ADMA;EACI,4BAAA;ACHJ;;ADMA;EACI,cAAA;ACHJ;;ADMA;EACI,UAAA;ACHJ;;ADMA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACHJ;;ADMA;EACI,aAAA;EACA,kBAAA;ACHJ;;ADMA;;EAEI,oBAAA;EACA,mBAAA;EACA,UAAA;ACHJ;;ADMA;EACI,sCAAA;ACHJ;;ADMA;EACI,iBAAA;ACHJ;;ADMA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACHJ;;ADMA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACHJ","file":"style.css"}
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,wCAAA;ACAJ;;ADGA;EACI,YAAA;ACAJ;;ADGA;;EAEI,YAAA;ACAJ;;ADIA;EACI,yBAAA;EACA,yBAAA;EACA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,eAAA;ACDJ;;ADIA;EACI,WAAA;ACDJ;;ADIA;EACI,aAAA;EACA,2BAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;ACDJ;;ADIA;EACI,gBAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,yBAAA;EACA,UAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,kBAAA;EACA,wCAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;EACA,eAAA;EAGA,6BAAA;ACDJ;ADGI;EACI,yBAAA;EACA,iBAAA;ACDR;ADII;EACI,eAAA;EACA,eAAA;ACFR;;ADMA;EACI,eAAA;EACA,eAAA;EACA,sCAAA;ACHJ;;ADMA;EACI,4BAAA;ACHJ;;ADMA;EACI,cAAA;ACHJ;;ADMA;EACI,UAAA;ACHJ;;ADMA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACHJ;;ADMA;EACI,aAAA;EACA,kBAAA;ACHJ;;ADMA;;EAEI,oBAAA;EACA,mBAAA;EACA,UAAA;ACHJ;;ADMA;EACI,sCAAA;ACHJ;;ADMA;EACI,iBAAA;ACHJ;;ADMA;EACI,aAAA;ACHJ;;ADMA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACHJ;;ADMA;EACI,eAAA;EACA,qBAAA;EACA,aAAA;EACA,iBAAA;EACA,eAAA;ACHJ;;ADMA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACHJ;;ADMA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACHJ","file":"style.css"}

View File

@ -1 +1 @@
body{margin:0}.container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.top-tab{height:50px;width:100%}.hamburger{display:flex;justify-content:space-between;align-items:center;margin:15px 0 15px 15px;border:#000 solid 1px;cursor:pointer;border-radius:5px;width:20px;height:20px;padding:5px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.fa-check{color:green}.fa-bars:before,.fa-navicon:before{padding:3px}ul.menu-open{display:block !important;background-color:#f9c74d;padding:10px;z-index:100;list-style:none;list-style-type:none;position:fixed}.ref-tab{width:60px}.tab button{display:flex;justify-content:flex-start;align-items:center;height:100px;width:100%;cursor:pointer;text-align:center}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.ref{width:35%}.ref>div#ref{overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#noteSearch{display:none}#fields-container{display:none}#show-hide-btn{position:absolute;top:10px;right:20px;font-size:16px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.6);padding:5px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;transition:all .3s ease-out}#show-hide-btn:hover{background-color:#3e8e41}#show-hide-btn::before{font-size:16px;cursor:pointer}#show-hide-btn::before{font-size:16px;cursor:pointer;transition:transform .5s ease-in-out}#show-hide-btn:hover::before{transform:translateY(-10px)}#fields-container.show{display:block}.notes{width:55%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll}#note-header-left,#note-header-right{display:inline-flex;flex-direction:row;width:49%}#note-header-right{flex-direction:row-reverse !important}#note-header-left h2.dirty{color:#ff8c00}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5)}div#refQuery #search{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}/*# sourceMappingURL=style.min.css.map */
body{margin:0}.container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.top-tab{height:50px;width:100%}.hamburger{display:flex;justify-content:space-between;align-items:center;margin:15px 0 15px 15px;border:#000 solid 1px;cursor:pointer;border-radius:5px;width:20px;height:20px;padding:5px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.fa-check{color:green}.fa-bars:before,.fa-navicon:before{padding:3px}ul.menu-open{display:block !important;background-color:#f9c74d;padding:10px;z-index:100;list-style:none;list-style-type:none;position:fixed}.ref-tab{width:60px}.tab button{display:flex;justify-content:flex-start;align-items:center;height:100px;width:100%;cursor:pointer;text-align:center}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.ref{width:35%}.ref>div#ref{overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#noteSearch{display:none}#fields-container{display:none}#show-hide-btn{position:absolute;top:10px;right:20px;font-size:16px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.6);padding:5px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;transition:all .3s ease-out}#show-hide-btn:hover{background-color:#3e8e41}#show-hide-btn::before{font-size:16px;cursor:pointer}#show-hide-btn::before{font-size:16px;cursor:pointer;transition:transform .5s ease-in-out}#show-hide-btn:hover::before{transform:translateY(-10px)}#fields-container.show{display:block}.notes{width:55%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll}#note-header-left,#note-header-right{display:inline-flex;flex-direction:row;width:49%}#note-header-right{flex-direction:row-reverse !important}#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}.noteListLinks{cursor:pointer;text-decoration:none;color:purple;font-weight:bold;font-size:16px}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5)}div#refQuery #search{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}/*# sourceMappingURL=style.min.css.map */

View File

@ -1 +1 @@
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAGJ,WACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,WAAA,CACA,UAAA,CAKJ,WACI,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,uBAAA,CACA,qBAAA,CACA,cAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,mCAAA,CAGJ,UACI,WAAA,CAGJ,mCAEI,WAAA,CAIJ,aACI,wBAAA,CACA,wBAAA,CACA,YAAA,CACA,WAAA,CACA,eAAA,CACA,oBAAA,CACA,cAAA,CAGJ,SACI,UAAA,CAGJ,YACI,YAAA,CACA,0BAAA,CACA,kBAAA,CACA,YAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,SAAA,CAGJ,aACI,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,YACI,YAAA,CAGJ,kBACI,YAAA,CAGJ,eACI,iBAAA,CACA,QAAA,CACA,UAAA,CACA,cAAA,CACA,cAAA,CACA,wBAAA,CAEA,UAAA,CAEA,WAAA,CACA,iBAAA,CACA,mCAAA,CACA,gBAAA,CACA,iBAAA,CACA,oBAAA,CACA,oBAAA,CACA,cAAA,CACA,cAAA,CAGA,2BAAA,CAEA,qBACI,wBAAA,CAIJ,uBACI,cAAA,CACA,cAAA,CAIR,uBACI,cAAA,CACA,cAAA,CACA,oCAAA,CAGJ,6BACI,2BAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CAGJ,qCAEI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,qCAAA,CAGJ,2BACI,aAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA","file":"style.min.css"}
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAGJ,WACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,WAAA,CACA,UAAA,CAKJ,WACI,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,uBAAA,CACA,qBAAA,CACA,cAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,mCAAA,CAGJ,UACI,WAAA,CAGJ,mCAEI,WAAA,CAIJ,aACI,wBAAA,CACA,wBAAA,CACA,YAAA,CACA,WAAA,CACA,eAAA,CACA,oBAAA,CACA,cAAA,CAGJ,SACI,UAAA,CAGJ,YACI,YAAA,CACA,0BAAA,CACA,kBAAA,CACA,YAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,SAAA,CAGJ,aACI,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,YACI,YAAA,CAGJ,kBACI,YAAA,CAGJ,eACI,iBAAA,CACA,QAAA,CACA,UAAA,CACA,cAAA,CACA,cAAA,CACA,wBAAA,CAEA,UAAA,CAEA,WAAA,CACA,iBAAA,CACA,mCAAA,CACA,gBAAA,CACA,iBAAA,CACA,oBAAA,CACA,oBAAA,CACA,cAAA,CACA,cAAA,CAGA,2BAAA,CAEA,qBACI,wBAAA,CAIJ,uBACI,cAAA,CACA,cAAA,CAIR,uBACI,cAAA,CACA,cAAA,CACA,oCAAA,CAGJ,6BACI,2BAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CAGJ,qCAEI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,qCAAA,CAGJ,2BACI,aAAA,CAGJ,WACI,YAAA,CAGJ,cACI,QAAA,CACA,SAAA,CACA,oBAAA,CACA,eAAA,CAGJ,eACI,cAAA,CACA,oBAAA,CACA,YAAA,CACA,gBAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA","file":"style.min.css"}

View File

@ -193,6 +193,25 @@ textarea#notes {
color: darkorange;
}
#note-list {
display: none;
}
#note-list ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
}
.noteListLinks {
cursor: pointer;
text-decoration: none;
color: purple;
font-weight: bold;
font-size: 16px;
}
div#refQuery {
display: none;
position: absolute;

View File

@ -48,6 +48,9 @@ function setHeight() {
ref = document.querySelector('.ref');
ref.style.height = (window.innerHeight - 125) + 'px';
noteList = document.querySelector('#note-list');
noteList.style.height = (window.innerHeight - 130) + 'px';
notes = document.querySelector('.notes');
notes.style.height = (window.innerHeight - 130) + 'px';
@ -545,16 +548,60 @@ function findLinks() {
//alert(links.length);
}
function showSearchNote(event) {
event.preventDefault();
var searchNote = document.querySelector('#noteSearch');
if (searchNote.style.display == 'none') {
searchNote.style.display = 'block';
function openNote() {
const noteList = document.querySelector('#note-list');
const refs = document.querySelector('#ref');
if (noteList.style.display == 'block') {
noteList.style.display = 'none';
refs.style.display = 'block';
} else {
searchNote.style.display = 'none';
noteList.style.display = 'block';
refs.style.display = 'none';
link.click();
}
}
function retrieveNote(id) {
fetch('/index.php/get-note', {
method: 'POST',
header: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'id': id
})
})
.then(response => response.json())
.then(result => {
document.querySelector('#notes').value = result.text;
document.querySelector('#passage').value = result.passage;
document.querySelector('#series').value = result.series.id;
document.querySelector('#speaker').value = result.speaker.id;
document.querySelector('#noteTitle').value = result.title;
document.querySelector('#noteDate').value = result.date;
document.querySelector('#noteId').value = result.id;
document.querySelector('#noteSearch').style.display = 'none';
if (result.references) {
references = result.references;
}
const list = document.querySelector('#ref-list');
var newList = null;
for (var x in references) {
var newList = document.createElement('li');
newList.className = 'tab';
var button = makeButton(x);
newList.appendChild(button);
list.appendChild(newList);
}
openNote();
});
}
function searchNote() {
const search = document.querySelector('#noteSearchQuery');

View File

@ -233,6 +233,17 @@ class AjaxController extends AbstractController
return $res;
}
#[Route('/get-note', name: 'app_get_note')]
public function getNote(Request $req, EntityManagerInterface $emi): Response
{
$res = new Response();
$data = json_decode($req->getContent());
$note = $emi->getRepository(Notes::class)->find($data->id);
$res->setContent(json_encode($note));
return $res;
}
#[Route('/save-note', name: 'app_save_note', methods: ['POST'])]
public function saveNote(Request $req, EntityManagerInterface $emi): Response
{

View File

@ -21,6 +21,7 @@ class DefaultController extends AbstractController
$speakers = $emi->getRepository(Speaker::class)->findAll();
$series = $emi->getRepository(Series::class)->findAll();
$templates = $emi->getRepository(Template::class)->findAll();
$notes = $emi->getRepository(Notes::class)->findAll();
$uuid = Uuid::v4();
return $this->render('default/index.html.twig', [
@ -28,6 +29,7 @@ class DefaultController extends AbstractController
'speakers' => $speakers,
'series' => $series,
'templates' => $templates,
'notes' => $notes,
'id' => $uuid,
]);
}

View File

@ -154,6 +154,23 @@ class Notes implements JsonSerializable
return $this;
}
public function toLink(): string
{
return "<a href='#' onclick=\"retrieveNote('{$this->id}')\">".
$this->title.
"</a>";
}
public function toTableRow(): string
{
return "<tr>".
"<td>{$this->toLink()}</td>".
"<td>{$this->speaker->getName()}</td>".
"<td>{$this->passage}</td>".
"<td>{$this->date->format('M j, Y')}</td>".
"</tr>";
}
public function jsonSerialize(): array
{
return [

View File

@ -20,7 +20,7 @@
<i class="fa fa-bars hamburger" aria-hidden="true"></i>
<ul class="hamburger-list" style="display: none">
<li><a href="#" onclick='newNote()'>New Note</a></li>
<li><a href="#" onclick='showSearchNote(event)'>Open Note</a></li>
<li><a href='#' onclick='openNote()'>Open Note</a></li>
<li><a href="#" onclick="saveNote();link.click();">Save Note</a></li>
<li><a href='#' onclick='discardNote()'>Discard Note</a></li>
<li><hr/></li>
@ -39,6 +39,23 @@
<section class="ref">
<h2>Reference</h2>
<div id="ref"></div>
<div id='note-list'>
<table>
<thead>
<tr>
<th>Title</th>
<th>Speaker</th>
<th>Passage</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for n in notes %}
{{ n.toTableRow() | raw }}<br />
{% endfor %}
</tbody>
</table>
</div>
</section>
<section class="notes">
<div id='note-header-left'>