-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhr-tree.html
94 lines (83 loc) · 2.99 KB
/
hr-tree.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
<!DOCTYPE html>
<html lang="en" id="html" class="dark-mode console-hide">
<head>
<meta charset="UTF-8">
<title>Plus Aire - HR Tree</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<script src="hr-data-masked.js"></script>
<script src="hr-script.js"></script>
<script src="autocomplete.js"></script>
<script src="console.js"></script>
</head>
<body>
<header id="header-block" class="region flex">
<div id="logo" class="logo"></div>
<!-- make sure the form has browser autocomplete off -->
<form autocomplete="off" action="hr-tree.html" class="autocomplete-form flex">
<div class="autocomplete">
<input id="myInput"
class="autocomplete-input"
type="text"
name="person"
placeholder="Start typing any part of a name"
onchange="showOptions()"
onclick="clearOverlays()">
</div>
<input type="submit" value="" class="autocomplete-button">
</form>
<div class="app-items flex">
<div class="app-item-icon mode-toggle">
<small class="tooltip">Dark mode enabled, light mode TBD</small>
</div>
<div class="app-item-icon help-icon">
<small class="tooltip">For project info, open the developer JavaScript console</small>
</div>
</div>
</header>
<div class="body-content-wrapper">
<div id="cold-start" class="cold-start block hide">
<div class="message">
<div class="point-up bounce"></div>
<p>To get started, start typing a name in search box</p>
<hr>
<h1>Plus Aire HR Tree</h1>
<p><a href="hr-tree.html?p=fee010015"
class="button">Start at the CEO</a></p>
<!-- p class="code">> Open developer console for project details</p -->
</div>
</div>
<div id="managers-block" class="block hide">
<div id="managers-container" class="managers-grid flex"></div>
<div class="edge"></div>
</div>
<div id="employee-container"></div>
<div id="reports-block" class="block hide">
<div class="edge"></div>
<div id="reports-container" class="flex">
</div>
</div>
</div>
<div id="modal-curtain" class="modal-curtain"></div>
<div id="console" class="console">
<div id="console-title" class="console-title">
<div id="console-close" class="console-close"></div>
</div>
<div id="console-body" class="console-body"></div>
</div>
</body>
<script>
// initialize and render page
Page.init(org.employees);
// hydrate autocomplete
autocomplete( getElId( "myInput" ), EMPLOYEES );
// instrument autocomplete
const showOptions = () => {
var inp = getElId("myInput")
autocomplete(inp, EMPLOYEES)
}
const clearOverlays = () => {
getElId("html").classList.add("console-hide");
}
</script>
</html>