Skip to content

Commit 7ecfcf9

Browse files
djthorpedjthorpe
committed
Updated
1 parent bd6060e commit 7ecfcf9

File tree

12 files changed

+434
-0
lines changed

12 files changed

+434
-0
lines changed

‎html/dataio/dataio.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/* eslint-disable max-classes-per-file */
2+
3+
// Models
4+
class Bucket extends mvc.Model { }
5+
mvc.Model.define(Bucket, {
6+
key: '_id string',
7+
tags: '{}string',
8+
});
9+
10+
// Controller
11+
class DataApp extends mvc.Controller {
12+
main() {
13+
// Add objects to the application
14+
this.Add('nav', new mvc.Nav(document.querySelector('#nav')));
15+
this.Add('toast', new mvc.Toast(document.querySelector('#toast')));
16+
this.Add('plus', new mvc.Button(document.querySelector('#plus')));
17+
this.Add('buckets', new mvc.Provider(Bucket, 'https://rpi4b.mutablelogic.com'));
18+
this.Add('table', new mvc.List(document.querySelector('#table'), '_template'));
19+
20+
// Buckets
21+
this.buckets.addEventListener('mvc.provider.error', (sender, error) => {
22+
this.toast.show(error);
23+
});
24+
this.buckets.addEventListener('mvc.provider.added', (sender, bucket) => {
25+
this.table.set(bucket, bucket.key)
26+
.replace('._name', bucket.name)
27+
.replace('._json', bucket.$json);
28+
});
29+
this.buckets.addEventListener('mvc.provider.changed', (sender, bucket) => {
30+
this.table.set(bucket, bucket.key)
31+
.replace('._name', bucket.name)
32+
.replace('._json', bucket.$json);
33+
});
34+
this.buckets.addEventListener('mvc.provider.deleted', (sender, bucket) => {
35+
this.table.deleteForKey(bucket.key);
36+
});
37+
this.buckets.addEventListener('mvc.provider.completed', (sender, changed) => {
38+
// Re-sort table if changed
39+
console.log('Buckets loaded, changed=', changed);
40+
});
41+
}
42+
}
43+
44+
window.process = { env: {} };
45+
46+
window.addEventListener('DOMContentLoaded', () => {
47+
const App = mvc.Controller.New(DataApp);
48+
49+
// Set up event handlers
50+
App.main();
51+
52+
// Request buckets every 30 secs
53+
App.buckets.request('/api/dataio/', null, null, 30 * 1000);
54+
});

‎html/dataio/inc/table.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="container">
2+
<table class="table table-hover">
3+
<thead>
4+
<tr>
5+
<th>Project</th>
6+
<th>JSON</th>
7+
</tr>
8+
</thead>
9+
<tbody id="table">
10+
<tr class="_template">
11+
<td class="_name">Project</td>
12+
<td class="_json mvc-copypaste">Project</td>
13+
</tr>
14+
</tbody>
15+
</table>
16+
</div>

‎html/dataio/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>DataIO</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="/js/index.js"></script>
8+
<script src="dataio.js"></script>
9+
</head>
10+
11+
<body>
12+
<!--# include virtual="/inc/nav.html" -->
13+
<!--# include virtual="/inc/plusbutton.html" -->
14+
<!--# include virtual="/inc/toast.html" -->
15+
<!--# include virtual="inc/table.html" -->
16+
</body>
17+
18+
</html>

