Skip to content

Commit 7831601

Browse files
fantasyui-comfantasyui-com
committed
Initial Commit
1 parent 28fdf3d commit 7831601

10 files changed

+455
-0
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
screenshot.png

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
# bootstrap-dashboard
22
Fully Functional Pure Bootstrap Dashboard, powered by EventEmitter, npm, Node and Electron.
3+
4+
The dashboard is configured via Literate Programming in STORY.md with parser located at STORY.md.js
5+
6+
![](screenshot.png)

‎STORY.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Code Generation Dashboard
2+
---
3+
4+
Card Primary Server monitors example.com health every 3 minutes.
5+
6+
Card Sample Web Server #1 monitors example.com server availability every 20 minutes.
7+
8+
Card Sample Web Server #2 monitors example.com server availability every 20 minutes.

‎STORY.md.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
3+
register(Dashboard Title: $title)
4+
emit dashboard-title, title

‎index.html

+257
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hello World!</title>
6+
7+
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
9+
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
10+
11+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
13+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
14+
15+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
16+
<link rel="stylesheet" href="style.css">
17+
<script src="https://unpkg.com/vue"></script>
18+
19+
</head>
20+
21+
<body>
22+
23+
<div class="container-fluid">
24+
<div class="row">
25+
<div class="col">
26+
27+
<div class="card-columns">
28+
29+
<div class="card text-white bg-warning mb-3">
30+
<div class="card-header">example.com</div>
31+
<div class="card-body">
32+
<h4 class="card-title">Server Failure</h4>
33+
<p class="card-text">Unable to connect to the mail server</p>
34+
</div>
35+
</div>
36+
37+
<div class="card border-info mb-3">
38+
<div class="card-header">Header</div>
39+
<div class="card-body text-info">
40+
<h4 class="card-title">Info card title</h4>
41+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
42+
</div>
43+
</div>
44+
45+
46+
<div class="card text-white bg-info mb-3">
47+
<div class="card-header">example.com</div>
48+
<div class="card-body">
49+
<h4 class="card-title">Server Ping: Slow</h4>
50+
<p class="card-text">Unable to connect to the mail server</p>
51+
</div>
52+
</div>
53+
54+
<div class="card border-warning mb-3">
55+
<div class="card-header">Header</div>
56+
<div class="card-body text-warning">
57+
<h4 class="card-title">Warning card title</h4>
58+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
59+
</div>
60+
</div>
61+
62+
<div class="card text-white bg-primary mb-3">
63+
<div class="card-header">note</div>
64+
<div class="card-body">
65+
<h4 class="card-title">Alpha Quality</h4>
66+
<p class="card-text">Wait a few days</p>
67+
</div>
68+
</div>
69+
70+
<div class="card border-light mb-3">
71+
<div class="card-header">Header</div>
72+
<div class="card-body">
73+
<h4 class="card-title">Light card title</h4>
74+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
75+
</div>
76+
</div>
77+
<div class="card border-dark mb-3">
78+
<div class="card-header">Header</div>
79+
<div class="card-body text-dark">
80+
<h4 class="card-title">Dark card title</h4>
81+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
82+
</div>
83+
</div>
84+
85+
<div class="card border-success mb-3">
86+
<div class="card-header">Header</div>
87+
<div class="card-body text-success">
88+
<h4 class="card-title">Success card title</h4>
89+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
90+
</div>
91+
</div>
92+
93+
<div class="card text-white bg-secondary mb-3">
94+
<div class="card-header">All Systems Nominal</div>
95+
<div class="card-body">
96+
<h4 class="card-title">Alpha Quality</h4>
97+
<p class="card-text">Wait a few days</p>
98+
</div>
99+
</div>
100+
101+
</div>
102+
103+
</div>
104+
</div>
105+
</div>
106+
107+
<div style="display: none;" class="container-fluid">
108+
<div class="row">
109+
<div class="col p-3">
110+
111+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
112+
<div id="app-title">
113+
<h3>
114+
{{name}}
115+
<div class="small text-muted" style="font-size: .9rem;">{{description}}</div>
116+
</h3>
117+
</div>
118+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
119+
120+
</div>
121+
<div class="col">
122+
123+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
124+
125+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
126+
127+
128+
</div>
129+
</div>
130+
<div class="row">
131+
132+
<div class="col">
133+
134+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
135+
<div id="accordion" role="tablist" aria-multiselectable="true">
136+
<div class="card">
137+
<div class="card-header" role="tab" id="headingOne">
138+
<h5 class="mb-0">
139+
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
140+
Collapsible Group Item #1
141+
</a>
142+
</h5>
143+
</div>
144+
145+
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
146+
<div class="card-block">
147+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
148+
</div>
149+
</div>
150+
</div>
151+
<div class="card">
152+
<div class="card-header" role="tab" id="headingTwo">
153+
<h5 class="mb-0">
154+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
155+
Collapsible Group Item #2
156+
</a>
157+
</h5>
158+
</div>
159+
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
160+
<div class="card-block">
161+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
162+
</div>
163+
</div>
164+
</div>
165+
<div class="card">
166+
<div class="card-header" role="tab" id="headingThree">
167+
<h5 class="mb-0">
168+
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
169+
Collapsible Group Item #3
170+
</a>
171+
</h5>
172+
</div>
173+
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
174+
<div class="card-block">
175+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
181+
182+
183+
</div>
184+
185+
<div class="col">
186+
187+
<!-- All of the Node.js APIs are available in this renderer process. -->
188+
189+
190+
191+
192+
193+
194+
<ul class="list-group mb-3">
195+
<li class="list-group-item active"> Node.js <script>document.write(process.versions.node)</script> </li>
196+
<li class="list-group-item"> Chromium <script>document.write(process.versions.chrome)</script> </li>
197+
<li class="list-group-item"> Electron <script>document.write(process.versions.electron)</script> </li>
198+
<li class="list-group-item"> jQuery 3.1.1.slim </li>
199+
<li class="list-group-item"> Vue <script>document.write(Vue.version)</script> </li>
200+
</ul>
201+
202+
<form id="emitter-example-form" class="bg-faded p-3">
203+
<div class="form-group row">
204+
<label class="col-sm-12 col-form-label">Event Emitter Example</label>
205+
</div>
206+
<div class="form-group">
207+
<label for="exampleSelect1">Select Event</label>
208+
<select class="form-control" id="event-name-select">
209+
<option>background-color</option>
210+
<option>foreground-color</option>
211+
</select>
212+
</div>
213+
<div class="form-group row">
214+
<label for="example-color-input" class="col-2 col-form-label">Select Color</label>
215+
<div class="col-10">
216+
<input class="form-control" type="color" value="#297ce8" id="example-color-input">
217+
</div>
218+
</div>
219+
<button type="submit" class="btn btn-primary">Emit</button>
220+
</form>
221+
222+
</div>
223+
<div class="col">
224+
225+
<div class="card">
226+
<img class="card-img-top" src="https://unsplash.it/200/300" alt="Card image cap">
227+
<div class="card-block">
228+
<h4 class="card-title">Card title</h4>
229+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
230+
<a href="#" class="btn btn-primary">Go somewhere</a>
231+
</div>
232+
</div>
233+
234+
</div>
235+
236+
</div>
237+
238+
239+
240+
241+
242+
</div>
243+
244+
245+
246+
247+
248+
</body>
249+
250+
<script>
251+
// You can also require other files to run in this process
252+
253+
require('./renderer.js');
254+
255+
</script>
256+
257+
</html>

