diff options
Diffstat (limited to 'engagements/templates/engagements/ep_org.html')
-rw-r--r-- | engagements/templates/engagements/ep_org.html | 427 |
1 files changed, 427 insertions, 0 deletions
diff --git a/engagements/templates/engagements/ep_org.html b/engagements/templates/engagements/ep_org.html new file mode 100644 index 0000000..202100a --- /dev/null +++ b/engagements/templates/engagements/ep_org.html @@ -0,0 +1,427 @@ +{% extends "core/base.html" %} + +{% block title %}Create new engagement{% endblock title %} + +{% load table_extras %} + +{% load static %} + +{% block content %} + +<div class="w3-container"> + <h2>Engagement Plans for {{ entity.name }}</h2> + <a href="{% url 'engagements:create' entity.slug 'reg' %}">Add New Regulatory Engagement</a> | <a href="{% url 'engagements:create' entity.slug %}">Add New Engagement</a> +</div> + +<div class="w3-container"> + <h3>2023</h3> + <table class="ep-table"> + <thead> + <tr> + <th>Start Date</th> + <th>End Date</th> + <th>Engagement</th> + <th>Engagement Type</th> + <th>Area/Theme</th> + <th>Inspectors Involved</th> + <th>DSCs</th> + <th>Travel Effort</th> + <th>Planning and Regulation Effort</th> + <th>Completion Status</th> + </tr> + </thead> + <tbody> + {% for e in engagements %} + <tr> + <td>{{ e.proposed_start_date|date:'j M Y' }}</td> + <td>{{ e.proposed_end_date|date:'j M Y' }}</td> + <td><a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a></td> + <td>{{ e.friendly_type }}</td> + <td>Area Theme</td> + <td> + <ul class="w3-ul"> + {% for inspector in e.officers.all %} + <li>{{ inspector }} </li> + {% endfor %} + </ul> + </td> + <td> + <ul class="w3-ul"> + {% for dsc in e.dscs %} + <li><a href="#">{{ dsc.short }}</a></li> + {% endfor %} + </ul> + </td> + <td>TBC</td> + <td>TBC</td> + <td class="ep-table">Incomplete</td> + </tr> + {% endfor %} + </tbody> + </table> + +</div> + +<hr> + +<div class="w3-container"> + <div class="w3-cell-row"> + <div class="w3-container w3-cell"> + <h3>Total DSC coverage</h3> + <table class="summary-table"> + <tr> + <th>DSC</th> + <th>Allocated time</th> + </tr> + {% for dsc in dscs %} + <tr> + <td>{{ dsc }} </td> + <td>{{ dsc | effort_for_org:entity }}</td> + </tr> + {% endfor %} + </table> + </div> + <div class="w3-container w3-cell"> + <h3>Another table of data</h3> + <table class="summary-table"> + <tr> + <th>DSC</th> + <th>Allocated time</th> + </tr> + {% for dsc in dscs %} + <tr> + <td>{{ dsc }} </td> + <td>{{ dsc | effort_for_org:entity }}</td> + </tr> + {% endfor %} + </table> + </div> + + </div> +</div> + +<style type="text/css" media="screen"> + + /* (A) CONTAINER */ + /* https://code-boxx.com/beginner-create-grid-html-css/ */ + #grid-col { + + /* (A1) GRID LAYOUT */ + display: grid; + + /* (A2) SPECIFY COLUMNS */ + grid-template-columns: 75px repeat(31, 40px); + + /* we can also specify exact pixels, percentage, repeat + grid-template-columns: 50px 100px 150px; + grid-template-columns: 25% 50% 25%; + grid-template-columns: 100px 20% auto; + grih-template-columns: repeat(3, auto); */ + } + + /* (B) GRID CELLS */ + div.cell { + background: white; + border: 1px solid lightgray; + padding: 10px; + } + + div.cellred{ + background: red; + border: 1px solid lightgray; + padding: 10px; + } + + div.cellyellow{ + background: yellow; + border: 1px solid lightgray; + padding: 10px; + } + div.cellorange{ + background: orange; + border: 1px solid lightgray; + padding: 10px; + } + /* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */ + /* @media screen and (max-width: 640px) { + #grid-col { grid-template-columns: 100%; } + } + */ +/* </style> +<!-- <div class="w3-container w3-padding-16"> --> +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell"></div><div class="cell">1</div> --> +<!-- <div class="cell">2</div><div class="cell">3</div> --> +<!-- <div class="cell">4</div><div class="cell">5</div> --> +<!-- <div class="cell">6</div><div class="cell">7</div> --> +<!-- <div class="cell">8</div><div class="cell">9</div> --> +<!-- <div class="cell">10</div><div class="cell">11</div> --> +<!-- <div class="cell">12</div><div class="cell">13</div> --> +<!-- <div class="cell">14</div><div class="cell">15</div> --> +<!-- <div class="cell">16</div><div class="cell">17</div> --> +<!-- <div class="cell">18</div><div class="cell">19</div> --> +<!-- <div class="cell">20</div><div class="cell">21</div> --> +<!-- <div class="cell">22</div><div class="cell">23</div> --> +<!-- <div class="cell">24</div><div class="cell">25</div> --> +<!-- <div class="cell">26</div><div class="cell">27</div> --> +<!-- <div class="cell">28</div><div class="cell">29</div> --> +<!-- <div class="cell">30</div><div class="cell">31</div> --> +<!-- </div> --> +<!-- </div> --> +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Jan</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> --> +<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Feb</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> --> +<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Mar</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> --> +<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> --> +<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> --> +<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- <div class="cell">-</div><div class="cell">-</div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Apr</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">May</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Jun</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Jul</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Aug</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Sep</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Oct</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Nov</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + +<!-- <div class="grid"> --> +<!-- <div id="grid-col"> --> +<!-- <div class="cell">Dec</div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- <div class="cell"></div><div class="cell"></div> --> +<!-- </div> --> +<!-- </div> --> + + +<script src="{% static 'js/yoap.js' %}"></script> + +{% endblock content %} |