‎html/inc/nav.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!-- NAV -->
2+
<nav class="navbar sticky-top navbar navbar-dark navbar-expand-md bg-primary" id="nav">
3+
<div class="container-fluid">
4+
<a class="navbar-brand" href="/"><strong>The VFX Cooperative</strong></a>
5+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-items"
6+
aria-expanded="false">
7+
<span class="navbar-toggler-icon"></span>
8+
</button>
9+
<div class="collapse navbar-collapse" id="navbar-items">
10+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
11+
<li class="nav-item" id="nav_home">
12+
<a class="nav-link" href="/">Home</a>
13+
</li>
14+
<li class="nav-item" id="nav_projects">
15+
<a class="nav-link" href="/projects/">Projects</a>
16+
</li>
17+
<li class="nav-item" id="nav_dataio">
18+
<a class="nav-link" href="/dataio/">DataIO</a>
19+
</li>
20+
<li class="nav-item" id="nav_docs">
21+
<a class="nav-link" href="/docs/">Docs</a>
22+
</li>
23+
<li class="nav-item" id="nav_status">
24+
<a class="nav-link" href="/status/">Status</a>
25+
</li>
26+
</ul>
27+
</div>
28+
</div>
29+
</nav>

‎html/inc/plusbutton.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="fixed-bottom d-flex flex-row-reverse">
2+
<button id="plus" class="btn btn-circle bg-danger text-white" data-bs-toggle="tooltip" title="Add">+</button>
3+
</div>

‎html/inc/toast.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="toast-container position-absolute bottom-0 end-0 p-3 d-none" style="z-index: 9999;">
2+
<div class="toast" id="toast" role="alert">
3+
<div class="toast-header">
4+
<strong class="me-auto _title"></strong>
5+
<small class="text-muted _code"></small>
6+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
7+
</div>
8+
<div class="toast-body _reason"></div>
9+
</div>
10+
</div>

‎html/projects/inc/form.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-hidden="true">
3+
<div class="modal-dialog" role="document">
4+
<div class="modal-content">
5+
<form class="needs-validation" novalidate>
6+
<div class="modal-header">
7+
<h5 class="modal-title">Create New Project</h5>
8+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
9+
</div>
10+
<div class="modal-body">
11+
<div class="row mb-3">
12+
<label for="new-name" class="col-sm-4 col-form-label">Title</label>
13+
<div class="col-sm-8">
14+
<input class="form-control" name="name" id="new-name" required>
15+
<div class="form-text">The name of the project</div>
16+
</div>
17+
</div>
18+
<div class="row mb-3">
19+
<label class="col-sm-4 col-form-label">Radio Buttons</label>
20+
<div class="col-sm-8">
21+
<div class="form-check form-check-inline">
22+
<input class="form-check-input" type="radio" name="radio" id="inlineRadio1"
23+
value="option1">
24+
<label class="form-check-label" for="inlineRadio1">1</label>
25+
</div>
26+
<div class="form-check form-check-inline">
27+
<input class="form-check-input" type="radio" name="radio" id="inlineRadio2"
28+
value="option2">
29+
<label class="form-check-label" for="inlineRadio2">2</label>
30+
</div>
31+
</div>
32+
</div>
33+
<div class="row mb-3">
34+
<label for="range" class="col-sm-4 col-form-label">Range</label>
35+
<div class="col-sm-6">
36+
<input type="range" class="form-range" id="range" name="range">
37+
</div>
38+
<div class="col-sm-2 _range">
39+
[V]
40+
</div>
41+
</div>
42+
<div class="row mb-3">
43+
<label for="range" class="col-sm-4 col-form-label">Select</label>
44+
<div class="col-sm-8">
45+
<select class="form-select" name="select" aria-label="Default select example" required>
46+
<option value="" selected>Open this select menu</option>
47+
<option value="1">One</option>
48+
<option value="2">Two</option>
49+
<option value="3">Three</option>
50+
</select>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="modal-footer">
55+
<button type="submit" id="create" class="btn btn-primary">Create</button>
56+
</div>
57+
</form>
58+
</div>
59+
</div>
60+
</div>

‎html/projects/inc/table.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="container">
2+
<table class="table table-hover">
3+
<thead>
4+
<tr>
5+
<th>Project</th>
6+
<th>JSON</th>
7+
</tr>
8+
</thead>
9+
<tbody id="table">
10+
<tr class="_template">
11+
<td class="_name">Project</td>
12+
<td class="_json mvc-copypaste">Project</td>
13+
</tr>
14+
</tbody>
15+
</table>
16+
</div>

