Epilogue.

<<set $title = "épilogue", $description = "a time tracker for people who don’t like time tracking.", $id = 0, $screen ="Start", $mode ="Table", $database = [], $timePeriod = 24, $timeLeft = $timePeriod, $timePassed = 0, $project = "", $domain = "", $activity = "", $totalTime = 0, $yay = 0, $meh = 0, $sad = 0, $days = 0, $projectsList = [], $domainsList = [] >>

<<title>> <div class="logo"></div> <<tagline>> <div class="left-menu"> /%[[Plan|Plan][$screen = "Plan"]] %/[[Log|Update][$screen = "Log"]] <<if $database.length > 1>>[[Stats|Update][$screen = "Stats"]]<<endif>> [[Info|Info][$screen = "Info"]] <<link "Saves">><<script>>UI.saves();<</script>><</link>> </div> <<version>>

<<script>> /* favicon */ (function() { var link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+Gkqr6gAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG7SwNBEIc/EyWikQiKWlgEjVYqMULQxiLBF6hFEsFXk1xeQh7HXYIEW8E2oCDa+Cr0L9BWsBYERRFEsLNWtFE554yQIGaW2fn2tzvD7ixYQiklrde6IZ3JaYEJn3N+YdFpe8KOgzba6Q4rujoTHA9R1d5vqTHjdb9Zq/q5f60xGtMVqKkXHlVULSc8KTy9mlNN3hJuVZLhqPCJcJ8mFxS+MfVIiZ9NTpT402QtFPCDpVnYmajgSAUrSS0tLC/HlU7lld/7mC+xxzJzQYld4p3oBJjAh5MpxvDjZZARmb3042FAVlTJd//kz5KVXEVmlQIaKyRIkqNP1LxUj0mMix6TkaJg9v9vX/X4kKdU3e6DukfDeO0B2yZ8FQ3j48Awvg7B+gDnmXJ+dh+G30QvljXXHjjW4fSirEW24WwDOu7VsBb+kazilngcXo6haQFarqBhqdSz332O7iC0Jl91CTu70CvnHcvfdG9n7JhAZqUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJ8SURBVCiRTVI9SytBFL0z7sYxiuxK/Bi1CWIl0U4UBCE/YEWrQMDCRuxFCAiW6SVgHYT8gECQQDrBzlISwg5KECNRVmfX7LqzmdlXrM/3bnG4xTn3nsu5iDEWxzEAIISEEJOTk6Zpwt/6+PgYDoepVOqXoyUdAAghFhcXHx4eLi8vHx8fASCbzR4cHKytrb28vOi6ntBwohuNRpTSUqlULBY9z7Msy7Isz/OKxWKpVKKUjkYjhBAAAGOs3W5zzguFQj6f7/f7QohWq9VqtYQQ/X4/n88XCgXOebvdZozhKIoymUytVmOMNZtNx3Fc163X6/V63XVdx3GazSZjrFarZTKZf5aq1Wq5XH5+fpZSYowJIYQQjLGUstfrlcvl6+vrxJI2MTHR7XYxxrlcTilFCDEMgxACAIZhhGGoadrGxoaUstPpUEq1VCo1GAxM0/R9/+joKAxD0zQbjQYA3N/fc859369Wq+vr65xzSqkmpUyn00EQEELOzs6UUgsLC4ZhYIxPTk50XT88POx0OhcXF19fXwCgfX9/r66ucs4dx8nlclEULS0traysSCm3trZub2/T6fTOzo7neZqmAQCOomhmZmZzc/Pq6mp+fv79/T0IguFw6Pv+zc3N3t7e+fk5ACilfnKwbbvb7fZ6vWw2W6lUhBCfn5+VSoUQsru722g03t7ekgRs22aMIcaYlHJ8fNx1Xcuytre3j4+Pl5eXhRCzs7NCCM75718ghHAcx2NjY0EQTE9P393dUUpPT0/39/efnp48z0vYiZkftG07USulAGBubi4Mw8FgoOt6cuXv7DiOEUJaokv2xHH8+voKAFNTU0qphPE/AsAf7T1mzXslxBkAAAAASUVORK5CYII='; document.getElementsByTagName('head')[0].appendChild(link); })(); <</script>> <<goto "Help">>

<<set $screen = "Project">><<topmenu>> <<if $timeLeft == 0>> <<for _i = 0; _i < $database.length; _i++>> <<if $dateNum > $database[_i][4] && $database[_i][2] == 0>> /% if current date > previous date & time left = 0 %/ <<set $timeLeft = $timePeriod>> <<goto "Project">> <<break>> <<else>> <div class="description">Sorry, one day contains only twenty-four hours. I know, it’s a shame.</div> <<break>> <<endif>> <</for>> <<else>> <div class="description"> <<if $timeLeft < $timePeriod>> Type the name of the project or choose it below. <<else>> What project did you work on today? <<endif>> </div> <<textbox "$project" "" "Domain" autofocus>> <span class="icon tooltip" data-balloon-length="large" data-balloon=' Not required. Useful to sort your activities into distinct projects. Example: "My indie game" or "Experimental craft beer 2.0". ' data-balloon-pos="down">? </span> <div class="latest"> <<if $projectsList.length >= 1>><span>[[$projectsList[0]|Domain][$project = $projectsList[0]]]</span><<endif>> <<if $projectsList.length >= 2>><span class="separator"><span>[[$projectsList[1]|Domain][$project = $projectsList[1]]]</span><<endif>> <<if $projectsList.length >= 3>><span class="separator"><span>[[$projectsList[2]|Domain][$project = $projectsList[2]]]</span><<endif>> <<if $projectsList.length >= 4>><span class="separator"><span>[[$projectsList[3]|Domain][$project = $projectsList[3]]]</span><<endif>> <<if $projectsList.length >= 5>><span class="separator"><span>[[$projectsList[4]|Domain][$project = $projectsList[4]]]</span><<endif>> </div> <<endif>>

<<set $screen = "Domain">><<topmenu>> <div class="description"> <<if $timeLeft < $timePeriod>> /% change if it isn’t the first entry of the day, untested %/ Type the name of the domain or choose it below. <<else>> What was the domain of this activity? <<endif>> </div> <<textbox "$domain" "" "Activity" autofocus>> <span class="icon tooltip" data-balloon-length="large" data-balloon=' Not required. Defines specific kinds of activity for your project. Example: "Programming" or "Growing hops". ' data-balloon-pos="down">? </span> <div class="latest"> <<if $domainsList.length >= 1>><span>[[$domainsList[0]|Activity][$domain = $domainsList[0]]]</span><<endif>> <<if $domainsList.length >= 2>><span class="separator"><span>[[$domainsList[1]|Activity][$domain = $domainsList[1]]]</span><<endif>> <<if $domainsList.length >= 3>><span class="separator"><span>[[$domainsList[2]|Activity][$domain = $domainsList[2]]]</span><<endif>> <<if $domainsList.length >= 4>><span class="separator"><span>[[$domainsList[3]|Activity][$domain = $domainsList[3]]]</span><<endif>> <<if $domainsList.length >= 5>><span class="separator"><span>[[$domainsList[4]|Activity][$domain = $domainsList[4]]]</span><<endif>> </div>

<<set $screen = "Activity">><<topmenu>> <div class="description">Describe what you did in a few words.</div> <<textbox "$activity" "" "Check activity" autofocus>> <span class="icon tooltip" data-balloon-length="large" data-balloon=' Required. It’s the most important information of your log. Example: "Added two new fields to the database" or "Trimmed dead leaves". ' data-balloon-pos="down">? </span>

<<if $activity.length <= 1>> <<goto "Activity">> <<else>> <<goto "Duration">> <<endif>>

<<set $screen = "Duration">><<topmenu>> <<if $id == 0>><<set $timeLeft = $timePeriod>><<endif>> <div class="description">How much of your time did it take?</div> <<textbox "$duration" "" "Check duration" autofocus>> hours <span class="icon tooltip" data-balloon-length="large" data-balloon=' Required. Enter a decimal value, up to three digits. Example: "2" for two hours, "0.5" for half an hour or "0.25" for fifteen minutes. ' data-balloon-pos="down">? </span>

<<set $duration = Number($duration)>> <<if isNaN($duration) || $duration > $timePeriod || $duration <=0 || $duration > $timeLeft || $duration.length > 3>> <<goto "Duration">> <<else>> <<set $timeLeft -= $duration>> <<goto "Mood">> <<endif>>

<<set $screen = "Mood">><<topmenu>> <div class="description">How do you feel about the result? <span class="icon tooltip" data-balloon-length="large" data-balloon=' Required. Choose the face that sums up how you feel regarding your progress on this activity. ' data-balloon-pos="down">? </span> </div> <div class="radio-ctn"> <div class="btn-yay"><<button ": )" "Process">><<set $mood = ":)">><</button>></div> <div class="btn-meh"><<button ": |" "Process">><<set $mood = ":|">><</button>></div> <div class="btn-sad"><<button ": (" "Process">><<set $mood = ":(">><</button>></div> </div>

<<currentdate>> <<if $projectsList.length == 0 && $project != "">> <<set $projectsList.unshift($project)>> <<elseif $project != "">> <<for _i = 0; _i < $projectsList.length; _i++>> <<if $projectsList[_i] == $project>> <<break>> <<elseif $projectsList[_i] != $project>> <<set $projectsList.unshift($project)>> <<break>> <<endif>> <</for>> <<if $projectsList.length > 5>> <<set $projectsList.pop()>> <<endif>> <<endif>> <<if $domainsList.length == 0 && $domain != "">> <<set $domainsList.unshift($domain)>> <<elseif $domain != "">> <<for _i = 0; _i < $domainsList.length; _i++>> <<if $domainsList[_i] == $domain>> <<break>> <<elseif $domainsList[_i] != $domain>> <<set $domainsList.unshift($domain)>> <<break>> <<endif>> <</for>> <<if $domainsList.length > 5>> <<set $domainsList.pop()>> <<endif>> <<endif>> <<set $database.unshift([])>> <<set $database[0].unshift(0)>> <<set $database[0].unshift($mood)>> <<set $database[0].unshift($activity)>> <<set $database[0].unshift($domain)>> <<set $database[0].unshift($project)>> <<set $database[0].unshift($dateNum)>> <<set $database[0].unshift($dateStrDot)>> <<set $database[0].unshift($timeLeft)>> <<set $duration = ($duration).toString()>> <<set $duration = $duration + " h">> <<set $database[0].unshift($duration)>> <<set $database[0].unshift($id)>>  <<set $id += 1>> <<set $screen = "Log">> <<goto "Update">>

$database[0][7] <<if $screen == "Stats">> <<goto "Stats">> <<else>> <<goto "Log">> <<endif>>

<<set $screen = "Log">><<topmenu>> <<mainmenu>> <<script>> window.onfocus = function(){ window.location.reload(); } <</script>> <<timeleft>> <<datecheck>> <<submenu>> <<if $mode == "Table">> <table class="log-table"> <<for _i = 0; _i < $database.length; _i++>> <<set $timeBar = Number($database[_i][1].slice(0, -2))/$timePeriod*100>> <<set $timeOffset = $database[_i][2]/$timePeriod*100>> <<set $timePassed = ($timePeriod - $database[_i][2])/$timePeriod*100>> <<if $database[_i][9] == 1 || _i == 0>> /* if time left == 0 or first row*/ <tr class="row-date"> <td colspan=9 class="cell"> <<print $database[_i][3]>> - /* display last item date */ <<print ($timePeriod - $database[_i][2]).toFixed(2)>> h </td> </tr> <tr class="row"> <<for _j = 0; _j < $database[_i].length; _j++>> <<print "<td class='cell'>" + $database[_i][_j] + "</td>" >> <</for>> </tr> <tr class="row-stats-log"> <td colspan=9 class="stats-cell"> <<print "<div class='bar-empty light-grey'>" + "<div class='bar red' style= 'z-index: 2; border-left: 1px solid white; float: right; width: " + $timeBar + "%; margin-right: " + $timeOffset + "%;' ></div>" + "<div class='bar dark-grey' style= 'z-index: 1; width: " + $timePassed + "%;' ></div>" + "</div>" >> </td> </tr> <<else>> <tr class="row"> <<for _j = 0; _j < $database[_i].length; _j++>> <td class="cell"> <<print $database[_i][_j]>> </td> <</for>> </tr> <tr class="row-stats-log"> <td colspan=9 class="stats-cell"> <<print "<div class='bar-empty light-grey'>" + "<div class='bar red' style= 'z-index: 2; border-left: 1px solid white; float: right; width: " + $timeBar + "%; margin-right: " + $timeOffset + "%;' ></div>" + "<div class='bar dark-grey' style= 'z-index: 1; width: " + $timePassed + "%;' ></div>" + "</div>" >> </td> </tr> <<endif>> <</for>> </table> <<elseif $mode == "Table %">> <table class="log-table"> <<for _i = 0; _i < $database.length; _i++>> <<set $timeBar = Number($database[_i][1].slice(0, -2))/$timePeriod*100>> <<set $timeOffset = $database[_i][2]/$timePeriod*100>> <<set $timePassed = ($timePeriod - $database[_i][2])/$timePeriod*100>> <<if $database[_i][9] == 1 || _i == 0>> /* if time left == 0 or first row*/ <tr class="row-date"> <td colspan=9 class="cell"> <<print $database[_i][3]>> - /* display last item date */ <<print (($timePeriod-$database[_i][2])/$timePeriod*100).toFixed(1)>> % </td> </tr> <tr class="row"> <<print "<td class='cell'>" + $database[_i][0] + "</td>">> <<print "<td class='cell'>" + $timeBar.toFixed(1) + "%" + "</td>">> <<for _j = 2; _j < $database[_i].length; _j++>> <<print " <td class='cell'>" + $database[_i][_j] + "</td>" >> <</for>> </tr> <tr class="row-stats-log"> <td colspan=9 class="stats-cell"> <<print "<div class='bar-empty light-grey'>" + "<div class='bar red' style= 'z-index: 2; border-left: 1px solid white; float: right; width: " + $timeBar + "%; margin-right: " + $timeOffset + "%;' ></div>" + "<div class='bar dark-grey' style= 'z-index: 1; width: " + $timePassed + "%;' ></div>" + "</div>" >> </td> </tr> <<else>> <tr class="row"> <<print "<td class='cell'>" + $database[_i][0] + "</td>">> <<print "<td class='cell'>" + $timeBar.toFixed(1) + "%" + "</td>">> <<for _j = 2; _j < $database[_i].length; _j++>> <<print " <td class='cell'>" + $database[_i][_j] + "</td>" >> <</for>> </tr> <tr class="row-stats-log"> <td colspan=9 class="stats-cell"> <<print "<div class='bar-empty light-grey'>" + "<div class='bar red' style= 'z-index: 2; border-left: 1px solid white; float: right; width: " + $timeBar + "%; margin-right: " + $timeOffset + "%;' ></div>" + "<div class='bar dark-grey' style= 'z-index: 1; width: " + $timePassed + "%;' ></div>" + "</div>" >> </td> </tr> <<endif>> <</for>> </table> <<elseif $mode == "List">> <ul class="log-list"> <<for _i = 0; _i < $database.length; _i++>> <<if $database[_i][9] == 1 || _i == 0>> <span class="list-header"> <<print $database[_i][3]>> - <<print ($timePeriod - $database[_i][2]).toFixed(2)>> h </span> <li class="list-row"> <<for _j = 0; _j < $database[_i].length; _j++>> <span class="list-item"> <<print $database[_i][_j]>><<if _j ==1>> - <<elseif _j == 5 && $database[_i][_j] != "">>, <<elseif _j == 6 && $database[_i][_j] != "">>. <<elseif _j == 7>>. <<endif>> </span> <</for>> </li> <<else>> <li class="list-row"> <<for _j = 0; _j < $database[_i].length; _j++>> <span class="list-item"> <<print $database[_i][_j]>><<if _j ==1>> - <<elseif _j == 5 && $database[_i][_j] != "">>, <<elseif _j == 6 && $database[_i][_j] != "">>. <<elseif _j == 7>>. <<endif>> </span> <</for>> </li> <<endif>> <</for>> </ul> <<elseif $mode == "List %">> <ul class="log-list"> <<for _i = 0; _i < $database.length; _i++>> <<set $timeBar = Number($database[_i][1].slice(0, -2))/$timePeriod*100>> <<if $database[_i][9] == 1>> <span class="list-header"> <<print $database[_i][3]>> - <<print (($timePeriod-$database[_i][2])/$timePeriod*100).toFixed(1)>> % </span> <li class="list-row"> <<print "<span class='list-item'>" + $database[_i][0] + "</span>">> <<print "<span class='list-item'>" + $timeBar.toFixed(1) + "%" + " - </span>">> <<for _j = 2; _j < $database[_i].length; _j++>> <span class="list-item"> <<print $database[_i][_j]>><<if _j == 5 && $database[_i][_j] != "">>, <<elseif _j == 6 && $database[_i][_j] != "">>. <<elseif _j == 7>>. <<endif>> </span> <</for>> </li> <<else>> <li class="list-row"> <<print "<span class='list-item'>" + $database[_i][0] + "</span>">> <<print "<span class='list-item'>" + $timeBar.toFixed(1) + "%" + " - </span>">> <<for _j = 2; _j < $database[_i].length; _j++>> <span class="list-item"> <<print $database[_i][_j]>><<if _j == 5 && $database[_i][_j] != "">>, <<elseif _j == 6 && $database[_i][_j] != "">>. <<elseif _j == 7>>. <<endif>> </span> <</for>> </li> <<endif>> <</for>> </ul> <<endif>> <<if $debug == true>><<debug>><<endif>>

<<set $screen = "Stats">><<topmenu>>  <<datecheck>><<set $totalTime = 0, $yay = 0, $meh = 0, $sad = 0, $days = 0>> <<for _i = 0; _i < $database.length; _i++>> <<set $totalTime += Number($database[_i][1].slice(0, -2))>> <<if $database[_i][8] == ":)">> <<set $yay += 1>> <<elseif $database[_i][8] == ":|">> <<set $meh += 1>> <<elseif $database[_i][8] == ":(">> <<set $sad += 1>> <<endif>> <<if $database[_i][9] == 1>> <<set $days += 1>> <<endif>> <</for>> <<print ($totalTime).toFixed(2)>> hours logged for <<print $id>> activities on a total of <<if $database[0][4] > $database[1][4] && $database[0][9] != 1>><<print $days + 1>><<else>><<print $days>><<endif>> day<<if $days > 1>>s<<endif>>. <table class="stats-table"> <tr class="row-date"> <td colspan=9 class="cell"> Overall satisfaction </td> </tr> <tr class="stats-row"> <td class="stats-cell"> <<print " <div class='bar-title mood'><span>:) </span><span>" + ($yay/$id*100).toFixed(1) + "%</span></div>" + "<div class='bar-empty light-grey'>" + "<div class='bar red' style= 'z-index: 2; width: " + ($yay/$id*100).toFixed(1) + "%;' ></div>" + "</div>" >> </td> </tr> <tr class="stats-row"> <td class="stats-cell"> <<print " <div class='bar-title mood'><span>:| </span><span>" + ($meh/$id*100).toFixed(1) + "%</span></div>" + "<div class='bar-empty light-grey'>" + "<div class='bar blue' style= 'z-index: 2; width: " + ($meh/$id*100).toFixed(1) + "%;' ></div>" + "</div>" >> </td> </tr> <tr class="stats-row"> <td class="stats-cell"> <<print " <div class='bar-title mood'><span>:( </span><span>" + ($sad/$id*100).toFixed(1) + "%</span></div>" + "<div class='bar-empty light-grey'>" + "<div class='bar dark-grey' style= 'z-index: 2; width: " + ($sad/$id*100).toFixed(1) + "%;' ></div>" + "</div>" >> </td> </tr> </table>

<<set $screen = "Help">><<topmenu>><<mainmenu>> <h1>Hello!</h1> <p><strong>Epilogue</Strong> is an experimental time-tracking and activity logging tool designed to be used every day.</p> <p><div class="warning">It’s currently in a very early stage of development. Things may break unexpectedly. The next version could make your data obsolete (though I’ll do my best to avoid this). Save to disk often!</div></p> <h1>Data management</h1> <ul> <li>Everything is automatically saved in your browser’s local storage (or in the Itch’s app local storage). If you clear your browser’s cache or browse in private mode, you will lose your data.</li> <li>If you click on SAVES in the side bar, you’ll see the first slot is indicated by a A for Autosave. The autosave is automatically reloaded when you open the app.</li> <li>Other slots are meant for manual saving and loading. You can use them for different profiles or projects.</li> <li>You can use the bottom buttons to save and load a file that contains all your data. Use it often!</li> </ul> <h1>Application structure</h1> <ul> <li>It’s a single HTML file with a bunch of JavaScript. It can be hosted anywhere, and also works offline.</li> <li>Since your data is stored locally, you can export/import it between different instances if needed.</li> <li>It’s recommended to use the <a href="https://itch.io/app" target="_blank">Itch app</a> for easy updates and access to older versions.</li> <li>You can also use the <a href="https://beakerbrowser.com/" target="_blank">Beaker</a> browser and the <a href="dat://4bf5f5d19e5716005a5d344f0543e292484e9c3bf71957cc323bed1ec1a54a81" target="_blank">DAT version</a> of the app for a decentralised experience.</li> </ul> <p>To get started, click on the icon in the top left corner to display the side bar, then on LOG, then on NEW ACTIVITY.</p>

<<set $screen = "Info">><<topmenu>><<mainmenu>> <h1>About</h1> <p><strong>Epilogue</strong> is developped <a href="https://log.lectronice.com" target="_blank">lectronice</a>.</p> <p>It’s made with Twine. Yes, you read that well. More precisely, with <a href="https://dan-q.github.io/twee2" target="_blank">Twee2</a> and <a href="https://www.motoslave.net/sugarcube/" target="_blank">SugarCube</a>. It also uses the <a href="https://kazzkiq.github.io/balloon.css/target=" target="_blank">Balloon.css</a> tooltips.</p> <h1>Social / Contact</h1> <p>If you like this tool, please share it, and let me know. Tell me how you use it, what you like, what you don’t like, what can be improved. It will make me blissfully happy.</p> <ul> <li><a href="https://lectronice.itch.io/epilogue/community">Itch forum</a></li> <li><a href="dat://c4ec420ca3fc4205002769d715962dfa96eb595853d1e856c78df1cad73d36a7" target="_blank">Rotonde</a></li> <li><a href="https://twitter.com/lectronice" target="_blank">Twitter</a></li> </ul> <h1>Updates</h1> <p>You can get Epilogue’s latest version and support its development on Itch:</p> <iframe frameborder="0" src="https://itch.io/embed/206855?linkback=true&border_width=0&fg_color=000000&link_color=FF004D" width="550" height="165"></iframe> <p>You can also get it as a <a href="https://datproject.org" target="_blank">DAT</a> archive on the P2P web here:</p> <code>4bf5f5d19e5716005a5d344f0543e292484e9c3bf71957cc323bed1ec1a54a81</code>

<<set $screen = "Settings">><<topmenu>><<mainmenu>> <h1>Name and description</h1> <p>Since you can run several instances of Epilogue in different folders or at different URLs, you may want to provide a specific name to this one. This will help you tell your projects apart.</p> <p class="title-description"><<textbox "$title" $title "Settings">></p> <p class="tagline-description"><<textbox "$description" $description "Settings">></p> <h1>Offline use</h1> <p>Click the link below to get a local version of the application. You will also need to export your saves to use your data with this copy. If you're using a crappy old browser, you may need to right click the link and use "Save link as..." or "Copy link location".</p> <p><a href="index.html" download="epilogue.html">Download local version</a></p> <h1>Projects & domains lists</h1> <p>Projects: <<if $projectsList.length == 0>>none<<endif>><<print $projectsList>><br> <<if $projectsList.length > 0>>[[Delete projects list|Settings][$projectsList = []]]<<endif>></p> <p>Domains: <<if $domainsList.length == 0>>none<<endif>><<print $domainsList>><br> <<if $domainsList.length > 0>>[[Delete domains list|Settings][$domainsList = []]]<<endif>></p> <h1>Reset</h1> <p>This is meant to reset the application to a blank state without erasing your browser's cache.</p> <p><<script>> Dialog.addClickHandler( jQuery('<a id="reset">Global reset</a>').appendTo(output), null, function () { jQuery(Dialog.setup("Reset application")) .append( '<div class="warning"><p>This will wipe out all data and reset the application to its initial state.</p><p>Do you really want to do this?</p></div>' + '<div><button id="restart-ok">' + L10n.get(['restartOk', 'ok']) + '</button></div>' + '<div><button id="restart-cancel" class="ui-close">' + L10n.get(['restartCancel', 'cancel']) + '</button></div>' ) .find('#restart-ok') .ariaClick({ one : true }, function () { jQuery(document).one(':dialogclose', function () { Save.clear(); Engine.restart(); }); Dialog.close(); }); } ); <</script>></p> <h1>Debug</h1> <<if $debug != true>> <<click "Toggle debug mode on">><<set $debug = true>><<goto "Settings">><</click>> <<else>> <<click "Toggle debug mode off">><<set $debug = false>><<goto "Settings">><</click>> <<endif>>

<<widget "version">><div class="version smaller"><a href="https://lectronice.itch.io/epilogue" target="_blank" class="tooltip" data-balloon=' Get the latest version on Itch. ' data-balloon-pos="up">épilogue version 0.2.2</a></div><</widget>> <<widget "currentdate">> <<set $fullDate = new Date().toDateString()>> <<set $date = new Date(), $year = ($date.getFullYear()), $month = ($date.getMonth())+1, $day = ($date.getDate())>> <<if $month < 10>><<set $month = "0" + $month>><<endif>> <<if $day < 10>><<set $day = "0" + $day>><<endif>> <<set $date = $year + " . " + $month + " . " + $day>> <<set $yearStr = ($year).toString()>> <<set $monthStr = ($month).toString()>> /%<<set $dayStr = ($day)toString()>> returns an error, that's odd %/ <<set $dateStr = $yearStr + $monthStr + $day>> /% string + number = string? %/ <<set $dateStrDot = $yearStr + "." + $monthStr + "." + $day>> <<set $dateNum = Number($dateStr)>> <span class="date-today inactive"> <<if $database.length == 0 || $screen == "Log">><<print $fullDate>><<else>>[[$fullDate|Update][$screen = "Log"]]<<endif>> </span> <</widget>> <<widget "currenttime">> <<set _d to new Date(), _am to (_d.getHours() < 12), _hr to ((_d.getHours() % 12) || 12), _mins to (_d.getMinutes() < 10 ? "0" : "") + _d.getMinutes()>> <<print _hr + ":" + _mins + " " + (_am ? "A" : "P") + "M">> <</widget>> <<widget "topmenu">> <div class="top-menu dslct"> <<if $screen == "Start">> <<currentdate>> <<elseif $screen == "Project">> <<currentdate>> <span class="separator"> <span class="active top-new">New activity</span> <<elseif $screen == "Domain">> <<currentdate>> <span class="separator"> <span class="inactive">[[$project|Project][$screen = "Project"]]</span> <span class="separator"> <span class="active">Domain</span> <<elseif $screen == "Activity">> <<currentdate>> <span class="separator"> <span class="inactive">[[$project|Project][$screen = "Project"]]</span> <span class="separator"> <span class="inactive">[[$domain|Domain][$screen = "Domain"]]</span> <span class="separator"> <span class="active">Description</span> <<elseif $screen == "Duration">> <<currentdate>> <span class="separator"> <span class="inactive">[[$project|Project][$screen = "Project"]]</span> <span class="separator"> <span class="inactive">[[$domain|Domain][$screen = "Domain"]]</span> <span class="separator"> <span class="inactive">[[$activity|Activity][$screen = "Activity"]]</span> <span class="separator"> <span class="active">Duration</span> <<elseif $screen == "Feeling">> <<currentdate>> <span class="separator"> <span class="inactive">[[$project|Project][$screen = "Project"]]</span> <span class="separator"> <span class="inactive">[[$domain|Domain][$screen = "Domain"]]</span> <span class="separator"> <span class="inactive">[[$activity|Activity][$screen = "Activity"]]</span> <span class="separator"> <span class="duration inactive">[[$duration|Duration][$screen = "Duration"]]%</span> <span class="separator"> <span class="active">Feeling</span> <<elseif $screen == "Log">> <<currentdate>> / <span class="active"><<print $screen>></span> <<elseif $screen == "Stats">> <<currentdate>> / <span class="active"><<print $screen>></span> <<elseif $screen == "Info">> <<currentdate>> / <span class="active"><<print $screen>></span> <<elseif $screen == "Help">> <<currentdate>> / <span class="active"><<print $screen>></span> <<elseif $screen == "Settings">> <<currentdate>> / <span class="active"><<print $screen>></span> <<endif>> </div> <</widget>> <<widget "mainmenu">> <div class="menu small dslct"> <<if $screen == "Start">> <span class="menu-new">[[New activity|Project][$screen = "Project"]]</span> <<if $database.length > 0>> <span class="menu-log">[[Log|Update][$screen = "Log"]]</span> <<endif>> <<elseif $screen == "Log">> <span class="menu-new">[[New activity|Project][$screen = "Project"]]</span> <<if $database.length >= 1 && $database[$id-1][9] != true>> <span class="menu-del"> <<link "Delete last" "Update">> <<set $id -= 1>> /% remove one from the ID total %/ <<set $database[0][1] = $database[0][1].slice(0, -2);>> /% remove the percent from the duration string %/ <<set $duration = $database[0][1]>> /% get deleted activity's duration %/ <<set $duration = Number($duration)>> /% convert duration back to number %/ <<set $timeLeft += $duration>> /% add deleted activity's duration back to the time left %/ <<set $database.shift()>> /% remove first database row %/ <</link>> </span> <<endif>> <<if $database.length > 0>> <<if $mode == "Table">> <span class="menu-mode">[[List|Update][$screen = "Log", $mode = "List"]]</span> <<elseif $mode == "Table %">> <span class="menu-mode">[[List|Update][$screen = "Log", $mode = "List %"]]</span> <<elseif $mode == "List">> <span class="menu-mode">[[Table|Update][$screen = "Log", $mode = "Table"]]</span> <<elseif $mode == "List %">> <span class="menu-mode">[[Table|Update][$screen = "Log", $mode = "Table %"]]</span> <<endif>> <<endif>> <<elseif $screen == "Info">> <span class="menu-help">[[Help|Help][$screen = "Help"]]</span> <span class="menu-settings">[[Settings|Settings][$screen = "Settings"]]</span> <<elseif $screen == "Help">> <span class="menu-info">[[Info|Info][$screen = "Info"]]</span> <span class="menu-settings">[[Settings|Settings][$screen = "Settings"]]</span> <<elseif $screen == "Settings">> <span class="menu-info">[[Info|Info][$screen = "Info"]]</span> <span class="menu-help">[[Help|Help][$screen = "Help"]]</span> <<endif>> </div> <</widget>> <<widget "submenu">> <<if $database.length > 0>> <div class ="sub-menu dslct"> <<if $mode == "Table">> <span class="inactive percent" data-balloon=' Switch to percents display mode. ' data-balloon-pos="down"> <<button "%">><<set $mode ="Table %">><<goto "Update">><</button>> </span> <span class="inactive time" data-balloon=' Toggle time column on/off. ' data-balloon-pos="down"> <<button "T">><<toggleclass ".row .cell:nth-child(2)" "hidden">><</button>> </span> <span class="inactive mood" data-balloon=' Toggle mood column on/off. ' data-balloon-pos="down"> <<button ":)">><<toggleclass ".row .cell:nth-child(9)" "hidden">><</button>> </span> <<elseif $mode == "Table %">> <span class="inactive hours" data-balloon=' Switch to hours display mode. ' data-balloon-pos="down"> <<button "h">><<set $mode ="Table">><<goto "Update">><</button>> </span> <span class="inactive time" data-balloon=' Toggle time column on/off. ' data-balloon-pos="down"> <<button "T">><<toggleclass ".row .cell:nth-child(2)" "hidden">><</button>> </span> <span class="inactive mood" data-balloon=' Toggle mood column on/off. ' data-balloon-pos="down"> <<button ":)">><<toggleclass ".row .cell:nth-child(9)" "hidden">><</button>> </span> <<elseif $mode == "List">> <span class="inactive percent" data-balloon=' Switch to percents display mode. ' data-balloon-pos="down"> <<button "%">><<set $mode ="List %">><<goto "Update">><</button>> </span> <span class="inactive time" data-balloon=' Toggle time column on/off. ' data-balloon-pos="down"> <<button "T">><<toggleclass ".list-row .list-item:nth-child(2)" "hidden">><</button>> </span> <span class="inactive mood" data-balloon=' Toggle mood column on/off. ' data-balloon-pos="down"> <<button ":)">><<toggleclass ".list-row .list-item:nth-child(9)" "hidden">><</button>> </span> <<elseif $mode == "List %">> <span class="inactive percent" data-balloon=' Switch to hours display mode. ' data-balloon-pos="down"> <<button "%">><<set $mode ="List">><<goto "Update">><</button>> </span> <span class="inactive time" data-balloon=' Toggle time column on/off. ' data-balloon-pos="down"> <<button "T">><<toggleclass ".list-row .list-item:nth-child(2)" "hidden">><</button>> </span> <span class="inactive mood" data-balloon=' Toggle mood column on/off. ' data-balloon-pos="down"> <<button ":)">><<toggleclass ".list-row .list-item:nth-child(9)" "hidden">><</button>> </span> <<endif>> </div> <<endif>> <</widget>> <<widget "timeleft">> <div class="inactive small tip dslct"> <<if $timeLeft > 0>> <<if $database.length == 0>> Hi! Click on NEW ACTIVITY above to get started. <<else>> <<if $mode == "Table %" || $mode == "List %">> You have logged <<print (($timePeriod - $timeLeft)/24*100).toFixed(1)>> percents of your time today. <<else>> You have logged <<print ($timePeriod - $timeLeft).toFixed(2)>> hours of your time today. <<endif>> <<endif>> <<elseif $database.length > 0>> Yay, that's all for today! I hope you didn't actually work for 24 hours in a row. <<endif>> </div> <</widget>> <<widget "datecheck">> <<for _i = 0; _i < $database.length; _i++>> <<if $dateNum > $database[_i][4] && $database[_i][9] != 1>> /* if current date > previous date */ <<set $timeLeft = $timePeriod>> <<set $database[_i][9] = 1>> <<goto "Update">> <<break>> <<else>> <<break>> <<endif>> <</for>> <</widget>> <<widget "title">> <div class="title"> <span>$title</span> </div> <</widget>> <<widget "tagline">> <div class="tagline smaller"> <span>$description</span> </div> <</widget>> <<widget "debug">> <div class="debug inactive smaller"> \\\\\\\\\\ DEBUG MODE<br> ID: <<print $id>> / Date: <<print $dateNum>><br> Projects: <<print $projectsList>> / Domains: <<print $domainsList>><br> <<for _i = 0; _i < $database.length; _i++>> Database row <<print _i>>: <<print $database[_i]>><br> <</for>> [[Reset projects list|Update][$projectsList = []]] / [[Reset domains list|Update][$domainsList = []]]<br> <<click "Reset everything">><<script>>Save.clear(); Engine.restart();<</script>><</click>> / [[Reset time left|Update][$timeLeft = $timePeriod]] (<<print $timeLeft>>) </div> <</widget>>