-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
126 lines (108 loc) · 4.33 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NIWA | SFIA - Position Description Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<h1>SFIA Position Description Generator</h1>
</a>
</div>
</nav>
<div id="pageContent" class="container-fluid">
<div class="row mb-3">
<div class="col-12">
<div class="card">
<div class="card-header h3">
Instructions
</div>
<div class="card-body">
<p>This is the NIWA position description generator tool, based on the <a
href="https://www.sfia-online.org">SFIA 9 Framework</a>.</p>
<p>To start generating a position description, select the levels of the skill sets you need.</p>
<p>You can view a description of any skill by hovering over it, or a description of any available skill
level, by hovering over its respective checkbox. Click on the four-letter skill code to open the
relevant skills page on SFIA's website.</p>
<p>A formatted rendering of your selection will be generated for you at the end of the page, copy and paste
this into a word processor to preserve the formatting.</p>
<p>You also have the option to export your selection to a comma separated value (CSV) formatted document, or
as HTML, which will be automatically downloaded for you. This feature has limitations in some browsers so
we recommend you use an up to date version of chrome or firefox if you wish to use this feature, otherwise
the file might be incorrectly named "Unknown", although the content will be the same.</p>
<p>To save your summary for future use, simply bookmark the page after you have made your selection. The url
bookmark will keep all of the necessary information and will update your selection should you return to it
in future.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mb-3">
<div class="card">
<div class="table-responsive">
<table class="sfia-table">
<thead class="sticky-top">
<tr>
<th class="root_key_th">Category</th>
<th class="sub_key_th">Sub Category</th>
<th class="skill_key_th">Skill Set</th>
<th class="skill_level_th">1</th>
<th class="skill_level_th">2</th>
<th class="skill_level_th">3</th>
<th class="skill_level_th">4</th>
<th class="skill_level_th">5</th>
<th class="skill_level_th">6</th>
<th class="skill_level_th">7</th>
</tr>
</thead>
<tbody id="sfia-content">
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-header h3">
Formatted Output
</div>
<div class="card-body">
<div id="sfia-output"></div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary" role="button" onclick="exportCSV();event.preventDefault();">Export to
CSV</a>
<a href="#" class="btn btn-primary" role="button" onclick="exportHTML();event.preventDefault();">Export to
HTML</a>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">Copyright 2025 NIWA</p>
</div>
</footer>
<script type="text/javascript" src="functions.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-83854921-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>