-
Notifications
You must be signed in to change notification settings - Fork 12
Developer's notes
Layout consists of three different views, each built on top of its own html document.
List Log entries view has three columns or panes. Left pane is populated by filters (Logbooks, Tags and time filters), middle pane is populated with a list of Log entries and the right pane is reserved for particular Log entry details. When Olog is loaded, Log entries are loaded in the middle pane. How many Log entries are loaded can be set with numberOfLogsPerLoad constant in configuration.js file. In the middle pane only the summaries of Log entries are displayed, full version of Log entry will be displayed in the right pane when user clicks on a Log entry list item.
In the right pane description, attachments and properties are displayed. If user clicks on a Show details link, modified date, level, selected Logbooks and Tags are also displayed.
All available Logbooks and Tags are loaded into the left pane. Every group has text input in the header that allows user to filter group elements by its name. By selecting one or more Tags or Logbooks Log entries are listed that comply with those filters. Besides Logbooks and Tags, time filters are loaded below them. They allow user to filter Log entries by time Log entries were entered into the system. Created from filter group can be modified by changing the createdFromFilterDefinition object.
All filters are saved into a cookie named filtersCookieName and are selected automatically when Olog loads and if cookie is still valid.
All filter groups can be collapsed by clicking on an arrow icon next to the filter group name. They are collapsed by default when Olog is loaded on a device that has screen width smaller than smallScreenResolutionWidth. When filter items are selected they stay visible even though group gets collapsed or filter items are filtered.
If Olog is loaded on a small screen resolution device, all three columns are stacked one upon the other and as said before they are collapsed by default.
By clicking on New Log Entry button, home view is replaced by a view with only two columns. Left pane contains text area for entering Log entry description and buttons for uploading attachments and adding properties. Right pane allows user to select Logbooks and Tags new Log will be put in.
Before creating new log entry, user must be signed in (and must have enough permissions to create a new Log entry), description should not be empty and at least one Logbook should be selected.
When user is signed in, modify icon can be seen in the top right corner of the Log entry's details (right pane). When user clicks on that icon, modify view is shown. Like Add new Log entry view, Modify Log view also has two columns. In the right pane there are filters and in the left pane there are text area with current description field, attachment zone and form for adding properties.
User can sign in by pressing the Sign in button and entering his credentials. After the form is submitted, credentials are checked on the server. By parsing server response system will save credentials into the cookie (cookie name can be set by sessionCookieName) and display user's name in the top right corner or show an error message.
When user presses Sign out, session cookie is deleted.
User can search through Log entries by selecting filters or by entering search query into a search input. Search feature implements simple search language that allows user to set Logbooks, Tags, time ranges and keywords for searching through a description.
User can insert text in the search field in the following form:
[general search keywords [tag: list of tags separated by comma] [logbook: list of logbooks separated by comma] [from: start of time interval in format defined with datePickerDateFormat and datePickerTimeFormat] [to: end of time interval in unix timestamp]].
General search keywords can also contain wildcard characters. Reserved keywords (tag:, lagbook:, ...) can be set with keyMap. Object contains a map from search query language to actual search url that is sent to the server.
Examples: sdf* logbook: Electronics Maintenance from: 07/01/2013 09:50 to: 07/01/2013 09:52 , test* logbook: Electronics Maintenance tag: Bumps
When using Olog on larger screens, user can resize the panes to suit his needs. Sizes of pans are saved into the setting cookie and can be passed from one view to another. Because sizes are saved into the cookie, Olog will be automatically resized after browser will be closed and opened again. If Olog is opened on small screen resolution, resize is disabled.
Modal window are used for adding, modifying and deleting Logbooks and Tags and for confirmation boxes. Because they are used in all three views they are in a separate html document. Before Modal window is shown to the user it must be copied into the current html document's DOM structure. Path to the html with Modal Windows inside is set with modalWindows.
To separate html and javascript code, Olog uses Mustache.js template engine. Because the same template can be used in more then one view, templates are placed in a separate file. Before templates can be used, they must be copied to the current html document's DOM structure. Path to the html with templates inside can be set with templates.
There are three cookies that store data we want to use also the next time browser opens. There is a cookie for storing selected filters filtersCookieName, cookie for storing session data sessionCookieName and cookie for storing Olog settings (panes' widths) settingsCookieName.
All other data is not saved locally but is passed by http GET method e.g. id of Log entry that is being modified, id of the Log that is currently displayed.
Olog is constantly checking whether new Log entries exist on a server but only if search query doesn't include end date. Delay between two server requests can be set with updateInterval. If new entries are found, they are prepended to the current list of Log entries. When Olog checks for new entries it looks for ones that were created between the time of the last displayed log and the current time. On small screen this functionality is disabled for performance reasons.
Attachments must be uploaded to the server. For now, all file types are allowed to be uploaded. User with enough permissions can upload files by clicking on Add Files button (file explorer), dragging & dropping them to the New Log entry view (supported only by Firefox and Google Chrome) or by pasting them from clipboard (supported only for images by Firefox and Google Chrome). When user is modifying existing Log entry, attachments can be deleted and new attachments can be added.
For pasting objects from clipboard to new Log entry, hidden div was created. Object is then pasted into this div and then moved to appropriate place. Before pasting into it, hidden div must be always focused but not when textarea is focused. If textarea is focused we assume user wants to paste text.
Because of the number of Log entries in the system, limited number of Log entries are loaded per request. The number of Log entries loaded per request can be set with numberOfLogsPerLoad. After user scrolls to the end of the Log entry list, another request is executed and Log entries in response are appended to the end of the current list.