troggle/templates/new_hole.html

{% extends "cavebase.html" %}

{% block title %}New Cave Creation Form{% endblock %}

{% block extraheaders %}
<style>
    /* Direct match from editcave.html  */
    div > label {
        display: block;
        font-weight: bold;
        margin-top: 5px;
    }

    /* MATCHING FIELD LENGTHS TO DATA SHEET */
  
    div.field-proposed_name input { width: 400px; }
	
    div.field-tag_id input,
	div.field-tag_text input, 
    div.field-discoverers input,
    div.field-surface_wallet input,
    div.field-ug_survey_wallet input,
    div.field-gps_owner input,
    div.field-gps_coords input { width: 300px; }

	div.field-gps_time input,
    div.field-dist_to_ent input,
    div.field-bear_to_ent input { width: 80px; }

	/* SIDE BY SIDE LAYOUT */
    .side-by-side {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
	
    /* CHECKBOX STYLING TO MATCH editcave.html VISUALLY */
    .checkbox-container {
        display: flex;
        flex-direction: row; /* Keep box on the left */
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    /* Override the 'block' display only for labels attached to checkboxes */
    .checkbox-container label {
        display: inline; 
        margin-top: 0;
        font-weight: bold; /* Match editcave.html bolding  */
    }

    .submit-btn {
        font-weight: bold; 
        font-size: 200%; /* Match editcave.html submit size  */
        font-variant-caps: small-caps; 
        margin-left: 40%;
        padding: 10px 20px;
        cursor: pointer;
    }
	
	.input-unit-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .unit-label {
        font-weight: bold;
        font-size: 1.1em;
        color: #555;
    }

    div.field-gps_lat input,
    div.field-gps_long input { 
        width: 140px; 
    }
</style>
{% endblock %}

{% block content %}
<h1>New Cave Datasheet</h1>

<h3>Instructions</h3>
<p>Refer to the handbook <a href="">New Cave Datasheet</a> page for what all these mean and how to fill them in.</p>

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    
    <div class="form-container">
        {% for field in form %}
            
            {# Logic to catch the first coordinate and start a side-by-side div #}
            {% if field.name == "gps_lat" %}
                <div class="side-by-side">
                    <div class="field-{{ field.name }}">
                        {{ field.label_tag }}
                        {{ field }}<span class="unit-label"> N</span>
                        {{ field.errors }}
                    </div>
            {% elif field.name == "gps_long" %}
                    <div class="field-{{ field.name }}">
                        {{ field.label_tag }}
                        {{ field }}<span class="unit-label"> E</span>
                        {{ field.errors }}
                    </div>
                </div> {# Standard Checkbox rendering #}
            {% elif field.field.widget.input_type == "checkbox" %}
                <div class="field-{{ field.name }} checkbox-container">
                    {{ field }}
                    {{ field.label_tag }}
                </div>
                {{ field.errors }}

            {# Standard Field rendering #}
            {% else %}
                <div class="field-{{ field.name }}">
                    {{ field.label_tag }}
                    {{ field }}
                    {{ field.errors }}
                </div>
            {% endif %}
            
        {% endfor %}
    </div>

    <p>
        <input class="submit-btn" type="submit" value="Submit" />
    </p>
</form>

<h3>What this will do:</h3>
<p>
<ul>
<li>Calculate whether this new cave is in area 1623 or 1626
<li>Create a FIXED POINT record by appending to :loser:/fixedpts/gps/auto.svx
<li>Create a new Cave record with associated new Entrance record 
<li>Do a git commit (expoweb) of the new Cave and Entrance description files
<li>Do a git commit (loser) of the new GPS position
<li>Update the database with this new information
<li>Create a new Wallet for this information and this trip
<li>Return you to this form if any important data is missing or invalid
<li>If all is correct, will take you to the (new) Wallet for you to upload the photos
</ul>
</p>
{% endblock %}