Skip to content

Commit

Permalink
working checked boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeisenman23
jeisenman23 committed Nov 15, 2024
1 parent 0e6fb94 commit a731595
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 118 deletions.
6 changes: 3 additions & 3 deletions calliope_app/client/templates/carrier_form_multiselect.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@
type="checkbox"
name="essentials[{{ carrier_id }}][]"
value="{{ choice.name }}"
id="carrier{{ forloop.counter0 }}"
id="carrier-{{ carrier_id }}-choice-{{ forloop.counter0 }}"
data-rate="{{ choice.rate }}"
data-quantity="{{ choice.quantity }}"
/>
<label
class="form-check-label dropdown-item"
for="carrier{{ forloop.counter0 }}"
for="carrier-{{ carrier_id }}-choice-{{ forloop.counter0 }}"
>
{{ choice.name }} [{{choice.rate}},{{choice.quantity}}]
{{ choice.name }} [{{ choice.rate }},{{ choice.quantity }}]
</label>
</div>
</li>
Expand Down
330 changes: 215 additions & 115 deletions calliope_app/client/templates/scenario_configuration.html
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,217 @@
{% load i18n %}
{% load return_item %}
{% load i18n %} {% load return_item %}
<!DOCTYPE html>
<html lang="en">
<table id="config_table" class="table table-hover table-sm">
<tbody>
<!-- Configuration Header Row -->
<tr class="tbl-header" style="border-left: solid 20px grey">
<th class="sticky" colspan=2></th>
<th class="sticky text-sm">{% trans "Technologies" %}</th>
<th class="sticky text-sm">{% trans "Version Tag" %}</th>
<th class="sticky text-sm">{% trans "Locations" %}</th>
<th class="sticky text-sm centered"></th>
<th class="sticky text-sm centered"></th>
</tr>
<tr id="filter-row" class="tbl-header" style="border-left: solid 20px grey">
<th class="text-sm"></th>
<th class="text-sm"></th>
<th class="text-sm">
<select class="form-control" id="tech-filter" data-toggle="tooltip" data-placement="left" title="{% trans 'Filter nodes by technology.' %}">
<option selected value="">-</option>
{% for unique in unique_techs %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm">
<select class="form-control" id="tag-filter" data-toggle="tooltip" data-placement="left" title="{% trans 'Filter nodes by version tag.' %}">
<option selected value="">-</option>
{% for unique in unique_tags %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm">
<select class="form-control" id="location-filter" data-toggle="tooltip" data-placement="left" title="{% trans 'Filter nodes by location.' %}">
<option selected value="">-</option>
{% for unique in unique_locations %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm"></th>
<th class="text-sm centered">
<label class="switch">
<input {% if not can_edit %}disabled{% endif %} id="add_loc_techs" type="checkbox">
<span class="slider round" style="border-radius: 11px;" data-toggle="tooltip" data-placement="left" title="{% trans 'Bulk toggle nodes activation for the current scenario.' %}"></span>
</label>
</th>
</tr>
{% for loc_tech in loc_techs %}
<!-- Scenario Loc Tech Row -->
<tr class="node {% if loc_tech.id in active_lt_ids %}table-info{% endif %}" data-loc_tech_id={{ loc_tech.id }} data-tech="{{ loc_tech.technology }}" data-tag="{{ loc_tech.tag }}" data-locations="['{{ loc_tech.location_1 }}'{% if loc_tech.location_2 %},'{{ loc_tech.location_2 }}'{% endif %}]">
<!-- Type -->
{% with colors|return_item:loc_tech.technology_id as color %}
<td class="text-sm centered" style="border-left: solid 20px {% if color %}{{ color }}{% else %}white{% endif %}">
<h6>
{{ loc_tech.icon|safe }}
</h6>
</td>
{% endwith %}
<!-- Carrier -->
<td class="text-sm">
{% if carrier_ins|return_item:loc_tech.technology_id %}
<b>{{ carrier_ins|return_item:loc_tech.technology_id }}</b>
{% else %}
<a href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}"><i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="{% trans 'Input carrier not defined' %}"></i></a>
{% endif %}
{% if carrier_ins|return_item:loc_tech.technology_id != carrier_outs|return_item:loc_tech.technology_id %}
&nbsp;to&nbsp;
{% if carrier_outs|return_item:loc_tech.technology_id %}
<b>{{ carrier_outs|return_item:loc_tech.technology_id }}</b>
{% else %}
<a href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}"><i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="{% trans 'Output carrier not defined' %}"></i></a>
{% endif %}
{% endif %}
</td>
<!-- Technology -->
<td>
<a href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}" style="color:#0021da"><b>{{ loc_tech.technology }}</b></a>
</td>
<!-- Tag -->
<td class="text-sm">
{% if loc_tech.tag %}
<i class="fas fa-tag"></i>
&nbsp;&nbsp;
{{ loc_tech.tag }}
{% endif %}
</td>
<!-- Location -->
<td>
<a href="{% url 'loc_techs' model.uuid %}?tech_id={{ loc_tech.technology_id }}&loc_tech_id={{ loc_tech.id }}" style="color:#0021da">
<i class="fas fa-map-marker-alt"></i>&nbsp;
{{ loc_tech.location_1 }}
{% if loc_tech.location_2 %}
&nbsp;&nbsp;<i class="fas fa-exchange-alt"></i>&nbsp;&nbsp;
<i class="fas fa-map-marker-alt"></i>&nbsp;
{{ loc_tech.location_2 }}
{% endif %}
</a>
</td>
<td>
{% if loc_tech.template_id %}
<div data-toggle="tooltip" data-placement="bottom" data-original-title="This location was created from a Node Group." title="This technology was created from a Node Group." style="max-width: 20px;"><img src="../../../static/images/node_group_icon.svg" alt="Node group icon" style="width: 14px;"></div>
{% endif %}
</td>
<!-- Scenario Loc Tech Edit Buttons -->
<td class="centered">
<label class="switch">
<input {% if not can_edit %}disabled{% endif %} class="add_loc_tech" type="checkbox" {% if loc_tech.id in active_lt_ids %}checked{% endif %}>
<span class="slider round" data-toggle="tooltip" data-placement="left" title="{% trans 'Toggle node activation.' %}"></span>
</label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<table id="config_table" class="table table-hover table-sm">
<tbody>
<!-- Configuration Header Row -->
<tr class="tbl-header" style="border-left: solid 20px grey">
<th class="sticky" colspan="2"></th>
<th class="sticky text-sm">{% trans "Technologies" %}</th>
<th class="sticky text-sm">{% trans "Version Tag" %}</th>
<th class="sticky text-sm">{% trans "Locations" %}</th>
<th class="sticky text-sm centered"></th>
<th class="sticky text-sm centered"></th>
</tr>
<tr
id="filter-row"
class="tbl-header"
style="border-left: solid 20px grey"
>
<th class="text-sm"></th>
<th class="text-sm"></th>
<th class="text-sm">
<select
class="form-control"
id="tech-filter"
data-toggle="tooltip"
data-placement="left"
title="{% trans 'Filter nodes by technology.' %}"
>
<option selected value="">-</option>
{% for unique in unique_techs %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm">
<select
class="form-control"
id="tag-filter"
data-toggle="tooltip"
data-placement="left"
title="{% trans 'Filter nodes by version tag.' %}"
>
<option selected value="">-</option>
{% for unique in unique_tags %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm">
<select
class="form-control"
id="location-filter"
data-toggle="tooltip"
data-placement="left"
title="{% trans 'Filter nodes by location.' %}"
>
<option selected value="">-</option>
{% for unique in unique_locations %}
<option value="{{ unique }}">{{ unique }}</option>
{% endfor %}
</select>
</th>
<th class="text-sm"></th>
<th class="text-sm centered">
<label class="switch">
<input
{%
if
not
can_edit
%}disabled{%
endif
%}
id="add_loc_techs"
type="checkbox"
/>
<span
class="slider round"
style="border-radius: 11px"
data-toggle="tooltip"
data-placement="left"
title="{% trans 'Bulk toggle nodes activation for the current scenario.' %}"
></span>
</label>
</th>
</tr>
{% for loc_tech in loc_techs %}
<!-- Scenario Loc Tech Row -->
<tr
class="node {% if loc_tech.id in active_lt_ids %}table-info{% endif %}"
data-loc_tech_id="{{"
loc_tech.id
}}
data-tech="{{ loc_tech.technology }}"
data-tag="{{ loc_tech.tag }}"
data-locations="['{{ loc_tech.location_1 }}'{% if loc_tech.location_2 %},'{{ loc_tech.location_2 }}'{% endif %}]"
>
<!-- Type -->
{% with colors|return_item:loc_tech.technology_id as color %}
<td
class="text-sm centered"
style="border-left: solid 20px {% if color %}{{ color }}{% else %}white{% endif %}"
>
<h6>{{ loc_tech.icon|safe }}</h6>
</td>
{% endwith %}
<!-- Carrier -->
<td class="text-sm">
{% if carrier_ins|return_item:loc_tech.technology_id %}
<b>{{ carrier_ins|return_item:loc_tech.technology_id }}</b>
{% else %}
<a
href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}"
><i
class="fas fa-exclamation-triangle"
data-toggle="tooltip"
data-placement="right"
title="{% trans 'Input carrier not defined' %}"
></i
></a>
{% endif %} {% if carrier_ins|return_item:loc_tech.technology_id !=
carrier_outs|return_item:loc_tech.technology_id %} &nbsp;to&nbsp; {%
if carrier_outs|return_item:loc_tech.technology_id %}
<b>{{ carrier_outs|return_item:loc_tech.technology_id }}</b>
{% else %}
<a
href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}"
><i
class="fas fa-exclamation-triangle"
data-toggle="tooltip"
data-placement="right"
title="{% trans 'Output carrier not defined' %}"
></i
></a>
{% endif %} {% endif %}
</td>
<!-- Technology -->
<td>
<a
href="{% url 'technologies' model.uuid %}?tech_id={{ loc_tech.technology_id }}"
style="color: #0021da"
><b>{{ loc_tech.technology }}</b></a
>
</td>
<!-- Tag -->
<td class="text-sm">
{% if loc_tech.tag %}
<i class="fas fa-tag"></i>
&nbsp;&nbsp; {{ loc_tech.tag }} {% endif %}
</td>
<!-- Location -->
<td>
<a
href="{% url 'loc_techs' model.uuid %}?tech_id={{ loc_tech.technology_id }}&loc_tech_id={{ loc_tech.id }}"
style="color: #0021da"
>
<i class="fas fa-map-marker-alt"></i>&nbsp; {{ loc_tech.location_1
}} {% if loc_tech.location_2 %} &nbsp;&nbsp;<i
class="fas fa-exchange-alt"
></i
>&nbsp;&nbsp; <i class="fas fa-map-marker-alt"></i>&nbsp; {{
loc_tech.location_2 }} {% endif %}
</a>
</td>
<td>
{% if loc_tech.template_id %}
<div
data-toggle="tooltip"
data-placement="bottom"
data-original-title="This location was created from a Node Group."
title="This technology was created from a Node Group."
style="max-width: 20px"
>
<img
src="../../../static/images/node_group_icon.svg"
alt="Node group icon"
style="width: 14px"
/>
</div>
{% endif %}
</td>
<!-- Scenario Loc Tech Edit Buttons -->
<td class="centered">
<label class="switch">
<input
{%
if
not
can_edit
%}disabled{%
endif
%}
class="add_loc_tech"
type="checkbox"
{%
if
loc_tech.id
in
active_lt_ids
%}checked{%
endif
%}
/>
<span
class="slider round"
data-toggle="tooltip"
data-placement="left"
title="{% trans 'Toggle node activation.' %}"
></span>
</label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</html>

0 comments on commit a731595

Please sign in to comment.