‎html/projects/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Projects</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="/js/index.js"></script>
8+
<script src="projects.js"></script>
9+
</head>
10+
11+
<body>
12+
<!--# include virtual="/inc/nav.html" -->
13+
<!--# include virtual="/inc/plusbutton.html" -->
14+
<!--# include virtual="/inc/toast.html" -->
15+
<!--# include virtual="inc/form.html" -->
16+
<!--# include virtual="inc/table.html" -->
17+
18+
<div class="mvc-copypaste">This is some text!!!!</div>
19+
</body>
20+
21+
</html>

‎html/projects/projects.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* eslint-disable max-classes-per-file */
2+
3+
class ProjectsApp extends mvc.Controller {
4+
main() {
5+
// Add objects to the application
6+
this.Add('nav', new mvc.Nav(document.querySelector('#nav')));
7+
this.Add('toast', new mvc.Toast(document.querySelector('#toast')));
8+
this.Add('plus', new mvc.Button(document.querySelector('#plus')));
9+
this.Add('form', new mvc.Form(document.querySelector('#form')));
10+
this.Add('projects', new mvc.Provider(Project, 'https://rpi4b.mutablelogic.com'));
11+
this.Add('table', new mvc.List(document.querySelector('#table'), '_template'));
12+
13+
// Show toast when button pressed
14+
this.plus.addEventListener('mvc.button.click', (sender, target) => {
15+
this.form.replace('._range', '');
16+
this.form.show({
17+
name: 'default',
18+
radio: 'option2',
19+
range: '0',
20+
select: '3',
21+
});
22+
});
23+
24+
// Hide form when submitted
25+
this.form.addEventListener('mvc.form.submit', (sender, target) => {
26+
// Hide form
27+
this.form.hide();
28+
29+
// Show toast of values
30+
this.toast.show(JSON.stringify(this.form.values), target.id);
31+
});
32+
33+
// Form range value
34+
this.form.addEventListener('mvc.form.change', (sender, target) => {
35+
if (target.name === 'range') {
36+
this.form.replace('._range', target.value);
37+
}
38+
});
39+
40+
// Set active row
41+
this.table.addEventListener('mvc.list.click', (sender, target, key) => {
42+
this.table.setClassForKey(key, 'table-active');
43+
});
44+
45+
// Projects
46+
this.projects.addEventListener('mvc.provider.error', (sender, error) => {
47+
this.toast.show(error);
48+
});
49+
this.projects.addEventListener('mvc.provider.added', (sender, project) => {
50+
this.table.set(project, project.key)
51+
.replace('._name', project.name)
52+
.replace('._json', project.$json);
53+
});
54+
this.projects.addEventListener('mvc.provider.changed', (sender, project) => {
55+
this.table.set(project, project.key)
56+
.replace('._name', project.name)
57+
.replace('._json', project.$json);
58+
});
59+
this.projects.addEventListener('mvc.provider.deleted', (sender, project) => {
60+
this.table.deleteForKey(project.key);
61+
});
62+
this.projects.addEventListener('mvc.provider.completed', (sender, changed) => {
63+
// Re-sort table if changed
64+
console.log('Projects loaded, changed=', changed);
65+
});
66+
}
67+
}
68+
69+
// Models
70+
class Project extends mvc.Model { }
71+
mvc.Model.define(Project, {
72+
key: '_id string',
73+
name: 'string',
74+
status: 'string',
75+
createdDate: 'created_date date',
76+
updatedDate: 'updated_date date',
77+
tags: '{}string',
78+
});
79+
80+
window.process = { env: {} };
81+
82+
window.addEventListener('DOMContentLoaded', () => {
83+
const App = mvc.Controller.New(ProjectsApp);
84+
85+
// Set up event handlers
86+
App.main();
87+
88+
// Request projects every 30 secs
89+
App.projects.request('/api/project/', null, null, 30 * 1000);
90+
});

0 commit comments

Comments
 (0)