-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (75 loc) · 3.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Excel Proof of Concept</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section name="InfoSection">
<h2>Proof of Concept: Misuga Crew History List Excel Sorter/Filter</h2>
<p>A Proof of Concept web app that reads exported Excel file from BTS Clearview's Crew History List Module.</p>
<p><b>How to use:</b></p>
<p>1. Login to ClearView.</p>
<p>2. Go to Reports > Basic Reports > Crew History List Module.</p>
<p>3. Select Fleet and Rank Filters.</p>
<p>4. Click "Export to Excel". An excel file should be downloaded afterwards.</p>
<p>5. Open the exported excel file on Microsoft Excel.</p>
<p>6. Click "Yes" to open it anyway.</p>
<p>7. Click File > Save As > XLSX file.</p>
<p>8. Open the <a href="https://heisenborgar.github.io/">Misuga-PoC-ExcelSort website.</a></p>
<p>9. Upload exported excel file. Once uploaded, the website will read the excel file.</p>
<p>10. Set the Start/End Date, Employment Status, and Vessel Type filters.</p>
<p>11. Click "Filter" button to show results.</p>
<p>12. Click "Clear Filters" button to reset filters and show the original,unfiltered excel file.</p>
<p><b>Note: Once "Filter" button is clicked, the website will only show results based on the specified filters.</b></p>
<p><b>Note: When Vessel type filter is specified, it will be sorted in descending order denoting their experience - higher means experienced, lower means lesser experience on that vessel type. Also, that column will be highlighted to easily distinguish data from other vessel types and other data.</b></p>
<p><b>Note: Fleet and Rank are not included in this website's filter. Use Clearview's Crew History List Module filters instead.</b></p>
<p><b>Note: Persons with no 1st Employee data specified are still included and sorted from highest to lowest.</b></p>
<hr />
</section>
<section name="InputSection">
<input type="file" id="fileInput" accept=".xlsx, .xls" />
<br />
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" />
<label for="endDate">End Date:</label>
<input type="date" id="endDate" />
<br />
<label for="vesselColumn">Vessel Type (Sorted in Descending order):</label>
<select id="vesselColumn">
<option value="null">All</option>
<option value="8">Misuga - This Rk</option>
<option value="9">Misuga - All Rk</option>
<option value="10">Cape - This Rk</option>
<option value="11">Cape - All Rk</option>
<option value="12">P-Max - This Rk</option>
<option value="13">P-Max - All Rk</option>
<option value="14">Log - This Rk</option>
<option value="15">Log - All Rk</option>
<option value="16">WD Chip - This Rk</option>
<option value="17">WD Chip - All Rk</option>
</select>
<br />
<label for="statusColumn">Employment Status:</label>
<select id="statusColumn">
<option value="null">All</option>
<option value="ON BOARD">On Board</option>
<option value="FOR APPROVAL">For Approval</option>
<option value="LINE-UP">Line Up</option>
<option value="VACATION">Vacation</option>
</select>
<button id="filterButton">Filter</button>
<button id="resetButton">Clear Filters</button>
</section>
<section name="tableSection">
<hr />
<p id="resultInfo" style="font-weight: bold; margin-top: 10px"></p>
<p>C.S ◼ S.S ◆ C.C ▲</p>
<table id="dataTable"></table>
</section>
<script src="javascript.js"></script>
</body>
</html>