Skip to content

Commit 7d4bd40

Browse files
khaefnerkhaefner
authored
Merge pull request #15 from openconnectivityfoundation/ui_changes
Baseline Table Now has selectable filters
2 parents e15b478 + 91c1c8f commit 7d4bd40

File tree

1 file changed

+161
-7
lines changed

1 file changed

+161
-7
lines changed

‎docs/table.html‎

Lines changed: 161 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,135 @@
2121
crossorigin="anonymous"></script>
2222

2323

24-
<title>OCF Security Baseline table</title>
24+
<title>OCF Security Baseline Table</title>
2525
<a href="https://openconnectivity.org/"><img src="OCF_POS_4C.png" alt="OCF Logo" width="300" height="64"
2626
align="right"></a>
2727

28+
<style>
29+
.switch {
30+
position: relative;
31+
display: inline-block;
32+
width: 60px;
33+
height: 34px;
34+
}
35+
36+
.switch input {
37+
opacity: 0;
38+
width: 0;
39+
height: 0;
40+
}
41+
42+
.slider {
43+
position: absolute;
44+
cursor: pointer;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background-color: #ccc;
50+
-webkit-transition: .4s;
51+
transition: .4s;
52+
}
53+
54+
.slider:before {
55+
position: absolute;
56+
content: "";
57+
height: 26px;
58+
width: 26px;
59+
left: 4px;
60+
bottom: 4px;
61+
background-color: white;
62+
-webkit-transition: .4s;
63+
transition: .4s;
64+
}
65+
66+
input:checked + .slider {
67+
background-color: #2196F3;
68+
}
69+
70+
input:focus + .slider {
71+
box-shadow: 0 0 1px #2196F3;
72+
}
73+
74+
input:checked + .slider:before {
75+
-webkit-transform: translateX(26px);
76+
-ms-transform: translateX(26px);
77+
transform: translateX(26px);
78+
}
79+
80+
/* Rounded sliders */
81+
.slider.round {
82+
border-radius: 34px;
83+
}
84+
85+
.slider.round:before {
86+
border-radius: 50%;
87+
}
88+
89+
90+
.custom-select {
91+
position: relative;
92+
font-family: Arial;
93+
}
94+
95+
.custom-select select {
96+
display: none; /*hide original SELECT element: */
97+
}
98+
99+
.select-selected {
100+
background-color: DodgerBlue;
101+
}
102+
103+
/* Style the arrow inside the select element: */
104+
.select-selected:after {
105+
position: absolute;
106+
content: "";
107+
top: 14px;
108+
right: 10px;
109+
width: 0;
110+
height: 0;
111+
border: 6px solid transparent;
112+
border-color: #fff transparent transparent transparent;
113+
}
114+
115+
/* Point the arrow upwards when the select box is open (active): */
116+
.select-selected.select-arrow-active:after {
117+
border-color: transparent transparent #fff transparent;
118+
top: 7px;
119+
}
120+
121+
/* style the items (options), including the selected item: */
122+
.select-items div,.select-selected {
123+
color: #ffffff;
124+
padding: 8px 16px;
125+
border: 1px solid transparent;
126+
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
127+
cursor: pointer;
128+
}
129+
130+
/* Style items (options): */
131+
.select-items {
132+
position: absolute;
133+
background-color: DodgerBlue;
134+
top: 100%;
135+
left: 0;
136+
right: 0;
137+
z-index: 99;
138+
}
139+
140+
/* Hide the items when the select box is closed: */
141+
.select-hide {
142+
display: none;
143+
}
144+
145+
.select-items div:hover, .same-as-selected {
146+
background-color: rgba(0, 0, 0, 0.1);
147+
148+
</style>
149+
150+
151+
152+
28153
</head>
29154

30155
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
@@ -49,13 +174,29 @@ <h1>OCF Security Baseline table </h1>
49174
<a class="nav-link active" href="table.html">Baseline Table</a>
50175
</li>
51176
</ul>
177+
<label for="baselines">Choose a baseline:</label>
178+
<!---eventually need to make this dynamic-->
179+
<select class='custom-select' name="baselines" id="baselines" onChange="filter_table()" style="width:200px">
180+
<option value="">---</option>
181+
<option value="NIST">NIST</option>
182+
<option value="CTAC2">CTAC2</option>
183+
<option value="ENISA">ENISA</option>
184+
<option value="ETSI">ETSI</option>
185+
<option value="UK">UK</option>
186+
</select>
187+
Unmatched Requirements:
188+
<label class="switch">
189+
<input type="checkbox" name="unmatched" id="unmatched" onChange="filter_table()">
190+
<span class="slider round"></span>
191+
</label>
192+
52193

53194

54195
<table border="1" id="example" class="display" width="100%" cellspacing="0" data-page-length='20'
55196
style="border-color:#D5D8DC">
56197
<thead>
57198
<tr>
58-
<th>Baseline Organization </th>
199+
<th>Baseline Organization</th>
59200
<th>Baseline Name</th>
60201
<th>Baseline Category</th>
61202
<th>Baseline Sub-Category</th>
@@ -67,7 +208,9 @@ <h1>OCF Security Baseline table </h1>
67208
</table>
68209

69210
<script>
70-
$('#example').DataTable({
211+
212+
213+
table = $('#example').DataTable({
71214
"ajax": {
72215
"url": "https://raw.githubusercontent.com/openconnectivityfoundation/OCF-Security-Baseline-Mapping/master/baseline-data.json",
73216
"dataSrc": function (json) {
@@ -133,9 +276,6 @@ <h1>OCF Security Baseline table </h1>
133276
my_Notes += json.baseLines[i].baselineCategories[j].subCategories[k].ocfMatches[l].ocfMatchNotes
134277
}
135278
}
136-
if (my_Clause == "12") {
137-
console.log(l + " " + my_baselineOrg + ":" + my_subcategoryName + " " + my_Clause)
138-
}
139279
var row_data = [my_baselineName, my_baselineOrg, my_categoryName, my_subcategoryName, my_specName, my_Clause, my_Notes]
140280
// return_data.push(row_data)
141281
return_data.push({
@@ -170,5 +310,19 @@ <h1>OCF Security Baseline table </h1>
170310
'rowsGroup': [0, 1, 2, 3, 4] //group like columns
171311

172312
})
313+
314+
function filter_table(){
315+
var x = document.getElementById('baselines')
316+
my_filter = x.value
317+
var um = document.getElementById('unmatched').checked
318+
if (um){
319+
table.columns(0).search(my_filter).draw();
320+
table.columns(5).search('None').draw();
321+
}
322+
else{
323+
table.columns(0).search(my_filter).draw();
324+
table.columns(5).search('').draw();
325+
}
326+
}
173327
</script>
174-
</div>
328+
</div>

0 commit comments

Comments
 (0)