troggle-unchained/templates/cave.html
2018-04-17 22:19:20 +01:00

578 lines
12 KiB
HTML

{% extends "cavebase.html" %}
{% block extraheaders %}
{% if cave.survex_file %}
<style>
div.cv-panel {
position: absolute;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(50,50,50,0.5);
color: yellowgreen;
border: 1px solid black;
border-radius: 5px;
}
div.cv-compass, div.cv-ahi {
position: absolute;
bottom: 95px;
right: 5px;
margin: 0;
padding-top: 2px;
/* border: 1px solid white; */
text-align: center;
width: 78px;
height: 19px;
z-index: 50;
background-color: rgba(50,50,50,0.5);
background-color: black;
color: white;
}
div.cv-ahi {
right: 95px;
}
div.scale-legend {
position: absolute;
color: white;
background-color: black;
bottom: 30px;
}
div.linear-scale {
position: absolute;
color: white;
background-color: black;
right: 30px;
width: 40px;
padding: 2px 0;
text-align: right;
border: 1px solid black;
font-size: 14px;
}
div.linear-scale-caption {
position: absolute;
color: white;
background-color: black;
right: 5px;
width: 65px;
padding: 2px 0 5px 0;
text-align: left;
border: 1px solid black;
font-size: 14px;
}
#min-div {
border-bottom: 1px solid white;
}
#max-div {
border-top: 1px solid white;
}
#angle-legend {
position: absolute;
width: 80px;
right: 5px;
bottom: 180px;
color: white;
background-color: black;
font-size: 14px;
text-align: center;
}
#scene {
width: 100%;
height: 700px;
position: relative;
}
#progress-bar {
position: absolute;
top: 55%;
height: 20px;
border: 1px solid white;
z-index: 100;
}
#status-text {
position: absolute;
top: 50%;
height: 20px;
padding-left: 4px;
background-color: black;
color: white;
z-index: 100;
}
#frame div.page ul {
list-style-type: none;
margin: 8px 0 0 0;
padding: 0;
width: 200px;
height: 100%;
cursor: default;
font-size: 12px;
overflow-y: auto;
overflow-x: hidden;
}
#frame div.page li {
position: relative;
margin-left: 16px;
border-bottom: 1px solid #444444;
}
#frame div.page li.selected {
color: #1ab4e5;
}
#frame div.page li:hover {
color: yellow;
}
#frame div.page div#ui-path {
font-size: 12px;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
margin-top: 8px;
padding: 2px 0 2px 12px;
}
#frame div.page div#ui-path span {
color: #1ab4e5;
}
#frame div.page div.slide {
position: absolute;
top: 64px;
left: 0px;
height: auto;
margin-top:0;
bottom: 44px;
background-color: #222222;
transition: transform 0.25s ease-in;
}
#frame div.slide-out {
border-right: 1px grey solid;
transform: translateX(-100%);
}
#frame div.page div.descend-tree {
position: absolute;
top: 0px;
right: 0px;
margin: 0;
color: #1ab4e5;
z-index: 110;
}
#frame {
position: absolute;
top: 0px;
left: 0px;
width: 240px;
height: 100%;
background-color: transparent;
transform: translateX(-200px);
transition: transform 0.25s ease-in;
}
#frame.onscreen {
transform: none;
transition: transform 0.25s ease-out;
}
#frame a.download {
border: 1px solid green;
display: block;
width: 180px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 4px;
margin-left: 8px;
border: none;
border-bottom: 4px solid #1ab4e5;
color: #dddddd;
background-color: black;
padding-bottom: 4px;
box-shadow: 1px 1px 8px 0px #888888;
outline: nonlass="cavedisplay"e;
text-decoration: none;
text-align: center;
}
#frame a.download:hover {
color: white;
}
#frame a.download:active {
color: #dddddd;
border-bottom: 4px solid #0c536a;
box-shadow: none;
box-shadow: inset 1px 1px 8px 0px #888888;
}
#frame .tab {
position: absolute;
right: 0px;lass="cavedisplay"
width: 40px;
height: 40px;
box-sizing: border-box;
background-color: #444444;
border-left: 1px solid black;
background-position: center;
border-top: 1px solid black;
}
#frame #close {
position: absolute;
right: 40px;
bottom: 0px;
width: 40px;
height: 40px;
box-sizing: border-box;
z-index: 150;
background-image: url(../images/ic_remove.png);
background-position: center;
}
#icon_settings {
background-image: url(../images/ic_settings.png);
}
#icon_terrain {
background-image: url(../images/ic_terrain.png);
}
#icon_explore {
background-image: url(../images/ic_explore.png);
}
#icon_info {
background-image: url(../images/ic_info.png);
}
#icon_route {
background-image: url(../images/ic_route.png);
}
#icon_help {
background-image: url(../images/ic_help.png);
}
#frame div.toptab {
background-color: #222222;
border-left: none;
border-right: 1px solid grey;
border-top: 1px solid grey;
}
#frame div.page {
position: absolute;
top: 0px;
bottom: 40px;
left: 0px;
width: 200px;
height: 100%;
color: white;
background-color: #222222;
padding: 0 4px;
box-sizing: border-box;
cursor: default;
padding-bottom: 40px;
}
#frame div.page div.header {
margin: 16px 0px 8px 0px;
font-weight: bold;
height: 16px;
box-sizing: border-box;
padding-left: 2px;
}
#frame div.page div.control {
margin: 2px 0 2px 0;
padding-top: 2px;
}
#frame div.page label {
display: block;
border-top: 1px solid grey;
padding: 2px 0 2px 8px;
font-size: 12px;
}
#frame div.page select {
display: block;
width: 180px;
box-sizing: border-box;
padding-top: 2px;
margin: 2px 0 4px 8px;
}
#frame div.page select:empty {
background-color: #888888;
}
#frame div.page button {
display: block;
width: 180px;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 8px;
border: none;
border-bottom: 4px solid #1ab4e5;
color: #dddddd;
background-color: black;
padding-bottom: 4px;
box-shadow: 1px 1px 8px 0px #888888;
outline: none;
}
#frame div.page button:hover {
color: white;
}
#frame div.page button:active {
color: #dddddd;
border-bottom: 4px solid #0c536a;
box-shadow: none;
box-shadow: inset 1px 1px 8px 0px #888888;
}
#frame div.page input[type="text"] {
display: block;
width: 180px;
box-sizing: border-box;
margin-top: 2px;
margin-left: 8px;
}
#frame div.page input[type="checkbox"] {
position: absolute;
right: 0px;
}
#frame div.page input[type="range"] {
display: block;
width: 180px;
margin-left: 8px;
}
#frame dt, #frame dd {
font-size: 12px;
}
#frame dt {
clear: both;
float: left;
padding-left: 16px;
}
#frame dd {
margin-left: 40px;
}
#frame p {
font-size: 12px;
line-height: 18px;
}
div.station-info {
position: absolute;
border: 1px solid white;
background-color: #222222;
color: white;
padding: 4px;
z-index: 200;
}
.overlay-branding {
color: white;
margin: 4px;
position: absolute;
right: 0;
top: 0;
}
div#scene {
width: 100%;
height: 90%; }
</style>
<script type="text/javascript" src="/CaveView/js/CaveView.js" ></script>
<script type="text/javascript" src="/CaveView/lib/proj4.js" ></script>
<script type="text/javascript" >
function onLoad () {
// display the user interface - and a blank canvas
// the configuration object specifies the location of CaveView, surveys and terrain files
CV.UI.init( 'scene', {
home: '/javascript/CaveView/',
surveyDirectory: '/cave/3d/',
terrainDirectory: '/loser/surface/terrain/'
} );
// load a single survey to display
CV.UI.loadCave( '{% if cave.kataster_number %}{{ cave.kataster_number }}{% else %}{{ cave.unofficial_number }}{% endif %}.3d' );
}
window.onload = onLoad;
</script>
{% endif %}
{% endblock %}
{% load wiki_markup %}
{% block content %}
{% block contentheader %}
<table id="cavepage">
<tr>
<th id="kat_no">
{% if cave.kataster_number %}
{{ cave.kataster_number|safe }}
{% if cave.entrancelist %}
- {{ cave.entrancelist|safe }}
{% endif %}
{% if cave.unofficial_number %}
<br />({{ cave.unofficial_number|safe }})
{% endif %}
{% endif %}
</th>
<th id="name">
{{ cave.official_name|safe }}
</th>
<th id="status">
{{ cave.kataster_code|safe }}
</th>
</tr>
</table>
{% block related %}
{% endblock %}{% endblock %}
<div id="entrances">
<p>{% if cave.entrances %}
<h2>Entrances</h2>
<ul>
{% for ent in cave.entrances %}
<li>
{{ ent.entrance_letter|safe }}
{% if ent.entrance.name %}
{{ ent.entrance.name|safe }}
{% endif %}<a href="{% url "editentrance" cave.slug ent.entrance.slug %}">Edit</a>
<dl>
{% if ent.entrance.marking %}
<dt>Marking</dt><dd>{{ ent.entrance.marking_val|safe }}</dd>
{% endif %}
{% if ent.entrance.marking_comment %}
<dt>Marking Comment</dt><dd>{{ ent.entrance.marking_comment|safe }}</dd>
{% endif %}
{% if ent.entrance.findability %}
<dt>Findability</dt><dd>{{ ent.entrance.findability_val|safe }}</dd>
{% endif %}
{% if ent.entrance.findability_comment %}
<dt>Findability Comment</dt><dd>{{ ent.entrance.findability_comment|safe }}</dd>
{% endif %}
{% if ent.entrance.location_description %}
<dt>Location</dt><dd>{{ ent.entrance.location_description|safe }}</dd>
{% endif %}
{% if ent.entrance.approach %}
<dt>Approach</dt><dd>{{ ent.entrance.approach|safe }}</dd>
{% endif %}
{% if ent.entrance.map_description %}
<dt>Map</dt><dd>{{ ent.entrance.map_description|safe }}</dd>
{% endif %}
{% if ent.entrance.underground_description %}
<dt>Underground</dt><dd>{{ ent.entrance.underground_description|safe }}</dd>
{% endif %}
{% if ent.entrance.photo %}
<dt>Photo</dt><dd>{{ ent.entrance.photo|safe }}</dd>
{% endif %}
{% if ent.entrance.entrance_description %}
<dt>Description</dt><dd>{{ ent.entrance.entrance_description|safe }}</dd>
{% endif %}
{% if ent.entrance.explorers %}
<dt>Explorers</dt><dd>{{ ent.entrance.explorers|safe }}</dd>
{% endif %}
{% if ent.entrance.northing %}
<dt>Location</dt><dd>{{ ent.entrance.northing|safe }}, {{ ent.entrance.easting|safe }}, {{ ent.entrance.alt|safe }}m</dd>
{% endif %}
{% if ent.entrance.tag_station %}
<dt>Tag Location</dt><dd>{{ ent.entrance.tag_station }} {{ ent.entrance.tag.y|safe }}, {{ ent.entrance.tag.x|safe }}, {{ ent.entrance.tag.z|safe }}m</dd>
{% endif %}
{% if ent.entrance.bearings %}
<dt>Bearings</dt><dd>{{ ent.entrance.bearings|safe }}</dd>
{% endif %}
{% if ent.entrance.exact_station %}
<dt>Exact Station</dt><dd>{{ ent.entrance.exact_station|safe }} {{ ent.entrance.exact_location.y|safe }}, {{ ent.entrance.exact_location.x|safe }}, {{ ent.entrance.exact_location.z|safe }}m</dd>
{% endif %}
{% if ent.entrance.other_station %}
<dt>Other Station</dt><dd>{{ ent.entrance.other_station|safe }}
{% if ent.entrance.other_description %}
- {{ ent.entrance.other_description|safe }}
{% endif %} {{ ent.entrance.other_location.y|safe }}, {{ ent.entrance.other_location.x|safe }}, {{ ent.entrance.other_location.z|safe }}m
</dd>
{% endif %}
</dl>
</li>
{% endfor %}
</ul>
{% endif %}</p>
<a href="{% url "newentrance" cave.slug %}">New Entrance</a>
</div>
<div id="Description">
<p>{% if cave.explorers %}
<h2>Explorers</h2>
{{ cave.explorers|safe }}
{% endif %}
{% if cave.underground_description %}
<h2>Underground Description</h2>
{{ cave.underground_description|safe }}
{% endif %}
{% if cave.equipment %}
<h2>Equipment</h2>
{{ cave.equipment|safe }}
{% endif %}
{% if cave.references %}
<h2>References</h2>
{{ cave.references|safe }}
{% endif %}
{% if cave.survey %}
<h2>Survey</h2>
{{ cave.survey|safe }}
{% endif %}
{% if cave.kataster_status %}
<h2>Kataster_status</h2>
{{ cave.kataster_status|safe }}
{% endif %}
{% if cave.underground_centre_line %}
<h2>Underground Centre Line</h2>
{{ cave.underground_centre_line|safe }}
{% endif %}
{% if cave.survex_file %}
<h2>Survex File</h2>
{{ cave.survex_file|safe }} <a href="{% if cave.kataster_number %}{% url cave3d cave.kataster_number %}{% else %}{% url cave3d cave.unofficial_number %}{% endif %}">3d file</a>
<div id='scene'></div>
{% endif %}
{% if cave.notes %}
<h2>Notes</h2>
{{ cave.notes|safe }}
{% endif %}</p>
</div>
{% endblock content %}