Skip to content

Commit

Permalink
Update target create/update forms for permissions
Browse files Browse the repository at this point in the history 
It doesn't make a lot of sense to display the group form on the target
create/update forms if the target is not private. This commit introduces
a UI using a small amount of javascript that will hide the group form
unless the user sets the target to private.

Because this wasn't possible to implement with the generic form
rendering in use, this commit also updates the target update
and create forms to use a more compact layout instead of
placing every field on a single row, increasing usability.
The fields will still collapse to single rows on
narrow viewports.

Custom target types will default to the generic form rendering as
before.
  • Loading branch information
@Fingel
Fingel committed Feb 13, 2025
1 parent 20f0a21 commit 06aadcd
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 10 deletions.
5 changes: 5 additions & 0 deletions tom_common/static/tom_common/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,8 @@ textarea {
opacity: 1; /* Show the Toast */
visibility: visible; /* Show the Toast */
}

/* Indicates interactivity */
.pointer {
cursor: pointer;
}
101 changes: 101 additions & 0 deletions tom_targets/templates/tom_targets/partials/non_sidereal_target_form.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
{% load bootstrap4 %}
{% bootstrap_field form.type %}
<div class="form-row">
<div class="col">
{% bootstrap_field form.name size="large" show_help=False %}
</div>
</div>
<div class="row" x-data="{open: false}">
<div class="col mb-2">
<span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Aliases' : '▸ Aliases'"></span>
{% bootstrap_formset_errors names_form %}
<div x-show="open" class="border p-3 bg-light" x-transition>
{% bootstrap_formset names_form %}
</div>
</div>
</div>
<div class="row" x-data="{open: false}">
<div class="col mb-2">
<span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Tags' : '▸ Tags'"></span>
{% bootstrap_formset_errors extra_form %}
<div x-show="open" class="border p-3 bg-light" x-transition>
{% bootstrap_formset extra_form %}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.scheme %}
</div>
<div class="col-md-4">
{% bootstrap_field form.mean_anomaly %}
</div>
<div class="col-md-4">
{% bootstrap_field form.arg_of_perihelion %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.lng_asc_node %}
</div>
<div class="col-md-4">
{% bootstrap_field form.inclination %}
</div>
<div class="col-md-4">
{% bootstrap_field form.mean_daily_motion %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.semimajor_axis %}
</div>
<div class="col-md-4">
{% bootstrap_field form.eccentricity %}
</div>
<div class="col-md-4">
{% bootstrap_field form.epoch_of_elements %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.epoch_of_perihelion %}
</div>
<div class="col-md-4">
{% bootstrap_field form.ephemeris_period %}
</div>
<div class="col-md-4">
{% bootstrap_field form.ephemeris_period_err %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.ephemeris_epoch %}
</div>
<div class="col-md-4">
{% bootstrap_field form.ephemeris_epoch_err %}
</div>
<div class="col-md-4">
{% bootstrap_field form.perihdist %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.parallax %}
</div>
</div>
<h4>Permissions</h4>
<div class="row mb-3" x-data="{permission: 'PUBLIC' }">
<div class="col-md-6">
<select x-model="permission" name="permissions" class="form-control" id="id_permissions">
<option value="OPEN">Open</option>
<option value="PUBLIC">Public</option>
<option value="PRIVATE">Private</option>
</select>
</div>
<div class="col-md-6">
<div x-show="permission == 'PRIVATE'" x-transition>
<span>Target will only be visibile to members of these groups:</span>
{% bootstrap_field form.groups show_label=False %}
</div>
</div>
</div>
79 changes: 79 additions & 0 deletions tom_targets/templates/tom_targets/partials/sidereal_target_form.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
{% load bootstrap4 %}
{% bootstrap_field form.type %}
<div class="form-row">
<div class="col">
{% bootstrap_field form.name size="large" show_help=False %}
</div>
</div>
<div class="row" x-data="{open: false}">
<div class="col mb-2">
<span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Aliases' : '▸ Aliases'"></span>
<div x-show="open" class="border p-3 bg-light" x-transition>
{% bootstrap_formset_errors names_form %}
{% bootstrap_formset names_form %}
</div>
</div>
</div>
<div class="row" x-data="{open: false}">
<div class="col mb-2">
<span @click="open = ! open" class="text-primary pointer" x-text="open ? '▾ Tags' : '▸ Tags'"></span>
<div x-show="open" class="border p-3 bg-light" x-transition>
{% bootstrap_formset_errors extra_form %}
{% bootstrap_formset extra_form %}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
{% bootstrap_field form.ra %}
</div>
<div class="col-md-6">
{% bootstrap_field form.dec %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.epoch %}
</div>
<div class="col-md-4">
{% bootstrap_field form.pm_ra %}
</div>
<div class="col-md-4">
{% bootstrap_field form.pm_dec %}
</div>
</div>
<div class="form-row">
<div class="col-md-4">
{% bootstrap_field form.distance %}
</div>
<div class="col-md-4">
{% bootstrap_field form.distance_err %}
</div>
<div class="col-md-4">
{% bootstrap_field form.parallax %}
</div>
</div>
<div class="form-row">
<div class="col-md-6">
{% bootstrap_field form.galactic_lng %}
</div>
<div class="col-md-6">
{% bootstrap_field form.galactic_lat %}
</div>
</div>
<h4>Permissions</h4>
<div class="row mb-3" x-data="{permission: 'PUBLIC' }">
<div class="col-md-6">
<select x-model="permission" name="permissions" class="form-control" id="id_permissions">
<option value="OPEN">Open</option>
<option value="PUBLIC">Public</option>
<option value="PRIVATE">Private</option>
</select>
</div>
<div class="col-md-6">
<div x-show="permission == 'PRIVATE'" x-transition>
<span>Target will only be visibile to members of these groups:</span>
{% bootstrap_field form.groups show_label=False %}
</div>
</div>
</div>
22 changes: 12 additions & 10 deletions tom_targets/templates/tom_targets/target_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@
{% block content %}
{% if not object %}
<h3>Create a Target</h3>
<ul class="nav nav-tabs">
<ul class="nav nav-tabs mb-2">
{% for k, v in type_choices %}
<li class="nav-item">
<a class="nav-link {% if form.type.initial == k %} active {% endif %}" href="{% url 'targets:create' %}?type={{ k }}">{{ v }}</a>
</li>
{% endfor %}
{% else %}
<h3> Update {{ object.name }}</h3>

{% endif %}
</ul>
{% if not object %}
<form method="post" class="form">
{% bootstrap_form_errors form %}
<form method="post" class="form">
{% csrf_token %}
{% if form.type.initial == 'SIDEREAL' %}
{% include 'tom_targets/partials/sidereal_target_form.html' %}
{% elif form.type.initial == 'NON_SIDEREAL' %}
{% include 'tom_targets/partials/non_sidereal_target_form.html' %}
{% else %}
<form method="post" class="form">
{% bootstrap_form form %}
{% endif %}
{% csrf_token %}
{% bootstrap_form form %}
{% bootstrap_formset names_form %}
<h3>Tags</h3>
{% bootstrap_formset extra_form %}
{% buttons %}
{% if not object %}
<button type="submit" formaction="{% url 'targets:create' %}"class="btn btn-primary">Submit</button>
Expand All @@ -35,3 +34,6 @@ <h3>Tags</h3>
{% endbuttons %}
</form>
{% endblock %}
{% block extra_javascript %}
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
{% endblock %}

0 comments on commit 06aadcd

Please sign in to comment.