trilium/views/index.ejs

490 lines
20 KiB
Text
Raw Normal View History

<!DOCTYPE html>
2017-10-16 07:10:36 +08:00
<html lang="en">
<head>
2017-10-16 07:10:36 +08:00
<meta charset="utf-8">
<title>Trilium Notes</title>
</head>
<body>
<div id="container" style="display:none;">
2017-10-16 07:10:36 +08:00
<div id="header" class="hide-toggle">
<div id="header-title">
2017-11-07 12:52:54 +08:00
<img src="images/app-icons/png/24x24.png">
Trilium Notes
2017-10-16 07:10:36 +08:00
</div>
<div style="flex-grow: 100;">
<button class="btn btn-xs" onclick="jumpToNote.showDialog();" title="CTRL+J">Jump to note</button>
<button class="btn btn-xs" onclick="recentNotes.showDialog();" title="CTRL+E">Recent notes</button>
2017-12-22 20:00:17 +08:00
<button class="btn btn-xs" onclick="recentChanges.showDialog();">Recent changes</button>
2017-11-05 02:02:43 +08:00
<button class="btn btn-xs" onclick="eventLog.showDialog();">Event log</button>
2017-10-16 07:10:36 +08:00
</div>
<div>
2017-12-22 20:00:17 +08:00
<button class="btn btn-xs" onclick="syncNow();" title="Number of outstanding changes to be pushed to server">
Sync now (<span id="changes-to-push-count">0</span>)
</button>
2017-10-29 23:22:41 +08:00
2017-11-05 02:31:53 +08:00
<button class="btn btn-xs" onclick="settings.showDialog();">Settings</button>
2017-10-16 07:10:36 +08:00
<form action="logout" id="logout-button" method="POST" style="display: inline;">
2017-10-16 07:10:36 +08:00
<input type="submit" class="btn btn-xs" value="Logout">
</form>
</div>
</div>
<div class="hide-toggle" style="grid-area: tree-actions;">
<div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 20px 0 20px; border: 1px solid #ccc;">
<a onclick="noteTree.createNewTopLevelNote()" title="Create new top level note" class="icon-action">
<img src="images/icons/file-plus.png" alt="Create new top level note"/>
</a>
2017-10-16 07:10:36 +08:00
2017-12-22 20:00:17 +08:00
<a onclick="noteTree.collapseTree()" title="Collapse note tree" class="icon-action">
<img src="images/icons/list.png" alt="Collapse note tree"/>
</a>
2017-10-16 07:10:36 +08:00
<a onclick="noteTree.scrollToCurrentNote()" title="Scroll to current note. Shortcut CTRL+." class="icon-action">
2017-12-22 20:00:17 +08:00
<img src="images/icons/crosshair.png" alt="Scroll to current note"/>
</a>
2017-10-16 07:10:36 +08:00
<a onclick="searchTree.toggleSearch()" title="Search in notes" class="icon-action">
<img src="images/icons/search.png" alt="Search in notes"/>
</a>
</div>
2017-10-16 07:10:36 +08:00
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<p>
<label>Search:</label>
2017-11-24 10:10:37 +08:00
<input name="search-text" autocomplete="off">
2017-10-16 07:10:36 +08:00
<button id="reset-search-button">&times;</button>
<span id="matches"></span>
</p>
</div>
</div>
<div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;">
</div>
<div id="parent-list" class="hide-toggle">
2017-12-17 10:35:44 +08:00
<p><strong>Note locations:</strong></p>
<ul id="parent-list-list"></ul>
</div>
2017-10-16 07:10:36 +08:00
<div class="hide-toggle" style="grid-area: title;">
<div style="display: flex; align-items: center;">
<a onclick="protected_session.protectNoteAndSendToServer()"
title="Protect the note so that password will be required to view the note"
2017-10-16 07:10:36 +08:00
class="icon-action"
id="protect-button"
2017-10-16 07:10:36 +08:00
style="display: none;">
<img src="images/icons/lock.png" alt="Protect note"/>
2017-10-16 07:10:36 +08:00
</a>
<a onclick="protected_session.unprotectNoteAndSendToServer()"
title="Unprotect note so that password will not be required to access this note in the future"
2017-10-16 07:10:36 +08:00
class="icon-action"
id="unprotect-button"
2017-10-16 07:10:36 +08:00
style="display: none;">
<img src="images/icons/unlock.png" alt="Unprotect note"/>
2017-10-16 07:10:36 +08:00
</a>
&nbsp;
<input autocomplete="off" value="" id="note-title" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
<span id="note-id-display" title="Note ID"></span>
2018-01-22 12:06:25 +08:00
<div class="dropdown" id="note-type">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
Type: <span data-bind="text: typeString()"></span>
<span class="caret"></span>
</button>
<ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
<li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></li>
<li role="separator" class="divider"></li>
<li data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></li>
<!-- ko foreach: codeMimeTypes -->
<li data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></li>
<!-- /ko -->
</ul>
</div>
<div class="dropdown" style="margin-left: 10px; margin-right: 10px;">
2018-01-22 09:15:42 +08:00
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
Note actions
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
<li><a onclick="noteHistory.showCurrentNoteHistory();"><kbd>Alt+H</kbd> History</a></li>
<li><a onclick="attributesDialog.showDialog();"><kbd>Alt+A</kbd> Attributes</a></li>
<li><a onclick="noteSource.showDialog();"><kbd>Ctrl+U</kbd> HTML source</a></li>
</ul>
</div>
2017-10-16 07:10:36 +08:00
</div>
</div>
<div style="position: relative; overflow: auto; grid-area: note-content; padding-left: 10px; padding-top: 10px;" id="note-detail-wrapper">
2017-10-16 07:10:36 +08:00
<div id="note-detail"></div>
2018-01-21 10:56:03 +08:00
<div id="note-detail-code"></div>
2017-10-16 07:10:36 +08:00
</div>
</div>
<div id="recent-notes-dialog" title="Recent notes" style="display: none;">
<select id="recent-notes-select-box" size="20" style="width: 100%">
</select>
<br/><br/>
<p>
2017-12-27 08:54:43 +08:00
<button class="btn btn-sm" id="recent-notes-jump-to">Jump to <kbd>enter</kbd></button>
2017-10-16 07:10:36 +08:00
&nbsp;
2017-12-27 08:54:43 +08:00
<button class="btn btn-sm" id="recent-notes-add-link">Add link <kbd>l</kbd></button>
2017-11-20 05:35:35 +08:00
2017-12-27 08:54:43 +08:00
<button class="btn btn-sm" id="recent-notes-add-current-as-child">Add current as child <kbd>c</kbd></button>
2017-11-20 05:35:35 +08:00
2017-12-27 08:54:43 +08:00
<button class="btn btn-sm" id="recent-notes-add-recent-as-child">Add recent as child <kbd>r</kbd></button>
2017-10-16 07:10:36 +08:00
</p>
</div>
2017-12-22 10:54:25 +08:00
<div id="add-link-dialog" title="Add link" style="display: none;">
<form id="add-link-form">
<div class="radio">
<label title="Add HTML link to the selected note at cursor in current note">
<input type="radio" name="add-link-type" value="html"/>
add normal HTML link</label>
<label title="Add selected note as a child of current note">
<input type="radio" name="add-link-type" value="selected-to-current"/>
add selected note to current note</label>
<label title="Add current note as a child of the selected note">
<input type="radio" name="add-link-type" value="current-to-selected"/>
add current note to selected note</label>
</div>
2017-10-16 07:10:36 +08:00
<div class="form-group">
2017-12-22 10:54:25 +08:00
<label for="note-autocomplete">Note</label>
2017-10-16 07:10:36 +08:00
<input id="note-autocomplete" style="width: 100%;">
</div>
2017-12-22 10:54:25 +08:00
<div class="form-group" id="add-link-title-form-group">
2017-10-16 07:10:36 +08:00
<label for="link-title">Link title</label>
<input id="link-title" style="width: 100%;">
</div>
2017-12-22 10:54:25 +08:00
<div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
<label for="clone-prefix">Prefix (optional)</label>
<input id="clone-prefix" style="width: 100%;">
</div>
2017-10-16 07:10:36 +08:00
<button class="btn btn-sm">Add link</button>
</form>
</div>
<div id="jump-to-note-dialog" title="Jump to note" style="display: none;">
<form id="jump-to-note-form">
<div class="form-group">
<label for="jump-to-note-autocomplete">Note</label>
2017-10-16 07:10:36 +08:00
<input id="jump-to-note-autocomplete" style="width: 100%;">
</div>
2017-12-27 08:54:43 +08:00
<button name="action" value="jump" class="btn btn-sm">Jump <kbd>enter</kbd></button>
2017-10-16 07:10:36 +08:00
</form>
</div>
<div id="protected-session-password-dialog" title="Protected session" style="display: none;">
2017-11-15 11:34:33 +08:00
<form id="protected-session-password-form">
2017-10-16 07:10:36 +08:00
<div class="form-group">
<label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
<input id="protected-session-password" class="form-control" type="password">
2017-10-16 07:10:36 +08:00
</div>
<button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
2017-10-16 07:10:36 +08:00
</form>
</div>
<div id="settings-dialog" title="Settings" style="display: none;">
<div id="settings-tabs">
<ul>
<li><a href="#change-password">Change password</a></li>
<li><a href="#protected-session-timeout">Protected session</a></li>
2017-10-16 07:10:36 +08:00
<li><a href="#history-snapshot-time-interval">History snapshots</a></li>
<li><a href="#advanced">Advanced</a></li>
2017-11-14 12:35:23 +08:00
<li><a href="#about">About Trilium</a></li>
2017-10-16 07:10:36 +08:00
</ul>
<div id="change-password">
<form id="change-password-form">
<div class="form-group">
<label for="old-password">Old password</label>
<input class="form-control" id="old-password" type="password">
</div>
<div class="form-group">
<label for="new-password1">New password</label>
<input class="form-control" id="new-password1" type="password">
</div>
<div class="form-group">
<label for="new-password2">New password once more</label>
<input class="form-control" id="new-password2" type="password">
</div>
<button class="btn btn-sm">Change password</button>
</form>
</div>
<div id="protected-session-timeout">
<p>Protected session timeout is a time period after which the protected session is wiped out from
browser's memory. This is measured from the last interaction with protected notes.</p>
2017-10-16 07:10:36 +08:00
<form id="protected-session-timeout-form">
2017-10-16 07:10:36 +08:00
<div class="form-group">
<label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
<input class="form-control" id="protected-session-timeout-in-seconds" type="number">
2017-10-16 07:10:36 +08:00
</div>
<button class="btn btn-sm">Save</button>
</form>
</div>
<div id="history-snapshot-time-interval">
<p>History snapshot time interval is time in seconds after which new history record will be created for the note.</p>
<form id="history-snapshot-time-interval-form">
<div class="form-group">
<label for="history-snapshot-time-interval-in-seconds">History snapshot time interval (in seconds)</label>
<input class="form-control" id="history-snapshot-time-interval-in-seconds" type="number">
</div>
<button class="btn btn-sm">Save</button>
</form>
</div>
<div id="advanced">
<h4 style="margin-top: 0px;">Sync</h4>
<button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
<br/>
<br/>
<button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
<h4>Debugging</h4>
<button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
<p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
for sharing online for debugging purposes without fear of leaking your personal data.</p>
2018-01-08 03:07:59 +08:00
<h4>Image cleanup</h4>
2018-01-08 03:07:59 +08:00
<p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
2018-01-08 03:07:59 +08:00
This means that some images can disappear from note history.</p>
<button id="cleanup-unused-images-button" class="btn btn-warning btn-sm">Permanently cleanup unused images</button>
<h4>Soft-delete cleanup</h4>
<p>This deletes all soft deleted rows from the database. This change isn't synced and should be done manually on all instances.
<strong>Use this only if you really know what you're doing.</strong></p>
<button id="cleanup-soft-deleted-items-button" class="btn btn-danger btn-sm">Permanently cleanup soft-deleted items</button>
<h4>Vacuum database</h4>
<p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
<button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
2017-12-16 13:05:37 +08:00
</div>
2017-11-14 12:35:23 +08:00
<div id="about">
<table class="table">
<tr>
<th>App version:</th>
<td id="app-version"></td>
</tr>
<tr>
<th>DB version:</th>
<td id="db-version"></td>
</tr>
2017-11-14 12:35:23 +08:00
<tr>
<th>Build date:</th>
<td id="build-date"></td>
</tr>
<tr>
<th>Build revision:</th>
<td><a href="" target="_blank" id="build-revision"></a></td>
</tr>
</table>
</div>
2017-10-16 07:10:36 +08:00
</div>
</div>
<div id="note-history-dialog" title="Note history" style="display: none;">
<div style="display: flex;">
<select id="note-history-list" size="25" style="width: 150px; height: 630px;">
</select>
<div id="note-history-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
<h3 id="note-history-title" style="margin: 3px;"></h3>
<div id="note-history-content" style="height: 600px; width: 600px; overflow: auto;"></div>
</div>
</div>
</div>
<div id="recent-changes-dialog" title="Recent changes" style="display: none; padding: 20px;">
</div>
2017-11-04 11:00:35 +08:00
<div id="event-log-dialog" title="Event log" style="display: none; padding: 20px;">
<ul id="event-log-list"></ul>
</div>
2017-11-27 11:34:25 +08:00
<div id="edit-tree-prefix-dialog" title="Edit tree prefix" style="display: none; padding: 20px;">
<form id="edit-tree-prefix-form">
<div class="form-group">
<label for="tree-prefix-input">Prefix</label>
<input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
</div>
<button name="action" class="btn btn-sm">Save</button>
</form>
</div>
2017-12-19 10:58:46 +08:00
<div id="sql-console-dialog" title="SQL console" style="display: none; padding: 20px;">
2017-12-15 09:38:56 +08:00
<textarea style="width: 100%; height: 100px" id="sql-console-query"></textarea>
2017-12-27 08:54:43 +08:00
<button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
2017-12-15 09:38:56 +08:00
<table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
<thead></thead>
<tbody></tbody>
</table>
</div>
2017-12-27 07:15:29 +08:00
<div id="note-source-dialog" title="Note source" style="display: none; padding: 20px;">
<textarea id="note-source" readonly="readonly"></textarea>
2017-12-27 07:15:29 +08:00
</div>
<div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
2018-01-20 08:39:37 +08:00
<form data-bind="submit: save">
2018-01-12 10:40:09 +08:00
<div style="display: flex; justify-content: space-between; padding: 15px; padding-top: 0;">
2018-01-20 08:39:37 +08:00
<button class="btn-default" type="button" data-bind="click: addNewRow">Add new attribute</button>
2018-01-12 10:40:09 +08:00
2018-01-20 08:39:37 +08:00
<button class="btn-primary" type="submit">Save</button>
2018-01-12 10:40:09 +08:00
</div>
<div style="height: 97%; overflow: auto">
<table id="attributes-table" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody data-bind="foreach: attributes">
<tr>
<td data-bind="text: attribute_id"></td>
<td>
<input type="text" data-bind="value: name"/>
</td>
<td>
<input type="text" data-bind="value: value" style="width: 300px"/>
</td>
</tr>
</tbody>
</table>
</div>
2018-01-20 08:39:37 +08:00
</form>
</div>
2017-10-16 07:10:36 +08:00
<div id="tooltip" style="display: none;"></div>
<script type="text/javascript">
const baseApiUrl = 'api/';
const glob = {
activeDialog: null,
sourceId: '<%= sourceId %>',
maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>
};
2017-10-16 07:10:36 +08:00
</script>
2017-10-21 11:43:20 +08:00
<!-- Required for correct loading of scripts in Electron -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
2017-10-16 07:47:05 +08:00
<script src="libraries/jquery.min.js"></script>
2017-10-16 07:10:36 +08:00
<!-- bootstrap needs to be included before jQuery UI, otherwise close icon in the dialog will be missing -->
2017-10-16 07:47:05 +08:00
<link href="libraries/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="libraries/bootstrap/js/bootstrap.js"></script>
2017-10-16 07:10:36 +08:00
2017-10-16 07:47:05 +08:00
<link href="libraries/jqueryui/jquery-ui.min.css" rel="stylesheet">
<script src="libraries/jqueryui/jquery-ui.min.js"></script>
2017-10-16 07:10:36 +08:00
<script src="libraries/bootstrap-notify.min.js"></script>
2017-10-16 07:10:36 +08:00
<!-- Include Fancytree skin and library -->
2017-10-16 07:47:05 +08:00
<link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
2017-12-16 13:19:15 +08:00
<script src="libraries/fancytree/jquery.fancytree-all.min.js"></script>
2017-10-16 07:10:36 +08:00
2017-12-02 23:37:12 +08:00
<script src="libraries/ckeditor/ckeditor.js"></script>
2017-10-16 07:10:36 +08:00
2017-10-16 07:47:05 +08:00
<script src="libraries/jquery.hotkeys.js"></script>
<script src="libraries/jquery.fancytree.hotkeys.js"></script>
2017-10-16 07:10:36 +08:00
2017-10-16 07:47:05 +08:00
<script src="libraries/jquery.ui-contextmenu.min.js"></script>
2017-10-16 07:10:36 +08:00
<script src="libraries/knockout.min.js"></script>
2018-01-21 10:56:03 +08:00
<script src="libraries/codemirror/codemirror.js"></script>
<link rel="stylesheet" href="libraries/codemirror/codemirror.css">
2018-01-23 12:07:04 +08:00
<script src="libraries/codemirror/addon/mode/loadmode.js"></script>
<script src="libraries/codemirror/mode/meta.js"></script>
2018-01-21 10:56:03 +08:00
2017-10-16 07:47:05 +08:00
<link href="stylesheets/style.css" rel="stylesheet">
2017-10-16 07:10:36 +08:00
2017-12-01 08:58:00 +08:00
<script src="javascripts/utils.js"></script>
2017-10-16 07:47:05 +08:00
<script src="javascripts/init.js"></script>
<script src="javascripts/server.js"></script>
2017-10-16 07:10:36 +08:00
<!-- Tree scripts -->
2017-11-05 07:28:49 +08:00
<script src="javascripts/note_tree.js"></script>
2017-11-05 10:10:41 +08:00
<script src="javascripts/tree_changes.js"></script>
2018-01-14 07:02:41 +08:00
<script src="javascripts/cloning.js"></script>
2017-10-16 07:47:05 +08:00
<script src="javascripts/tree_utils.js"></script>
<script src="javascripts/drag_and_drop.js"></script>
<script src="javascripts/context_menu.js"></script>
2017-11-24 10:10:37 +08:00
<script src="javascripts/search_tree.js"></script>
2017-10-16 07:10:36 +08:00
<!-- Note detail -->
2017-11-05 05:54:27 +08:00
<script src="javascripts/note_editor.js"></script>
<script src="javascripts/protected_session.js"></script>
2018-01-22 12:06:25 +08:00
<script src="javascripts/note_type.js"></script>
2017-10-16 07:10:36 +08:00
<!-- dialogs -->
<script src="javascripts/dialogs/recent_notes.js"></script>
<script src="javascripts/dialogs/add_link.js"></script>
<script src="javascripts/dialogs/jump_to_note.js"></script>
<script src="javascripts/dialogs/settings.js"></script>
<script src="javascripts/dialogs/note_history.js"></script>
<script src="javascripts/dialogs/recent_changes.js"></script>
<script src="javascripts/dialogs/event_log.js"></script>
2017-11-27 11:34:25 +08:00
<script src="javascripts/dialogs/edit_tree_prefix.js"></script>
2017-12-15 09:38:56 +08:00
<script src="javascripts/dialogs/sql_console.js"></script>
2017-12-27 07:15:29 +08:00
<script src="javascripts/dialogs/note_source.js"></script>
<script src="javascripts/dialogs/attributes.js"></script>
2017-10-16 07:47:05 +08:00
2017-11-05 05:07:03 +08:00
<script src="javascripts/link.js"></script>
2017-10-29 23:22:41 +08:00
<script src="javascripts/sync.js"></script>
<script src="javascripts/messaging.js"></script>
<script type="text/javascript">
// we hide container initally because otherwise it is rendered first without CSS and then flickers into
// final form which is pretty ugly.
$("#container").show();
</script>
</body>
2017-10-16 07:10:36 +08:00
</html>