Files
dougal-software/etc/default/templates/plan.html.njk

246 lines
26 KiB
Plaintext
Raw Permalink Normal View History

<!DOCTYPE html>
<html>
<!-- kate: space-indent on; indent-width 2; -->
<head>
<title>{{projectId}} Lookahead plan</title>
<style>
@media print {
html, table {
font-size: 10px !important;
}
a {
text-decoration: none;
}
}
html {
font-size: 16px;
text-rendering: optimizeLegibility;
background: #FFFFFF;
color: rgba(0, 0, 0, 0.87);
}
body {
max-width: 100vw;
margin: 0;
}
table {
border-collapse: collapse;
}
table th,
table td {
text-align: left;
vertical-align: top;
line-height: 1.5;
}
table > tbody > tr:not(:last-child) > td,
table > tbody > tr:not(:last-child) > th {
border-bottom: thin solid rgba(0, 0, 0, 0.12);
}
header {
display: flex;
align-items: center;
height: 110px;
padding: 8px;
}
header img#logo {
height: 50px;
flex: 0 1 auto;
}
header #title {
flex: 1 1 auto;
}
header h1 {
text-align: center;
margin-bottom: 0.3em;
}
header h4 {
text-align: center;
margin-top: 0;
}
main {
min-height: calc(100vh - 116px );
padding: 8px;
margin-bottom: 25px;
}
section h3 {
margin-top: 3em;
}
table#summary td:nth-of-type(1) {
text-align: right;
padding-inline-start: 1em;
}
table#summary td:nth-of-type(2) {
font-size: smaller;
vertical-align: middle;
text-align: right;
}
#comments {
margin-top: 1em;
margin-bottom: 1em;
}
.comment {
margin: 0.5em 2em;
border: thin solid lightgray;
padding: 1em;
border-radius: 4px;
}
.nocomment {
margin: 0.5em 2em;
color: gray;
font-style: italic;
}
.no-break-inside {
break-inside: avoid;
}
table#lines th,
table#lines td {
padding: 4pt 8pt;
}
table#lines tr > td {
text-align: right;
}
table#lines tr > td:nth-of-type(2) {
text-align: left;
}
table#lines tr > td:nth-of-type(9) {
min-width: 20ex;
text-align: left;
}
#map {
width: 500px;
height: 500px;
/* border: 1px solid gray; */
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
footer {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0.5em;
width: 100%;
font-size: smaller;
border-top: thin solid;
min-height: 25px;
position: fixed;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<header>
<img id="logo" src="data:image/png;base64,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
<div id="title">
<h1>{{projectId |upper}} Lookahead</h1>
{% if lines.length %}
<h4>From {{ lines |get("ts0") |sort |first |timestamp("min") }}
2021-06-19 15:43:04 +02:00
until {{ lines |get("ts1") |sort |last |timestamp("min") }}</h4>
{% endif %}
</div>
</header>
<main>
<h2>Havila Charisma</h2>
<section>
<h3>Planned sequences</h3>
{% if lines.length %}
<table id="lines">
<thead>
<tr>
<th>Sequence</th>
<!-- <th>Line name</th> -->
<th>Line</th>
<th>FSP</th>
<th>LSP</th>
<th>Start</th>
<th>End</th>
<th>Length</th>
<th>Azimuth</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
{% for line in lines %}
<tr>
<td>{{ line.sequence }}</td>
<!-- <td>{{ line.name }}</td> -->
<td>{{ line.line }}</td>
<td>{{ line.fsp }}</td>
<td>{{ line.lsp }}</td>
<td>{{ line.ts0 |timestamp("minutes") }}</td>
<td>{{ line.ts1 |timestamp("minutes") }}</td>
<td>{{ (line.length/1000) |round(1) }} km</td>
<td>{{ line.azimuth |round(2) }}°</td>
<td>{{ line.remarks |markdownInline }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<i>(No plan)</i>
{% endif %}
</section>
<section>
<h3>Comments</h3>
<div id="comments">
{% if info.remarks %}
{{ info.remarks |markdown }}
{% else %}
<i>(nil)</i>
{% endif %}
</div>
</section>
<section class="no-break-inside">
<h3>Situation map</h3>
<div id="map"><img src="{{map}}"/></div>
</section>
</main>
<footer>
<span>
✉ <a href="mailto:hc.om@magseisfairfield.com">hc.om@magseisfairfield.com</a>
📱 <a href="tel:+4790255868">+47 902 55 868</a>
</span>
<span>Created on {{ "now" |timestamp}}.</span>
</footer>
</body>
</html>