uim.bootstrap.bs5.demos.examples.dashboard source code

1 module uim.bootstrap.bs5.demos.examples.dashboard;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("examples/dashboard", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Starter Page - Bootstrap 5 Demo",
14           ])
15           .styles(`body {
16   font-size: .875rem;
17 }
18 
19 .feather {
20   width: 16px;
21   height: 16px;
22   vertical-align: text-bottom;
23 }
24 
25 /*
26  * Sidebar
27  */
28 
29 .sidebar {
30   position: fixed;
31   top: 0;
32   /* rtl:raw:
33   right: 0;
34   */
35   bottom: 0;
36   /* rtl:remove */
37   left: 0;
38   z-index: 100; /* Behind the navbar */
39   padding: 48px 0 0; /* Height of navbar */
40   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
41 }
42 
43 @media (max-width: 767.98px) {
44   .sidebar {
45     top: 5rem;
46   }
47 }
48 
49 .sidebar-sticky {
50   position: relative;
51   top: 0;
52   height: calc(100vh - 48px);
53   padding-top: .5rem;
54   overflow-x: hidden;
55   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
56 }
57 
58 .sidebar .nav-link {
59   font-weight: 500;
60   color: #333;
61 }
62 
63 .sidebar .nav-link .feather {
64   margin-right: 4px;
65   color: #727272;
66 }
67 
68 .sidebar .nav-link.active {
69   color: #007bff;
70 }
71 
72 .sidebar .nav-link:hover .feather,
73 .sidebar .nav-link.active .feather {
74   color: inherit;
75 }
76 
77 .sidebar-heading {
78   font-size: .75rem;
79   text-transform: uppercase;
80 }
81 
82 /*
83  * Navbar
84  */
85 
86 .navbar-brand {
87   padding-top: .75rem;
88   padding-bottom: .75rem;
89   font-size: 1rem;
90   background-color: rgba(0, 0, 0, .25);
91   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
92 }
93 
94 .navbar .navbar-toggler {
95   top: .25rem;
96   right: 1rem;
97 }
98 
99 .navbar .form-control {
100   padding: .75rem 1rem;
101   border-width: 0;
102   border-radius: 0;
103 }
104 
105 .form-control-dark {
106   color: #fff;
107   background-color: rgba(255, 255, 255, .1);
108   border-color: rgba(255, 255, 255, .1);
109 }
110 
111 .form-control-dark:focus {
112   border-color: transparent;
113   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
114 }
115 
116       .bd-placeholder-img {
117         font-size: 1.125rem;
118         text-anchor: middle;
119         -webkit-user-select: none;
120         -moz-user-select: none;
121         user-select: none;
122       }
123 
124       @media (min-width: 768px) {
125         .bd-placeholder-img-lg {
126           font-size: 3.5rem;
127         }
128       }`)
129       .styles(["href":"dashboard.css", "rel":"stylesheet"])
130       .scripts(`/* globals Chart:false, feather:false */
131 
132 (function () {
133   'use strict'
134 
135   feather.replace()
136 
137   // Graphs
138   var ctx = document.getElementById('myChart')
139   // eslint-disable-next-line no-unused-vars
140   var myChart = new Chart(ctx, {
141     type: 'line',
142     data: {
143       labels: [
144         'Sunday',
145         'Monday',
146         'Tuesday',
147         'Wednesday',
148         'Thursday',
149         'Friday',
150         'Saturday'
151       ],
152       datasets: [{
153         data: [
154           15339,
155           21345,
156           18483,
157           24003,
158           23489,
159           24092,
160           12034
161         ],
162         lineTension: 0,
163         backgroundColor: 'transparent',
164         borderColor: '#007bff',
165         borderWidth: 4,
166         pointBackgroundColor: '#007bff'
167       }]
168     },
169     options: {
170       scales: {
171         yAxes: [{
172           ticks: {
173             beginAtZero: false
174           }
175         }]
176       },
177       legend: {
178         display: false
179       }
180     }
181   })
182 })()`);
183 		} 
184 			
185     override string content() { 
186 
187       return 
188 BS5Navbar(["navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"], 
189   BS5NavbarBrand(["col-md-3 col-lg-2 me-0 px-3"], ["href":"#"], "Company name"),
190   H5Button(["navbar-toggler position-absolute d-md-none collapsed"], ["type":"button", "data-bs-toggle":"collapse", "data-bs-target":"#sidebarMenu", "aria-controls":"sidebarMenu", "aria-expanded":"false", "aria-label":"Toggle navigation"], 
191     H5Span(["navbar-toggler-icon"])
192   ),
193   BS5InputSearch(["form-control-dark w-100"], ["type":"text", "placeholder":"Search", "aria-label":"Search"]),
194   BS5NavbarNav(["px-3"], 
195     BS5NavItem(["text-nowrap"], 
196       BS5NavLink(["href":"#"], "Sign out")
197     )
198   )
199 ).toString~
200 
201 H5Div(["container-fluid"], 
202   H5Div(["row"], 
203     H5Nav("sidebarMenu", ["col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"], 
204       H5Div(["position-sticky pt-3"], 
205         H5Ul(["nav flex-column"], 
206           BS5NavItem(
207             BS5NavLink(["active"], ["aria-current":"page", "href":"#"], 
208               H5Span(["data-feather":"home"]), H5String("Dashboard"))
209           ),
210           BS5NavItem(
211             BS5NavLink(["href":"#"], 
212               H5Span(["data-feather":"file"]), H5String("Orders"))
213           ),
214           BS5NavItem(
215             BS5NavLink(["href":"#"], 
216               H5Span(["data-feather":"shopping-cart"]), H5String("Products"))
217           ),
218           BS5NavItem(
219             BS5NavLink(["href":"#"], 
220               H5Span(["data-feather":"users"]), H5String("Customers"))
221           ),
222           BS5NavItem(
223             BS5NavLink(["href":"#"], 
224               H5Span(["data-feather":"bar-chart-2"]), H5String("Reports"))
225           ),
226           BS5NavItem(
227             BS5NavLink(["href":"#"], 
228               H5Span(["data-feather":"layers"]), H5String("Integrations"))
229           )
230         ),
231         H5H6(["sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"],
232           H5Span("Saved reports"),
233           H5A(["link-secondary"], ["href":"#", "aria-label":"Add a new report"],
234             H5Span(["data-feather":"plus-circle"])
235           )
236         ),
237         H5Ul(["nav flex-column mb-2"], 
238           BS5NavItem(
239             BS5NavLink(["href":"#"], 
240               H5Span(["data-feather":"file-text"]), H5String("Current month"))
241           ),
242           BS5NavItem(
243             BS5NavLink(["href":"#"], 
244               H5Span(["data-feather":"file-text"]), H5String("Last quarter"))
245           ),
246           BS5NavItem(
247             BS5NavLink(["href":"#"], 
248               H5Span(["data-feather":"file-text"]), H5String("Social engagement"))
249           ),
250           BS5NavItem(
251             BS5NavLink(["href":"#"], 
252               H5Span(["data-feather":"file-text"]), H5String("Year-end sale"))
253           )
254         )
255       )
256     ),
257 
258     H5Main(["col-md-9 ms-sm-auto col-lg-10 px-md-4"], 
259       H5Div(["d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"], 
260         H5H1(["h2"], "Dashboard"),
261         H5Div(["btn-toolbar mb-2 mb-md-0"], 
262           H5Div(["btn-group me-2"], 
263             BS5Button(["btn-sm btn-outline-secondary"], "Share"),
264             BS5Button(["btn-sm btn-outline-secondary"], "Export")
265           ),
266           BS5Button(["btn-sm btn-outline-secondary dropdown-toggle"],
267             H5Span(["data-feather":"calendar"]), H5String("This week"))
268         )
269       ),
270 
271       H5Canvas("myChart", ["my-4 w-100"], ["width":"900", "height":"380"]),
272 
273       H5H2("Section title"),
274       H5Div(["table-responsive"], 
275         H5Table(["table table-striped table-sm"], 
276           H5Thead(
277             H5Tr
278               .th("#")
279               .th("Header")
280               .th("Header")
281               .th("Header")
282               .th("Header")
283           ),
284           H5Tbody(
285             H5Tr
286               .td("1,001")
287               .td("Lorem")
288               .td("ipsum")
289               .td("dolor")
290               .td("sit"),
291             H5Tr
292               .td("1,002")
293               .td("amet")
294               .td("consectetur")
295               .td("adipiscing")
296               .td("elit"),
297             H5Tr
298               .td("1,003")
299               .td("Integer")
300               .td("nec")
301               .td("odio")
302               .td("Praesent"),
303             H5Tr
304               .td("1,003")
305               .td("libero")
306               .td("Sed")
307               .td("cursus")
308               .td("ante"),
309             H5Tr
310               .td("1,004")
311               .td("dapibus")
312               .td("diam")
313               .td("Sed")
314               .td("nisi"),
315             H5Tr
316               .td("1,005")
317               .td("Nulla")
318               .td("quis")
319               .td("sem")
320               .td("at"),
321             H5Tr
322               .td("1,006")
323               .td("nibh")
324               .td("elementum")
325               .td("imperdiet")
326               .td("Duis"),
327             H5Tr
328               .td("1,007")
329               .td("sagittis")
330               .td("ipsum")
331               .td("Praesent")
332               .td("mauris"),
333             H5Tr
334               .td("1,008")
335               .td("Fusce")
336               .td("nec")
337               .td("tellus")
338               .td("sed"),
339             H5Tr
340               .td("1,009")
341               .td("augue")
342               .td("semper")
343               .td("porta")
344               .td("Mauris"),
345             H5Tr
346               .td("1,010")
347               .td("massa")
348               .td("Vestibulum")
349               .td("lacinia")
350               .td("arcu"),
351             H5Tr
352               .td("1,011")
353               .td("eget")
354               .td("nulla")
355               .td("Class")
356               .td("aptent"),
357             H5Tr
358               .td("1,012")
359               .td("taciti")
360               .td("sociosqu")
361               .td("ad")
362               .td("litora"),
363             H5Tr
364               .td("1,013")
365               .td("torquent")
366               .td("per")
367               .td("conubia")
368               .td("nostra"),
369             H5Tr
370               .td("1,014")
371               .td("per")
372               .td("inceptos")
373               .td("himenaeos")
374               .td("Curabitur"),            
375             H5Tr
376               .td("1,015")
377               .td("sodales")
378               .td("ligula")
379               .td("in")
380               .td("libero")
381           )
382         )
383       )
384     )
385   )
386 ).toString;
387 
388     }
389   });
390 }
391