Files
sermon-notes/templates/default/new-home.html.twig
T
ryan dec1b801d8 add: new home
add new home page will change for final version
2026-05-13 17:24:21 -04:00

216 lines
8.4 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Sermon Notes{% endblock %}
{% block stylesheets %}
<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
<link href="{{ asset('css/styles.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;
}
.input-error {
/* border: solid 2px red !important; */
}
</style>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/browser.min.js') }}"></script>
<script src="{{ asset('js/breakpoints.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
{#<script src="{{ asset('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>
{{ importmap('app') }}
<script type="module">
import * as ref from "{{ asset('js/reference.js') }}";
import * as home from "{{ asset('js/home.js') }}";
import * as note from "{{ asset('js/note.js') }}";
import { state } from "{{ asset('js/state.js') }}";
import * as series from "{{ asset('js/series.js') }}";
import * as speaker from "{{ asset('js/speaker.js') }}";
import * as template from "{{ asset('js/template.js') }}";
window.ref = ref;
window.home = home;
window.note = note;
window.state = state;
window.series = series;
window.speaker = speaker;
window.template = template;
document.addEventListener('DOMContentLoaded', () => {
home.initHome();
state.saveInterval = ({{ meta.saveInterval }} * 1000);
state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
state.saveFailureCount = {{ meta.saveFailureCount }};
});
</script>
{% endblock %}
{% block body %}
{% include('default/sidebar.html.twig') %}
<div id="query"></div>
<div class="container">
<div class="ref-btn-header">&nbsp;</div>
<div class="ref-btn bottom-row">
<ul id="ref-list" class="ref-list"></ul>
</div>
<div class="mobile-note-header">
<h2>Notes</h2>
<label class="switch">
<input type="checkbox" id="mobile-dark-mode-checkbox"/>
<span class="slider round"></span>
</label>
<button id="mobile-open-ref" class="button">
<i class="fa fa-book"></i>
</button>
<button id="mobile-show-hide-btn" class="button">
<i class="fa fa-table"></i>
</button>
</div>
<div class="ref-header">
<h2>Reference</h2>
<label class="switch">
<input type="checkbox" id="dark-mode-checkbox"/>
<span class="slider round"></span>
</label>
<div class="ref-header-buttons">
<button id="increaseFont"><i class="fa fa-plus"></i></button>
<button id="decreaseFont"><i class="fa fa-minus"></i></button>
<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
</div>
</div>
<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></div>
<div id="note-list">
<table id="note-table" data-order='[[ 3, "desc" ]]'>
<thead>
<tr>
<th>Title</th>
<th>Speaker</th>
<th>Passage</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="note-header">
<div class="note-header-column">
<h2>Notes</h2>
<i id="save-check" class="fa fa-save"></i>
</div>
<div class="note-header-column">
<button id="previewBtn" class="button">
<i class="fa fa-eye"></i>
</button>
<button id="show-hide-btn" class="button">
<i class="fa fa-table"></i>
</button>
<button id="shareBtn" class="button">
<i class="fas fa-share-alt"></i>
</button>
</div>
<div class="note-header-column">
<div class="dropdown" id="templateDropdown">
<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
<option value="0">-- Template --</option>
{% for t in app.user.templates %}
<option value="{{ t.id }}">{{ t.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="notes bottom-row">
<div class="fields-container">
<input type="hidden" id="noteId" value="">
<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
<input type="text" id="recording" placeholder="Recording link...">
<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
<div class="dropdown" id="speakerDropdown">
<select id="speaker" onchange="speaker.newSpeaker()">
<option value="0">-- Speaker --</option>
<option value="new">New Speaker</option>
{% for s in speakers %}
<option value="{{ s.id }}">{{ s.name }}</option>
{% endfor %}
</select>
</div>
<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
<div class="dropdown" id="seriesDropdown">
<select id="series" onchange="series.newSeries()">
<option value="0">-- Series --</option>
<option value="new">New Series</option>
{% for s in series %}
<option value="{{ s.id }}">{{ s.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="note-text">
<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
</div>
<div id="notePreview"></div>
</div>
</div>
<div id="refQuery">
<select id="referenceType" onchange="ref.retrieveBooks()">
<option>-- Select --</option>
<option value="bible">Bible</option>
<option value="creed">Various Creed</option>
<option value="bc">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="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="ref.filterBooks()" style="display:none;"></select>
<span id="chapter-range"></span>
<input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
<span id="verse-range"></span>
<br />
<button id="searchBtn">Search</button>&nbsp;
<button id="closeSearch">Close</button>
</div>
<div id="passage-popup"></div>
<div id="modal-backdrop" class="modal-backdrop fade in" style="display:none;"></div>
<div id="modal-container" class="modal-container" style="display:none;">
<header class="modal-header">Share Note</header>
<form id="emailForm" class="modal-body">
<label for="shareEmail">Enter Friends Email:</label>
<input type="email" id="shareEmail" name="email" required />
<button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
</form>
<footer class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
</footer>
</div>
{% endblock %}