Updates

templates/default/home.html.twig

@@ -8,6 +8,12 @@
 <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 %}
@@ -20,6 +26,12 @@
 <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 %}
 
@@ -50,11 +62,6 @@
                                 <th>Date</th>
                             </tr>
                         </thead>
-                        {#<tbody>
-                        {% for n in reverseNoteSort %}
-                        {{ n.toTableRow()|raw }}
-                        {% endfor %}
-                        </tbody>#}
                     </table>
                 </div>
             </section>
@@ -62,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>

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>