2017-10-15 11:31:44 +08:00
<!DOCTYPE html>
2018-06-09 11:18:53 +08:00
<html lang="en" class="theme-<%= theme %>">
2017-10-15 11:31:44 +08:00
<head>
2017-10-16 07:10:36 +08:00
<meta charset="utf-8">
2017-12-27 01:55:40 +08:00
<title>Trilium Notes</title>
2017-10-15 11:31:44 +08:00
</head>
<body>
2018-01-03 11:01:38 +08:00
<div id="container" style="display:none;">
2017-10-16 07:10:36 +08:00
<div id="header" class="hide-toggle">
2018-05-27 10:54:06 +08:00
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/back-24.png')"></a>
2018-05-27 10:54:06 +08:00
<a id="history-forward-button" title="Go to next note." class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/forward-24.png')"></a>
2018-05-27 10:54:06 +08:00
</div>
2018-06-01 08:00:39 +08:00
<div style="flex-grow: 100; display: flex;">
2018-06-06 11:28:10 +08:00
<button class="btn btn-xs" id="jump-to-note-dialog-button" title="CTRL+J">Jump to note</button>
2018-03-24 12:54:50 +08:00
<button class="btn btn-xs" id="recent-changes-button">Recent changes</button>
2018-06-01 08:00:39 +08:00
<div>
<span style="font-size: smaller">Protected session:</span>
<div class="btn-group btn-group-xs">
<button type="button" class="btn" id="protected-session-on">On</button>
<button type="button" class="btn active" id="protected-session-off">Off</button>
</div>
</div>
2017-10-16 07:10:36 +08:00
</div>
2018-02-03 23:37:57 +08:00
<div id="plugin-buttons">
</div>
2017-10-16 07:10:36 +08:00
<div>
2018-03-24 12:54:50 +08:00
<button class="btn btn-xs" id="sync-now-button" title="Number of outstanding changes to be pushed to server">
2018-02-03 23:37:57 +08:00
<span class="ui-icon ui-icon-refresh"></span>
2018-07-25 03:43:15 +08:00
Sync now (<span id="outstanding-syncs-count">0</span>)
2017-12-22 20:00:17 +08:00
</button>
2017-10-29 23:22:41 +08:00
2018-04-02 05:41:28 +08:00
<button class="btn btn-xs" id="options-button">
<span class="ui-icon ui-icon-gear"></span> Options</button>
2017-10-16 07:10:36 +08:00
2017-12-27 11:19:42 +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>
2018-04-14 07:58:33 +08:00
<div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle">
2018-06-08 08:18:46 +08:00
<div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 10px 0 16px; border: 1px solid #ccc;">
2018-03-24 12:54:50 +08:00
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/file-plus-24.png')"></a>
2017-10-16 07:10:36 +08:00
2018-03-24 12:54:50 +08:00
<a id="collapse-tree-button" title="Collapse note tree" class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/list-24.png')"></a>
2017-10-16 07:10:36 +08:00
2018-03-24 12:54:50 +08:00
<a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/crosshair-24.png')"></a>
2017-10-16 07:10:36 +08:00
2018-03-24 12:54:50 +08:00
<a id="toggle-search-button" title="Search in notes" class="icon-action"
2018-06-08 11:02:21 +08:00
style="background: url('/images/icons/search-24.png')"></a>
2017-12-05 07:21:57 +08:00
</div>
2018-02-26 13:07:43 +08:00
<input type="file" id="import-upload" style="display: none" />
2017-10-16 07:10:36 +08:00
2018-04-14 07:58:33 +08:00
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<div style="display: flex; align-items: center;">
<input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
2018-06-09 21:28:50 +08:00
<button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
style="background-image: url('/images/icons/search-20.png');"></button>
2018-06-05 11:21:45 +08:00
2018-06-09 21:28:50 +08:00
<button id="save-search-button" class="btn btn-sm icon-button" title="Save search"
style="background-image: url('/images/icons/save-20.png');"></button>
2018-06-08 07:50:16 +08:00
2018-06-09 21:28:50 +08:00
<button id="close-search-button" class="btn btn-sm icon-button" title="Close search"
style="background-image: url('/images/icons/x-20.png');"></button>
2018-04-14 07:58:33 +08:00
</div>
2018-06-04 08:42:25 +08:00
</div>
2018-03-14 08:02:00 +08:00
2018-06-05 08:22:41 +08:00
<div id="search-results">
2018-06-04 08:42:25 +08:00
<strong>Search results:</strong>
2018-03-14 08:02:00 +08:00
2018-06-04 08:42:25 +08:00
<ul id="search-results-inner">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
2017-10-16 07:10:36 +08:00
</div>
2018-06-05 08:22:41 +08:00
<div id="tree"></div>
2017-11-22 09:04:06 +08:00
</div>
2018-04-19 11:13:37 +08:00
<div style="grid-area: title;">
2018-06-10 22:53:39 +08:00
<div style="display: flex; align-items: center;">
<div class="dropdown hide-toggle">
2018-06-01 11:21:47 +08:00
<button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
<span id="note-path-count">1 path</span>
<span class="caret"></span>
</button>
<ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
</ul>
</div>
<input autocomplete="off" value="" id="note-title" style="margin-left: 15px; font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
2018-06-10 22:53:39 +08:00
<div class="hide-toggle" style="display: flex; align-items: center;">
<span id="note-id-display" title="Note ID"></span>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px; background-image: url('/images/icons/edit-20.png');"
title="Toggle edit"
id="toggle-edit-button"></button>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
title="Render (Ctrl+Enter)"
id="render-button"></button>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
title="Execute (Ctrl+Enter)"
id="execute-script-button"></button>
<div>
<button type="button"
class="btn btn-sm icon-button"
id="protect-button"
title="Protected note can be viewed and edited only after entering password"
style="background-image: url('/images/icons/shield-20.png');">
</button><button type="button"
class="btn btn-sm icon-button"
id="unprotect-button"
title="Not protected note can be viewed without entering password"
style="background-image: url('/images/icons/shield-off-20.png');">
</button>
</div>
2017-12-25 22:46:11 +08:00
2018-06-10 22:53:39 +08:00
<div class="dropdown" id="note-type" data-bind="visible: type() != 'search'">
<button data-bind="disable: isDisabled()" 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">
<li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">✓</span> <strong>Text</strong></li>
<li role="separator" class="divider"></li>
<li data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">✓</span> <strong>Render HTML note</strong></li>
<li role="separator" class="divider"></li>
<li data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="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">✓</span> <span data-bind="text: title"></span></li>
<!-- /ko -->
</ul>
</div>
2018-01-22 12:06:25 +08:00
2018-06-10 22:53:39 +08:00
<div class="dropdown" id="note-actions">
<button 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">
<li><a id="show-note-revisions-button">Note revisions</a></li>
2018-08-03 17:11:57 +08:00
<li><a class="show-attributes-button"><kbd>Alt+A</kbd> Attributes</a></li>
2018-06-10 22:53:39 +08:00
<li><a class="show-labels-button"><kbd>Alt+L</kbd> Labels</a></li>
2018-07-27 16:52:48 +08:00
<li><a class="show-relations-button"><kbd>Alt+R</kbd> Relations</a></li>
2018-07-09 03:45:05 +08:00
<li><a id="show-source-button">HTML source</a></li>
2018-06-10 22:53:39 +08:00
<li><a id="upload-file-button">Upload file</a></li>
</ul>
</div>
2018-01-20 08:36:41 +08:00
</div>
2017-10-16 07:10:36 +08:00
</div>
</div>
2018-05-09 04:39:01 +08:00
<div id="note-detail-wrapper">
2018-07-29 22:06:13 +08:00
<div id="note-detail-script-area"></div>
2018-08-06 14:59:26 +08:00
<div id="note-detail-promoted-attributes"></div>
2018-04-12 10:44:33 +08:00
<div id="note-detail-component-wrapper">
<div id="note-detail-text" class="note-detail-component" tabindex="2"></div>
2018-04-09 10:38:52 +08:00
<div id="note-detail-search" class="note-detail-component">
<div style="display: flex; align-items: center;">
<strong>Search string: </strong>
<textarea rows="4" cols="50" id="search-string"></textarea>
</div>
<br />
<h4>Help</h4>
<p>
<ul>
<li>
<code>@abc</code> - matches notes with label abc</li>
<li>
<code>@!abc</code> - matches notes without abc label (maybe not the best syntax)</li>
<li>
<code>@abc=true</code> - matches notes with label abc having value true</li>
<li><code>@abc!=true</code></li>
<li>
<code>@"weird label"="weird value"</code> - works also with whitespace inside names values</li>
<li>
<code>@abc and @def</code> - matches notes with both abc and def</li>
<li>
<code>@abc @def</code> - AND relation is implicit when specifying multiple labels</li>
<li>
<code>@abc or @def</code> - OR relation</li>
<li>
<code>@abc<=5</code> - numerical comparison (also >, >=, <).</li>
<li>
<code>some search string @abc @def</code> - combination of fulltext and label search - both of them need to match (OR not supported)</li>
<li>
<code>@abc @def some search string</code> - same combination</li>
</ul>
<a href="https://github.com/zadam/trilium/wiki/Labels">Complete help on search syntax</a>
</p>
2018-03-11 22:49:22 +08:00
</div>
2018-04-09 10:38:52 +08:00
<div id="note-detail-code" class="note-detail-component"></div>
<div id="note-detail-render" class="note-detail-component"></div>
<div id="note-detail-file" class="note-detail-component">
<table id="file-table">
<tr>
<th>File name:</th>
<td id="file-filename"></td>
</tr>
<tr>
<th>File type:</th>
<td id="file-filetype"></td>
</tr>
<tr>
<th>File size:</th>
<td id="file-filesize"></td>
</tr>
<tr>
<td>
<button id="file-download" class="btn btn-primary" type="button">Download</button>
<button id="file-open" class="btn btn-primary" type="button">Open</button>
</td>
</tr>
</table>
</div>
2018-03-11 22:49:22 +08:00
2018-04-09 10:38:52 +08:00
<input type="file" id="file-upload" style="display: none" />
2018-03-11 22:49:22 +08:00
</div>
2018-01-21 10:56:03 +08:00
2018-04-11 12:10:11 +08:00
<div id="children-overview"></div>
2018-02-05 09:23:30 +08:00
2018-07-28 23:59:55 +08:00
<div id="labels-and-relations">
<span id="label-list">
<button class="btn btn-sm show-labels-button">Labels:</button>
2018-02-05 09:23:30 +08:00
2018-07-28 23:59:55 +08:00
<span id="label-list-inner"></span>
</span>
<span id="relation-list">
<button class="btn btn-sm show-relations-button">Relations:</button>
<span id="relation-list-inner"></span>
</span>
2018-04-14 07:58:33 +08:00
</div>
2018-02-05 09:23:30 +08:00
</div>
2017-10-16 07:10:36 +08:00
</div>
2018-06-08 08:18:46 +08:00
<div id="add-link-dialog" title="Add note link" style="display: none;">
2017-12-22 10:54:25 +08:00
<form id="add-link-form">
2018-05-26 22:04:40 +08:00
<div id="add-link-type-div" class="radio">
2017-12-22 10:54:25 +08:00
<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>
2018-07-27 15:22:25 +08:00
<div class="input-group">
<input id="note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
<span class="input-group-addon" id="add-link-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
</div>
2017-10-16 07:10:36 +08:00
</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>
2018-07-27 15:22:25 +08:00
<input id="link-title" class="form-control" style="width: 100%;">
2017-10-16 07:10:36 +08:00
</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>
2018-07-27 15:22:25 +08:00
<input id="clone-prefix" class="form-control" style="width: 100%;">
2017-12-22 10:54:25 +08:00
</div>
2018-07-27 15:22:25 +08:00
<button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
2017-10-16 07:10:36 +08:00
</form>
</div>
<div id="jump-to-note-dialog" title="Jump to note" style="display: none;">
2018-07-26 22:05:09 +08:00
<div class="form-group">
<label for="jump-to-note-autocomplete">Note</label>
2018-07-27 15:22:25 +08:00
<div class="input-group">
<input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
<span class="input-group-addon" id="jump-to-note-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
</div>
2018-07-26 22:05:09 +08:00
</div>
2018-06-06 11:28:10 +08:00
2018-07-26 22:05:09 +08:00
<button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
2017-10-16 07:10:36 +08:00
</div>
2017-11-19 06:05:50 +08:00
<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">
2017-12-27 11:19:42 +08:00
<label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
2017-12-25 22:30:37 +08:00
<input id="protected-session-password" class="form-control" type="password">
2017-10-16 07:10:36 +08:00
</div>
2017-12-25 22:30:37 +08:00
2017-12-27 11:19:42 +08:00
<button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
2017-10-16 07:10:36 +08:00
</form>
</div>
2018-04-02 05:41:28 +08:00
<div id="options-dialog" title="Options" style="display: none;">
<div id="options-tabs">
2017-10-16 07:10:36 +08:00
<ul>
2018-06-09 11:18:53 +08:00
<li><a href="#appearance">Apperance</a></li>
2017-10-16 07:10:36 +08:00
<li><a href="#change-password">Change password</a></li>
2017-11-15 11:44:45 +08:00
<li><a href="#protected-session-timeout">Protected session</a></li>
2018-03-26 08:52:38 +08:00
<li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
2018-07-23 04:21:16 +08:00
<li><a href="#sync-setup">Sync</a></li>
2017-12-23 22:35:00 +08:00
<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>
2018-06-09 11:18:53 +08:00
<div id="appearance">
2018-06-09 22:34:51 +08:00
<p>Settings on this options tab are saved automatically after each change.</p>
2018-06-09 11:18:53 +08:00
<form>
<div class="form-group">
<label for="theme-select">Theme</label>
<select class="form-control" id="theme-select">
<option value="white">White</option>
<option value="dark">Dark</option>
<option value="black">Black</option>
</select>
</div>
<div class="form-group">
2018-06-09 22:34:51 +08:00
<label for="zoom-factor-select">Zoom factor (desktop build only)</label>
<input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
2018-06-09 11:18:53 +08:00
</div>
2018-06-09 22:34:51 +08:00
<p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
2018-06-09 11:18:53 +08:00
</form>
</div>
2017-10-16 07:10:36 +08:00
<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>
2017-11-15 11:44:45 +08:00
<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
2017-11-15 11:44:45 +08:00
<form id="protected-session-timeout-form">
2017-10-16 07:10:36 +08:00
<div class="form-group">
2017-11-15 11:44:45 +08:00
<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>
2018-03-26 08:52:38 +08:00
<div id="note-revision-snapshot-time-interval">
<p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
2017-10-16 07:10:36 +08:00
2018-03-26 08:52:38 +08:00
<form id="note-revision-snapshot-time-interval-form">
2017-10-16 07:10:36 +08:00
<div class="form-group">
2018-03-26 08:52:38 +08:00
<label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
<input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
2017-10-16 07:10:36 +08:00
</div>
<button class="btn btn-sm">Save</button>
</form>
</div>
2018-07-23 04:21:16 +08:00
<div id="sync-setup">
2018-07-23 16:29:17 +08:00
<h4 style="margin-top: 0px;">Sync configuration</h4>
2018-07-23 04:21:16 +08:00
<form id="sync-setup-form">
<div class="form-group">
2018-07-25 16:57:36 +08:00
<label for="sync-server-host">Server instance address</label>
2018-07-23 04:21:16 +08:00
<input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
</div>
<div class="form-group">
<label for="sync-server-timeout">Sync timeout (milliseconds)</label>
<input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
</div>
<div class="form-group">
<label for="sync-proxy">Sync proxy server (optional)</label>
<input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
</div>
<button class="btn btn-sm">Save</button>
</form>
2018-07-23 16:29:17 +08:00
<h4>Sync test</h4>
<p>This will test connection and handshake to the sync server.</p>
<button id="test-sync-button" class="btn btn-sm">Test sync</button>
2018-07-25 02:35:03 +08:00
<h4>Sync document to the server instance</h4>
2018-07-23 16:29:17 +08:00
2018-07-25 02:35:03 +08:00
<p>This is used when you want to sync your local document to the server instance configured above. This is a one time action after which the documents are synced automatically and transparently.</p>
2018-07-23 16:29:17 +08:00
2018-07-25 02:35:03 +08:00
<button id="sync-to-server-button" class="btn btn-sm">Sync local document to the server instance</button>
2018-07-23 04:21:16 +08:00
</div>
2017-12-23 22:35:00 +08:00
<div id="advanced">
<h4 style="margin-top: 0px;">Sync</h4>
2017-12-14 12:03:48 +08:00
<button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
2017-12-20 11:04:51 +08:00
<br/>
<br/>
<button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
2017-12-23 22:35:00 +08:00
<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>
2017-12-23 22:35:00 +08:00
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).
2017-12-23 22:35:00 +08:00
2018-03-26 08:52:38 +08:00
This means that some images can disappear from note revisions.</p>
2018-01-08 03:07:59 +08:00
2018-07-26 15:21:52 +08:00
<button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
2018-01-08 03:07:59 +08:00
<h4>Vacuum database</h4>
<p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
2017-12-23 22:35:00 +08:00
<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">
2017-11-17 09:03:44 +08:00
<tr>
<th>App version:</th>
<td id="app-version"></td>
</tr>
<tr>
<th>DB version:</th>
<td id="db-version"></td>
</tr>
2018-06-11 03:55:29 +08:00
<tr>
<th>Sync version:</th>
<td id="sync-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>
2018-03-26 08:52:38 +08:00
<div id="note-revisions-dialog" title="Note revisions" style="display: none;">
2017-10-16 07:10:36 +08:00
<div style="display: flex;">
2018-03-26 08:52:38 +08:00
<select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
2017-10-16 07:10:36 +08:00
</select>
2018-03-26 08:52:38 +08:00
<div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
<h3 id="note-revision-title" style="margin: 3px;"></h3>
2017-10-16 07:10:36 +08:00
2018-03-26 08:52:38 +08:00
<div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
2017-10-16 07:10:36 +08:00
</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;">
2018-05-22 08:12:46 +08:00
<div id="sql-console-query"></div>
2018-02-10 22:14:18 +08:00
<div style="text-align: center">
<button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
</div>
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;">
2017-12-27 09:54:41 +08:00
<textarea id="note-source" readonly="readonly"></textarea>
2017-12-27 07:15:29 +08:00
</div>
2018-08-03 17:11:57 +08:00
<div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
<form data-bind="submit: save">
<div style="text-align: center">
<button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
</div>
<div style="height: 97%; overflow: auto">
<table id="attributes-table" class="table">
<thead>
<tr>
<th></th>
2018-08-03 19:06:56 +08:00
<th>Type</th>
2018-08-03 17:11:57 +08:00
<th>Name</th>
<th>Value</th>
2018-08-03 19:06:56 +08:00
<th>Inheritable</th>
2018-08-03 17:11:57 +08:00
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: attributes">
2018-08-04 04:56:49 +08:00
<tr data-bind="if: isDeleted == 0">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<td>
<select data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
</td>
<td>
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
<input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
<div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate attribute.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
</td>
<td>
<input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
2018-08-06 02:08:56 +08:00
<div class="relation-value input-group" data-bind="visible: type == 'relation'" style="width: 300px;">
2018-08-04 04:56:49 +08:00
<input class="form-control relation-target-note-id"
placeholder="search for note by its name"
2018-08-06 02:08:56 +08:00
data-bind="value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
2018-08-04 04:56:49 +08:00
<span class="input-group-addon relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
</div>
2018-08-06 02:08:56 +08:00
<div data-bind="visible: type == 'label-definition'">
<select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
2018-08-04 04:56:49 +08:00
2018-08-06 02:08:56 +08:00
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
2018-08-04 04:56:49 +08:00
2018-08-06 02:08:56 +08:00
<input type="checkbox" value="true" data-bind="checked: labelDefinition.isPromoted" /> Promoted
2018-08-04 04:56:49 +08:00
</div>
2018-08-06 02:48:56 +08:00
<div data-bind="visible: type == 'relation-definition'">
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
<input type="checkbox" value="true" data-bind="checked: relationDefinition.isPromoted" /> Promoted
</div>
2018-08-04 04:56:49 +08:00
</td>
<td title="Inheritable relations are automatically inherited to the child notes">
<input type="checkbox" value="1" data-bind="checked: isInheritable" />
</td>
<td title="Delete" style="padding: 13px; cursor: pointer;">
<span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
</td>
</tr>
2018-08-03 17:11:57 +08:00
</tbody>
</table>
</div>
</form>
</div>
2018-03-25 10:02:26 +08:00
<div id="labels-dialog" title="Note labels" style="display: none; padding: 20px;">
2018-01-20 08:39:37 +08:00
<form data-bind="submit: save">
2018-02-05 06:22:21 +08:00
<div style="text-align: center">
2018-03-25 10:02:26 +08:00
<button class="btn btn-large" style="width: 200px;" id="save-labels-button" type="submit">Save changes <kbd>enter</kbd></button>
2018-01-12 10:40:09 +08:00
</div>
<div style="height: 97%; overflow: auto">
2018-03-25 10:02:26 +08:00
<table id="labels-table" class="table">
2018-01-12 10:40:09 +08:00
<thead>
<tr>
2018-02-10 21:37:14 +08:00
<th></th>
2018-01-12 10:40:09 +08:00
<th>ID</th>
<th>Name</th>
<th>Value</th>
2018-02-07 12:09:19 +08:00
<th></th>
2018-01-12 10:40:09 +08:00
</tr>
</thead>
2018-03-25 10:02:26 +08:00
<tbody data-bind="foreach: labels">
2018-02-10 21:37:14 +08:00
<tr data-bind="if: isDeleted == 0">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<!-- ID column has specific width because if it's empty its size can be deformed when dragging -->
2018-03-25 10:02:26 +08:00
<td data-bind="text: labelId" style="width: 150px;"></td>
2018-01-12 10:40:09 +08:00
<td>
2018-02-05 12:16:45 +08:00
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
2018-07-27 17:28:24 +08:00
<input type="text" class="label-name form-control" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.labelChanged }"/>
2018-03-25 10:02:26 +08:00
<div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate label.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Label name can't be empty.</div>
2018-01-12 10:40:09 +08:00
</td>
<td>
2018-07-27 17:28:24 +08:00
<input type="text" class="label-value form-control" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.labelChanged }" style="width: 300px"/>
2018-01-12 10:40:09 +08:00
</td>
2018-07-28 23:59:55 +08:00
<td title="Delete" style="padding: 13px; cursor: pointer;">
2018-03-25 10:02:26 +08:00
<span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteLabel"></span>
2018-02-07 12:09:19 +08:00
</td>
2018-01-12 10:40:09 +08:00
</tr>
</tbody>
</table>
</div>
2018-01-20 08:39:37 +08:00
</form>
2018-01-11 13:01:16 +08:00
</div>
2018-07-27 16:52:48 +08:00
<div id="relations-dialog" title="Note relations" style="display: none; padding: 20px;">
<form data-bind="submit: save">
<div style="text-align: center">
<button class="btn btn-large" style="width: 200px;" id="save-relations-button" type="submit">Save changes <kbd>enter</kbd></button>
</div>
<div style="height: 97%; overflow: auto">
<table id="relations-table" class="table">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Relation name</th>
<th>Target note</th>
2018-07-30 02:33:42 +08:00
<th>Inheritable</th>
2018-07-27 16:52:48 +08:00
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: relations">
<tr data-bind="if: isDeleted == 0">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<!-- ID column has specific width because if it's empty its size can be deformed when dragging -->
<td data-bind="text: relationId" style="width: 150px;"></td>
<td>
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
2018-07-27 17:28:24 +08:00
<input type="text" class="relation-name form-control" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.relationChanged }"/>
2018-07-27 16:52:48 +08:00
<div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate relation.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Relation name can't be empty.</div>
</td>
<td>
2018-07-27 17:28:24 +08:00
<div class="input-group">
2018-07-29 18:34:40 +08:00
<input class="form-control relation-target-note-id"
2018-07-27 17:28:24 +08:00
placeholder="search for note by its name"
data-bind="value: targetNoteId, valueUpdate: 'blur', event: { blur: $parent.relationChanged }"
style="width: 300px;">
2018-07-28 23:02:48 +08:00
<span class="input-group-addon relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
2018-07-27 17:28:24 +08:00
</div>
2018-07-27 16:52:48 +08:00
</td>
2018-07-30 02:33:42 +08:00
<td title="Inheritable relations are automatically inherited to the child notes">
<input type="checkbox" value="1" data-bind="checked: isInheritable" />
</td>
2018-07-28 23:59:55 +08:00
<td title="Delete" style="padding: 13px; cursor: pointer;">
2018-07-27 16:52:48 +08:00
<span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteRelation"></span>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
2017-10-16 07:10:36 +08:00
<div id="tooltip" style="display: none;"></div>
<script type="text/javascript">
2018-03-26 08:18:08 +08:00
window.baseApiUrl = 'api/';
window.glob = {
2017-12-17 09:48:34 +08:00
activeDialog: null,
2017-12-20 12:22:21 +08:00
sourceId: '<%= sourceId %>',
2018-04-03 09:34:28 +08:00
maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>,
instanceName: '<%= instanceName %>'
2017-12-17 09:48:34 +08:00
};
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>
2018-03-25 00:52:58 +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 -->
2018-03-25 00:52:58 +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
2018-03-25 00:52:58 +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
2018-03-25 00:52:58 +08:00
<script src="/libraries/bootstrap-notify.min.js"></script>
2017-11-27 01:56:07 +08:00
2017-10-16 07:10:36 +08:00
<!-- Include Fancytree skin and library -->
2018-03-25 00:52:58 +08:00
<link href="/libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="/libraries/fancytree/jquery.fancytree-all.min.js"></script>
2017-10-16 07:10:36 +08:00
2018-03-25 00:52:58 +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
2018-03-25 00:52:58 +08:00
<script src="/libraries/jquery.ui-contextmenu.min.js"></script>
2017-10-16 07:10:36 +08:00
2018-03-25 00:52:58 +08:00
<script src="/libraries/knockout.min.js"></script>
2018-01-11 13:01:16 +08:00
2018-03-25 00:52:58 +08:00
<link href="/stylesheets/style.css" rel="stylesheet">
2017-10-16 07:10:36 +08:00
2018-03-26 01:02:39 +08:00
<script src="/javascripts/services/bootstrap.js" type="module"></script>
2018-03-24 23:18:46 +08:00
2018-01-03 11:01:38 +08:00
<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>
2018-03-08 12:24:23 +08:00
<style type="text/css">
<%= appCss %>
</style>
2017-10-15 11:31:44 +08:00
</body>
2017-10-16 07:10:36 +08:00
</html>