‎main.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const electron = require('electron')
2+
// Module to control application life.
3+
const app = electron.app
4+
// Module to create native browser window.
5+
const BrowserWindow = electron.BrowserWindow
6+
7+
const path = require('path')
8+
const url = require('url')
9+
10+
// Keep a global reference of the window object, if you don't, the window will
11+
// be closed automatically when the JavaScript object is garbage collected.
12+
let mainWindow
13+
14+
function createWindow () {
15+
// Create the browser window.
16+
mainWindow = new BrowserWindow({width: 800, height: 600})
17+
18+
// and load the index.html of the app.
19+
mainWindow.loadURL(url.format({
20+
pathname: path.join(__dirname, 'index.html'),
21+
protocol: 'file:',
22+
slashes: true
23+
}))
24+
25+
// Open the DevTools.
26+
// mainWindow.webContents.openDevTools()
27+
28+
// Emitted when the window is closed.
29+
mainWindow.on('closed', function () {
30+
// Dereference the window object, usually you would store windows
31+
// in an array if your app supports multi windows, this is the time
32+
// when you should delete the corresponding element.
33+
mainWindow = null
34+
})
35+
}
36+
37+
// This method will be called when Electron has finished
38+
// initialization and is ready to create browser windows.
39+
// Some APIs can only be used after this event occurs.
40+
app.on('ready', createWindow)
41+
42+
// Quit when all windows are closed.
43+
app.on('window-all-closed', function () {
44+
// On OS X it is common for applications and their menu bar
45+
// to stay active until the user quits explicitly with Cmd + Q
46+
if (process.platform !== 'darwin') {
47+
app.quit()
48+
}
49+
})
50+
51+
app.on('activate', function () {
52+
// On OS X it's common to re-create a window in the app when the
53+
// dock icon is clicked and there are no other windows open.
54+
if (mainWindow === null) {
55+
createWindow()
56+
}
57+
})
58+
59+
// In this file you can include the rest of your app's specific main process
60+
// code. You can also put them in separate files and require them here.

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "bootstrap-dashboard",
3+
"version": "1.0.0",
4+
"description": "Fully Functional Pure Bootstrap Dashboard, powered by EventEmitter, npm, Node and Electron.",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/fantasyui-com/bootstrap-dashboard.git"
12+
},
13+
"keywords": [],
14+
"author": "",
15+
"license": "ISC",
16+
"bugs": {
17+
"url": "https://github.com/fantasyui-com/bootstrap-dashboard/issues"
18+
},
19+
"homepage": "https://github.com/fantasyui-com/bootstrap-dashboard#readme"
20+
}

0 commit comments

Comments
 (0)