-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (129 loc) · 6.43 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Görsel Programlama | Şirket Verileri</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- eCharts CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
<div class="container">
<a class="navbar-brand" href="./index.html">FastAPI & Socket.io</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav ms-5 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/departmanlar.html">Departman Bilgileri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/semtler.html">Semt Bilgileri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/maas.html">Maaş Bilgileri</a>
</li>
<li class="nav-item">
</li>
</ul>
<div class="ms-auto">
<a class="btn btn-outline-danger me-2" href="./pages/enler.html">Şirketinizin Enleri</a>
<a class="btn btn-danger" href="./pages/hesaparaclari.html">Hesaplama Araçları</a>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
<div class="container mt-5">
<div id="liveAlertPlaceholder"></div>
<h1 class="display-5">Çalışanlar Tablosu</h1>
<p class="text-secondary">Butona tıkladığınızda tüm çalışanlarınızın verilerine erişebilirisiniz</p>
<!-- Table -->
<table class="table table-hover mt-4">
<thead>
<tr class="table-danger">
<th scope="col">Çalışan</th>
<th scope="col">Departman</th>
<th scope="col">Yaş</th>
<th scope="col">Semt</th>
<th scope="col">Maaş</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Table Row Template -->
<!-- <tr>
<td>0</td>
<td>Lorem</td>
<td>İpsum</td>
<td>Sit</td>
<td>0</td>
</tr> -->
</tbody>
</table>
<button id="table-load" class="btn btn-outline-danger">Tabloyu Yükle</button>
</div>
<div class="container mt-5">
<div id="eChart-main" class="" style="width: 90vw; height: 50vh;"></div>
</div>
<div class="container mx-auto row mt-2 mb-5 row-gap-4">
<!-- Column 1 -->
<div class="col-6">
<div class="card borde border-danger">
<h5 class="card-header fs-3 bg-danger bg-danger-subtle text-danger-emphasis">Çalışanlarınızın Ortalama Yaşı</h5>
<div class="card-body">
<h4 class="card-title fw-medium text-secondary" id="avg-age-text"></h4>
</div>
</div>
</div>
<!-- Column 1 End -->
<!-- Column -2 -->
<div class="col-6">
<div class="card border border-danger">
<h5 class="card-header fs-3 bg-danger-subtle bg-danger-subtle text-danger-emphasis">Çalışanlarınızın Ortalama Maaşı</h5>
<div class="card-body">
<h4 class="card-title fw-medium text-secondary" id="avg-salary-text"></h4>
</div>
</div>
</div>
<!-- Column -2 End -->
<!-- Column -3-->
<div class="col-6">
<div class="card border border-danger">
<h5 class="card-header fs-3 bg-danger-subtle bg-danger-subtle text-danger-emphasis">Çalışanlarınıza Ödediğiniz Toplam Maaşı</h5>
<div class="card-body">
<h4 class="card-title fw-medium text-secondary" id="total-salary-text"></h4>
</div>
</div>
</div>
<!-- Column -3 -->
</div>
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="./index.html" class="nav-link px-2 text-body-secondary">Ana Sayfa</a></li>
<li class="nav-item"><a href="./pages/departmanlar.html" class="nav-link px-2 text-body-secondary">Departman Bilgileri</a></li>
<li class="nav-item"><a href="./pages/semtler.html" class="nav-link px-2 text-body-secondary">Semt Bilgileri</a></li>
<li class="nav-item"><a href="./pages/maas.html" class="nav-link px-2 text-body-secondary">Maaş Bilgileri</a></li>
<li class="nav-item"><a href="./pages/enler.html" class="nav-link px-2 text-body-secondary">Şirketinizin Enleri</a></li>
<li class="nav-item"><a href="./pages/hesaparaclari.html" class="nav-link px-2 text-body-secondary">Hesaplama Araçları</a></li>
</ul>
<p class="text-center text-body-secondary">© 2023 Sonat Saygın İpek</p>
</footer>
<!-- Bootstrap.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<!-- Socket.io CDN -->
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<!-- Index Script File -->
<script src="./scripts/indexScript.js"></script>
<!-- İndex eChart File -->
<script src="./scripts/eCharts/eChartsIndex.js"></script>
</body>
</html>