templates/individualModuleInfo.html
$def with (moduleInfo, allAySems, allFutureAysems, isFutureAY, aySem, mountingStatus, quota, numStudents, isStarred, focus_areas, focus_area_acronyms, student_year_counts, focus_area_counts)
$ moduleCode = moduleInfo[0]
$ moduleName = moduleInfo[1]
$ moduleDescription = moduleInfo[2]
$ moduleMC = moduleInfo[3]
$ overviewURL = '/viewModule'
$ title_string = 'Module Info for ' + moduleCode + ' in ' + aySem
$var title:$title_string
$ home = ['/', 'Home']
$ moduleInfo = ['/modules', 'Module Information']
$ viewModule = ['/viewModule?code=' + moduleCode, moduleCode]
$ individualModuleInfo = ['#', 'Module Info for ' + aySem]
$var hierarchy = [home, moduleInfo, viewModule, individualModuleInfo]
<script type="text/javascript">
var year_of_study_bar_values = [];
$for i in range(len(student_year_counts)):
year_of_study_bar_values.push({y: $student_year_counts[i], label: "Year "+"$(i+1)"});
var year_of_study_pie_values = [];
$for i in range(len(student_year_counts)):
year_of_study_pie_values.push({y: $student_year_counts[i], name: "Year "+"$(i+1)"});
var focus_area_bar_values = [];
$for area in focus_area_acronyms:
focus_area_bar_values.push({y: $int(focus_area_counts[area]), label: "$area"});
var focus_area_pie_values = [];
$for area in focus_area_acronyms:
focus_area_pie_values.push({y: $int(focus_area_counts[area]), name: "$area"});
</script>
<script type="text/javascript" src="static/javascripts/individualModuleInfo.js"></script>
<div class="container container-block">
<div class="row">
<div class="col-md-12">
<div class="row">
<h1 class="text-center"><b>Module Info for <u>$aySem</u></b></h1>
<hr>
</div>
<div class="row">
<div class="col-md-12 module-header">
<div class="page-header">
<h1>
<b>$moduleCode</b>
$if isStarred:
<a href="/starModule?code=$moduleCode&action=unstar&return_path=/individualModuleInfo&aysem=$aySem" class="star">
<span class="glyphicon glyphicon-star"></span>
</a>
$else:
<a href="/starModule?code=$moduleCode&action=star&return_path=/individualModuleInfo&aysem=$aySem" class="star">
<span class="glyphicon glyphicon-star-empty"></span>
</a>
</h1>
<h3>$moduleName ($moduleMC MCs)</h3>
<br>
<div class="btn-group">
<!--module button links-->
<button type="button" class="btn btn-primary btn-lg dropdown-toggle dropdown-btn-custom-main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More Actions <span class="caret"></span></button>
<div class="dropdown-menu">
<div class="dropdown-item text-center">
<form id="edit-module-button" name="edit-module-button" action="/editModule" method="get" class="no-padding-margin">
<input type="hidden" name="code" value="$moduleCode">
<input class="dropdown-btn-custom" type="submit" value="Edit General Module Info" data-toggle="tooltip" data-placement="right" title="Edit the module's name, description, MC, pre-requisites and preclusions">
</form>
</div>
<div class="dropdown-item text-center">
<form id="edit-mounting-button" name="edit-mounting-button" action="/editMounting" method="get" class="no-padding-margin">
<input type="hidden" name="code" value="$moduleCode">
<button type="button" id="edit-specific-info" class="dropdown-btn-custom no-padding-margin" data-toggle="tooltip" data-placement="right" title="Edit the module's mounting and quota">Edit Specific Module Info</button>
</form>
</div>
<div role="separator" class="dropdown-divider"></div>
<div class="dropdown-item text-center">
<form id="view-students-planning-to-take-module" name="view-students-planning-to-take-module" action="/studentsAffectedByModule" method="get" class="no-padding-margin">
<input type="hidden" name="code" value="$moduleCode">
<input type="hidden" name="aysem" value="$aySem">
<button type="button" class="dropdown-btn-custom" data-toggle="tooltip" data-placement="right" title="Show list of students who have taken, are currently taking, or are planning to take this module">View Students Taking This Module</button>
</form>
</div>
<div class="dropdown-item text-center">
<form id="view-overlapping-with-module" name="view-overlapping-with-module" action="/overlappingWithModule" method="get" class="no-padding-margin">
<input type="hidden" name="code" value="$moduleCode">
<input type="hidden" name="aysem" value="$aySem">
<button type="button" class="dropdown-btn-custom" data-toggle="tooltip" data-placement="right" title="Show modules that are also taken with this module">View Modules Overlapping With This Module</button>
</form>
</div>
</div>
</div>
<form id="view-module-button" action="/viewModule" method="get" class="inline">
<input type="hidden" name="code" value="$moduleCode">
<input class="btn btn-lg btn-primary" type="submit" value="Back to Overview">
</form>
</div>
</div>
<div id="myModal" class="modal">
<div id="edit-specific-info-modal" class="modal-content text-center">
<span class="closeModal" onclick="closeModal();">×</span>
<h2>Edit Specific Info</h2>
<form id="edit-specific-info-modal-form" class="form-inline aysem-dropdown" action="/editMounting" method="get">
<p>Please select the AY-Semester that you wish to edit:<br>
<i style="font-size:12px;">(Note: Only semesters in Future AYs can be edited)</i></p>
<br>
<input class="form-inline form-control" type="hidden" name="code" value="$moduleCode">
<select class="form-inline form-control" name="aysem">
$if isFutureAY:
<option value="" disabled>Choose an AY-Semester</option>
$for aysem in allFutureAysems:
$if aySem == aysem:
<option value="$aysem" selected>$aysem</option>
$else:
<option value="$aysem">$aysem</option>
$else:
<option value="" disabled selected>Choose an AY-Semester</option>
$for aysem in allFutureAysems:
<option value="$aysem">$aysem</option>
</select>
<input class="form-inline form-control" type="submit">
</form>
<br>
<br>
</div>
<div id="overlapping-mods-modal" class="modal-content text-center">
<span class="closeModal" onclick="closeModal();">×</span>
<h2>View Overlapping Modules</h2>
<form id="overlapping-mods-modal-form" class="form-inline aysem-dropdown" action="/overlappingWithModule" method="get">
<p>Please select the AY-Semester(s) that you wish to view:</p>
<br>
<input class="form-inline form-control" type="hidden" name="code" value="$moduleCode">
<select class="form-inline form-control" name="aysem">
<option value="" selected>All Semesters</option>
$for aysem in allAySems:
$if aySem == aysem:
<option value="$aysem" selected>$aysem</option>
$else:
<option value="$aysem">$aysem</option>
</select>
<input class="form-inline form-control" type="submit">
</form>
<br>
<br>
<br>
<br>
</div>
<div id="students-taking-modal" class="modal-content text-center">
<span class="closeModal" onclick="closeModal();">×</span>
<h2>View Students Taking This Module</h2>
<form id="students-taking-modal-form" class="form-inline aysem-dropdown" action="/studentsAffectedByModule" method="get">
<p>Please select the AY-Semester that you wish to view:</p>
<br>
<input class="form-inline form-control" type="hidden" name="code" value="$moduleCode">
<select class="form-inline form-control" name="aysem">
<option value="" selected disabled>Choose an AY-Semester</option>
$for aysem in allAySems:
$if aySem == aysem:
<option value="$aysem" selected>$aysem</option>
$else:
<option value="$aysem">$aysem</option>
</select>
<input class="form-inline form-control" type="submit">
</form>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-md-12">
<h4>
<b>Mounting Status: </b>
$if mountingStatus == 1:
<span class="glyphicon glyphicon-ok" data-toggle="tooltip" data-placement="bottom" title="Mounted"></span>
(Mounted)
$elif mountingStatus == 0:
<span class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="bottom" title="Unmounted"></span>
(Unmounted)
$if mountingStatus == -1:
<span class="glyphicon glyphicon-minus" data-toggle="tooltip" data-placement="bottom" title="Not Mounted"></span>
(Not Mounted)
</h4>
<br>
<h4><b>Class Quota: </b>
$if quota is None:
?
$else:
$quota
</h4>
<br>
<h4><b>Number of Students Taking: </b>
$numStudents
$if ((quota is None and numStudents > 0) or (quota is not None and numStudents > quota)):
<span class="glyphicon glyphicon-info-sign oversub-warning" data-toggle="tooltip" data-placement="bottom" data-html="true"
title="Oversubscribed!<br>(Demand > Supply)"></span>
$elif (quota == '-' and numStudents > 0):
<span class="glyphicon glyphicon-info-sign unmounted-warning" data-toggle="tooltip" data-placement="bottom" data-html="true"
title="Oversubscribed!<br>(Unmounted but still has demand)"></span>
</h4>
<hr>
</div>
<div class="col-md-12">
<h4><b>Module Description:</b></h4>
<p>
$moduleDescription
</p>
<br>
<br>
</div>
</div>
</div>
<!--module statistics, in other view-->
<div class="col-md-12">
<div class="page-header text-center">
<h2>Module Statistics</h2>
</div>
<div class="row" id="module-view-student-year-header">
<h3 class="text-center"><b>Student Enrollment by Year of Study</b></h3>
</div>
<div class="row module-view-chart-button-container">
<button class="btn btn-primary module-view-chart-button" id="module-view-student-year-pie-chart-button" onclick="showStudentYearPieChart();">
Pie Chart</button>
<button class="btn btn-primary module-view-chart-button active" id="module-view-student-year-bar-chart-button" onclick="showStudentYearBarChart();">Bar Chart</button>
</div>
<div class="row" id="module-view-student-year-bar-chart"></div>
<div class="row" id="module-view-student-year-pie-chart"></div>
<hr>
<div class="row" id="module-view-focus-area-header">
<h3 class="text-center"><b>Student Enrollment by Focus Area</b></h3>
</div>
<div class="row module-view-chart-button-container">
<button class="btn btn-primary" id="focus-area-list-button">List of focus areas</button>
<span id="focus-area-list">
<ul>
$for i in range(len(focus_areas)):
<li>$focus_area_acronyms[i]
($focus_areas[i])</li>
</ul>
</span>
<button class="btn btn-primary module-view-chart-button" id="module-view-focus-area-pie-chart-button" onclick="showFocusAreaPieChart();">
Pie Chart</button>
<button class="btn btn-primary module-view-chart-button active" id="module-view-focus-area-bar-chart-button" onclick="showFocusAreaBarChart();">Bar Chart</button>
</div>
<div class="row" id="module-view-focus-area-bar-chart"></div>
<div class="row" id="module-view-focus-area-pie-chart"></div>
<hr id="module-view-stats-footer">
</div>
</div>
</div>