Skip to content

Commit f299831

Browse files
author
App Generator
committed
Release v0.0.5
1 parent 279c4aa commit f299831

File tree

5 files changed

+225
-29
lines changed

5 files changed

+225
-29
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Change Log
22

3+
## [0.0.5] 2022-02-07
4+
### Improvements
5+
6+
- Toast notification for `inline` actions
7+
- Cell Edit
8+
- Row deletion
9+
310
## [0.0.4] 2022-02-07
411
### Improvements
512

‎app/static/datatables/app.js‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,30 @@ Copyright (c) 2019 - present AppSeed.us
88
const doc = document;
99
doc.addEventListener("DOMContentLoaded", function(event) {
1010

11+
// Used for API Requests
1112
var xhr1 = new XMLHttpRequest();
1213

14+
// Toasts
15+
const notyf = new Notyf({
16+
position: {
17+
x: 'right',
18+
y: 'top',
19+
},
20+
types: [
21+
{
22+
type: 'info',
23+
background: '#FA5252',
24+
icon: {
25+
className: 'fas fa-comment-dots',
26+
tagName: 'span',
27+
color: '#fff'
28+
},
29+
dismissible: false
30+
}
31+
]
32+
});
33+
34+
// Used by cell edit
1335
document.addEventListener('keydown', event => {
1436

1537
// Catch 'ENTER' event
@@ -20,32 +42,35 @@ doc.addEventListener("DOMContentLoaded", function(event) {
2042

2143
// Drop the default event
2244
event.preventDefault();
23-
24-
// Log the clicked element in the console
25-
// console.log(event.target);
26-
console.log( 'EVENT -> Cell Save' );
27-
45+
2846
let td = event.target;
2947
let tr = event.target.closest('tr.editable');
3048

3149
let data_id = tr.dataset.id;
3250
let data_name = td.dataset.name;
3351
let data_value = td.textContent;
3452

35-
console.log( ' >> Save Data [' + data_id + '] ' + data_name + ' = [' + data_value + ']' );
36-
3753
xhr1.open("PUT", "/api/data/field/" + data_id);
3854
xhr1.setRequestHeader("Content-Type", "application/json");
3955

4056
// Check Status
4157
xhr1.onreadystatechange = function() {
4258

4359
if (this.status == 200 && this.readyState == 4) {
44-
console.log( ' >>> Editing OK' );
60+
61+
notyf.open({
62+
type: 'success',
63+
message: 'Information saved successfully'
64+
});
4565
}
4666

47-
if (this.status != 200) {
48-
console.log( ' >>> Editing ERR ' + this.status );
67+
// XMLHttpRequest returns 0 on success
68+
if ( (this.status > 0) && (this.status != 200) ) {
69+
70+
notyf.open({
71+
type: 'error',
72+
message: 'Error!'
73+
});
4974
}
5075

5176
};//end onreadystate
@@ -70,18 +95,12 @@ doc.addEventListener("DOMContentLoaded", function(event) {
7095
// Drop the default event
7196
event.preventDefault();
7297

73-
// Log the clicked element in the console
74-
// console.log(event.target);
75-
console.log( 'EVENT -> Cell Edit' );
76-
7798
let td = event.target;
7899
let tr = event.target.closest('tr.editable');
79100

80101
let data_id = tr.dataset.id;
81102
let data_name = td.dataset.name;
82-
83-
console.log( ' >> Edit Data ' + data_id + ' -> ' + data_name );
84-
103+
85104
// Enable 'EDITABLE' property
86105
td.setAttribute("contenteditable", "true");
87106
}
@@ -92,26 +111,31 @@ doc.addEventListener("DOMContentLoaded", function(event) {
92111
// Drop the default event
93112
event.preventDefault();
94113

95-
// console.log(event.target);
96-
console.log( 'EVENT -> ROW Delete' );
97-
98114
let tr = event.target.closest('tr.editable');
99115
let data_id = tr.dataset.id;
100116

101-
console.log( ' >>> DELETE ID = ' + data_id );
102-
103117
xhr1.open('DELETE', "/api/data/" + data_id, true);
104118

105119
// Check Status
106120
xhr1.onreadystatechange = function() {
107121

108122
if (this.status == 200 && this.readyState == 4) {
109-
console.log( ' >>> Deletion OK' );
123+
110124
tr.remove();
125+
126+
notyf.open({
127+
type: 'success',
128+
message: 'Information deleted successfully'
129+
});
111130
}
112-
113-
if (this.status != 200) {
114-
console.log( ' >>> Deletion ERR ' + this.status );
131+
132+
// XMLHttpRequest returns 0 on success
133+
if ( (this.status > 0) && (this.status != 200) ) {
134+
135+
notyf.open({
136+
type: 'error',
137+
message: 'Error! ' + this.status
138+
});
115139
}
116140

117141
};//end onreadystate

‎app/templates/datatables/datatables.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h1 class="h4">Simple DataTables</h1>
5050

5151
{{ table | safe }}
5252

53-
</div>
53+
</div>
5454
</div>
5555

5656
{% endblock content %}

‎app/templates/pages/components-notifications.html‎

Lines changed: 166 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,169 @@ <h2 class="h4 mb-0">Notyf</h2>
8787
{% endblock content %}
8888

8989
<!-- Specific Page JS goes HERE -->
90-
{% block javascripts %}{% endblock javascripts %}
90+
{% block javascripts %}
91+
92+
<script>
93+
94+
const swalWithBootstrapButtons = Swal.mixin({
95+
customClass: {
96+
confirmButton: 'btn btn-primary',
97+
cancelButton: 'btn btn-gray'
98+
},
99+
buttonsStyling: false
100+
});
101+
102+
// SweetAlert 2
103+
document.getElementById('basicAlert').addEventListener('click', function () {
104+
swalWithBootstrapButtons.fire(
105+
'Basic alert',
106+
'You clicked the button!'
107+
)
108+
});
109+
110+
document.getElementById('infoAlert').addEventListener('click', function () {
111+
swalWithBootstrapButtons.fire(
112+
'Info alert',
113+
'You clicked the button!',
114+
'info'
115+
)
116+
});
117+
118+
document.getElementById('successAlert').addEventListener('click', function () {
119+
swalWithBootstrapButtons.fire({
120+
icon: 'success',
121+
title: 'Success alert',
122+
text: 'Your work has been saved',
123+
showConfirmButton: true,
124+
timer: 1500
125+
})
126+
});
127+
128+
document.getElementById('warningAlert').addEventListener('click', function () {
129+
swalWithBootstrapButtons.fire(
130+
'Warning alert',
131+
'You clicked the button!',
132+
'warning'
133+
)
134+
});
135+
136+
document.getElementById('dangerAlert').addEventListener('click', function () {
137+
swalWithBootstrapButtons.fire({
138+
icon: 'error',
139+
title: 'Oops...',
140+
text: 'Something went wrong!',
141+
footer: '<a href>Why do I have this issue?</a>'
142+
})
143+
});
144+
145+
document.getElementById('questionAlert').addEventListener('click', function () {
146+
swalWithBootstrapButtons.fire(
147+
'The Internet?',
148+
'That thing is still around?',
149+
'question'
150+
);
151+
});
152+
153+
document.getElementById('notifyTopLeft').addEventListener('click', function () {
154+
const notyf = new Notyf({
155+
position: {
156+
x: 'left',
157+
y: 'top',
158+
},
159+
types: [
160+
{
161+
type: 'info',
162+
background: '#0948B3',
163+
icon: {
164+
className: 'fas fa-info-circle',
165+
tagName: 'span',
166+
color: '#fff'
167+
},
168+
dismissible: false
169+
}
170+
]
171+
});
172+
notyf.open({
173+
type: 'info',
174+
message: 'Send us <b>an email</b> to get support'
175+
});
176+
});
177+
178+
document.getElementById('notifyTopRight').addEventListener('click', function () {
179+
const notyf = new Notyf({
180+
position: {
181+
x: 'right',
182+
y: 'top',
183+
},
184+
types: [
185+
{
186+
type: 'error',
187+
background: '#FA5252',
188+
icon: {
189+
className: 'fas fa-times',
190+
tagName: 'span',
191+
color: '#fff'
192+
},
193+
dismissible: false
194+
}
195+
]
196+
});
197+
notyf.open({
198+
type: 'error',
199+
message: 'This action is not allowed.'
200+
});
201+
});
202+
203+
document.getElementById('notifyBottomLeft').addEventListener('click', function () {
204+
const notyf = new Notyf({
205+
position: {
206+
x: 'left',
207+
y: 'bottom',
208+
},
209+
types: [
210+
{
211+
type: 'warning',
212+
background: '#F5B759',
213+
icon: {
214+
className: 'fas fa-exclamation-triangle',
215+
tagName: 'span',
216+
color: '#fff'
217+
},
218+
dismissible: false
219+
}
220+
]
221+
});
222+
notyf.open({
223+
type: 'warning',
224+
message: 'This might be dangerous.'
225+
});
226+
});
227+
228+
document.getElementById('notifyBottomRight').addEventListener('click', function () {
229+
const notyf = new Notyf({
230+
position: {
231+
x: 'right',
232+
y: 'bottom',
233+
},
234+
types: [
235+
{
236+
type: 'info',
237+
background: '#262B40',
238+
icon: {
239+
className: 'fas fa-comment-dots',
240+
tagName: 'span',
241+
color: '#fff'
242+
},
243+
dismissible: false
244+
}
245+
]
246+
});
247+
notyf.open({
248+
type: 'info',
249+
message: 'John Garreth: Are you ready for the presentation?'
250+
});
251+
});
252+
253+
</script>
254+
255+
{% endblock javascripts %}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "flask-volt-datatables",
33
"mastertemplate": "flask-volt-datatables",
4-
"version": "0.0.4",
4+
"version": "0.0.5",
55
"description": "Template project - Flask/Jinja2 Theme",
66
"scripts": {},
77
"repository": {

0 commit comments

Comments
 (0)