List of commits:
Subject Hash Author Date (UTC)
add/edit/copy todo and list update 31bb5ab68298605f159ffcaf7bd29a2ee9649ee3 Raluca Pacurar 2019-12-15 21:21:51
initial2 d1ca5c33ec2ee0334c44182539d2d937711ff4ac Raluca Pacurar 2019-12-05 21:40:40
initial 9acfa21f1a216106d7971d60e90f697bf2182c00 Raluca Pacurar 2019-12-05 21:38:37
Commit 31bb5ab68298605f159ffcaf7bd29a2ee9649ee3 - add/edit/copy todo and list update
Author: Raluca Pacurar
Author date (UTC): 2019-12-15 21:21
Committer name: Raluca Pacurar
Committer date (UTC): 2019-12-15 21:21
Parent(s): d1ca5c33ec2ee0334c44182539d2d937711ff4ac
Signing key:
Tree: a3780bd3b15519995724e0cbd98dcbcb34b23677
File Lines added Lines deleted
app/__pycache__/routes.cpython-37.pyc 0 0
app/routes.py 34 3
app/static/index.js 26 26
app/static/item.js 0 0
app/static/masonry.pkgd.min.js 9 0
app/static/styles.css 32 7
app/static/todolist.js 145 0
app/templates/index.html 14 152
File app/__pycache__/routes.cpython-37.pyc changed (mode: 100644) (index 088ccf3..76de958)
File app/routes.py changed (mode: 100755) (index 750f662..c00f38d)
... ... def addTodo():
96 96 for fieldName, errorMessages in form.errors.items(): for fieldName, errorMessages in form.errors.items():
97 97 for err in errorMessages: for err in errorMessages:
98 98 flash("Field: "+fieldName+" Errormsg: "+err) flash("Field: "+fieldName+" Errormsg: "+err)
99 return redirect(url_for('index'))
99 return redirect(url_for('index'))
100 response = app.response_class(
101 response=json.dumps(todo.serialize),
102 status=200,
103 mimetype='application/json'
104 )
105 return response
100 106
101 107
102 108 @app.route('/static/delete', methods=['POST']) @app.route('/static/delete', methods=['POST'])
 
... ... def delete_todo(todo_id):
129 135 todos = Todo.query.filter_by(user_id=current_user.id) todos = Todo.query.filter_by(user_id=current_user.id)
130 136 flash('Congratulations, deleted'+todoDeletedTitle+' todo!') flash('Congratulations, deleted'+todoDeletedTitle+' todo!')
131 137 response = app.response_class( response = app.response_class(
132 response=json.dumps([i.serialize for i in todos]),
138 response=json.dumps(dict(success=True, todo_id=todo_id)),
133 139 status=200, status=200,
134 140 mimetype='application/json' mimetype='application/json'
135 141 ) )
 
... ... def copy_todo(todo_id):
152 158 todos = Todo.query.filter_by(user_id=current_user.id) todos = Todo.query.filter_by(user_id=current_user.id)
153 159 flash('Congratulations, copied todo!') flash('Congratulations, copied todo!')
154 160 response = app.response_class( response = app.response_class(
155 response=json.dumps([i.serialize for i in todos]),
161 response=json.dumps(todo.serialize),
162 status=200,
163 mimetype='application/json'
164 )
165 return response
166
167
168 @app.route('/static/edit/<int:todo_id>', methods=['POST'])
169 @login_required
170 def editTodo(todo_id):
171 form = TodoForm()
172 if form.validate_on_submit():
173 Todo.query.filter_by(id=todo_id).update(dict(title=form.title.data,
174 body=form.body.data,
175 status=form.status.data or 'NOT_STARTED',
176 recurring=form.recurring.data or False));
177 db.session.commit()
178 flash('Congratulations, you added a new todo!')
179 else:
180 for fieldName, errorMessages in form.errors.items():
181 for err in errorMessages:
182 flash("Field: "+fieldName+" Errormsg: "+err)
183 return redirect(url_for('index'))
184
185 response = app.response_class(
186 response=json.dumps(Todo.query.filter_by(id=todo_id).first().serialize),
156 187 status=200, status=200,
157 188 mimetype='application/json' mimetype='application/json'
158 189 ) )
File app/static/index.js changed (mode: 100755) (index f2ac656..c17b8f9)
... ... var btn = document.getElementById("myBtn");
28 28 var spanCloseModal = document.getElementsByClassName("close")[0]; var spanCloseModal = document.getElementsByClassName("close")[0];
29 29
30 30 // When the user clicks the button, open the modal // When the user clicks the button, open the modal
31 btn.onclick = function showModal() {
31 function showModal() {
32 32 modal.style.display = "block"; modal.style.display = "block";
33 33 } }
34 btn.onclick = function() {
35 document.getElementById("todoForm").action = '/static/addTodo';
36 showModal();
37 };
34 38
35 39 // When the user clicks on <span> (x), close the modal // When the user clicks on <span> (x), close the modal
36 spanCloseModal.onclick = function hideModal() {
40 function hideModal() {
37 41 modal.style.display = "none"; modal.style.display = "none";
38 42 } }
43 spanCloseModal.onclick = hideModal;
39 44
40 45 // When the user clicks anywhere outside of the modal, close it // When the user clicks anywhere outside of the modal, close it
41 46 window.onclick = function(event) { window.onclick = function(event) {
 
... ... window.onclick = function(event) {
139 144 } }
140 145
141 146 var promise; var promise;
142 function setTodoNoteBeforeSubmit(e) {
147 async function setTodoNoteBeforeSubmit(e) {
143 148 console.log("setTodoNoteBeforeSubmit"); console.log("setTodoNoteBeforeSubmit");
144 149 console.log(e); console.log(e);
145 150 e.preventDefault(); e.preventDefault();
 
... ... window.onclick = function(event) {
189 194 console.log(pair[1]); console.log(pair[1]);
190 195 console.log(" -------------------------------- "); console.log(" -------------------------------- ");
191 196 } }
192
193 promise = fetch('/static/addTodo', {
197 let url = 'static/addTodo';
198 url = formElement.getAttribute("action");
199 var response = await fetch(url, {
194 200 method: 'POST', // or 'PUT' method: 'POST', // or 'PUT'
195 body: data//formData,//JSON.stringify(formData), // data can be `string` or {object}!
196 //headers: {
197 // 'Content-Type': 'application/x-www-form-urlencoded'//'application/json'
198 // }
201 body: data,//formData,//JSON.stringify(formData), // data can be `string` or {object}!
202 headers: {
203 'Content-Type': 'application/x-www-form-urlencoded'//'application/json'
204 }
199 205 }); });
200 promise.then((response) => function(response){
201 console.log("first promise");
202 console.log(response.clone());
203 if(response.ok){
204 return response;
205 }
206 console.log("ERROR");
207 throw new Error("there was an error");
208 })
209 //.then(response => response.json())
210 //.then(response => console.log(response))
211 .catch((response) => function(response){console.log(response)});
212 console.log("promise");
213 console.log(promise);
214
215 return false;
206 if(!response.ok){
207 alert("ERROR! todo not added!");
208 return;
209 }
210 var jsonresp = await response.json();
211 displayTodoList([jsonresp], false);
212 // let existingEl = document.getElementById("item-"+jsonresp.todo_id);
213 // if(existingEl) {
214 // existingEl.parentNode.removeChild(existingEl);
215 // }
216 216 } }
217 /************************** END ADD FORM ***********************/
217 /************************** END ADD FORM ***********************/
File app/static/item.js deleted (index e69de29..0000000)
File app/static/masonry.pkgd.min.js added (mode: 100644) (index 0000000..53386ae)
1 /*!
2 * Masonry PACKAGED v4.2.2
3 * Cascading grid layout library
4 * https://masonry.desandro.com
5 * MIT License
6 * by David DeSandro
7 */
8
9 !function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<i.length;o++){var r=i[o],s=n&&n[r];s&&(this.off(t,r),delete n[r]),r.apply(this,e)}return this}},e.allOff=function(){delete this._events,delete this._onceEvents},t}),function(t,e){"function"==typeof define&&define.amd?define("get-size/get-size",e):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=-1==t.indexOf("%")&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;u>e;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;i<e.length;i++){var n=e[i],o=n+"MatchesSelector";if(t[o])return o}}();return function(e,i){return e[t](i)}}),function(t,e){"function"==typeof define&&define.amd?define("fizzy-ui-utils/utils",["desandro-matches-selector/matches-selector"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("desandro-matches-selector")):t.fizzyUIUtils=e(t,t.matchesSelector)}(window,function(t,e){var i={};i.extend=function(t,e){for(var i in e)t[i]=e[i];return t},i.modulo=function(t,e){return(t%e+e)%e};var n=Array.prototype.slice;i.makeArray=function(t){if(Array.isArray(t))return t;if(null===t||void 0===t)return[];var e="object"==typeof t&&"number"==typeof t.length;return e?n.call(t):[t]},i.removeFrom=function(t,e){var i=t.indexOf(e);-1!=i&&t.splice(i,1)},i.getParent=function(t,i){for(;t.parentNode&&t!=document.body;)if(t=t.parentNode,e(t,i))return t},i.getQueryElement=function(t){return"string"==typeof t?document.querySelector(t):t},i.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},i.filterFindElements=function(t,n){t=i.makeArray(t);var o=[];return t.forEach(function(t){if(t instanceof HTMLElement){if(!n)return void o.push(t);e(t,n)&&o.push(t);for(var i=t.querySelectorAll(n),r=0;r<i.length;r++)o.push(i[r])}}),o},i.debounceMethod=function(t,e,i){i=i||100;var n=t.prototype[e],o=e+"Timeout";t.prototype[e]=function(){var t=this[o];clearTimeout(t);var e=arguments,r=this;this[o]=setTimeout(function(){n.apply(r,e),delete r[o]},i)}},i.docReady=function(t){var e=document.readyState;"complete"==e||"interactive"==e?setTimeout(t):document.addEventListener("DOMContentLoaded",t)},i.toDashed=function(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()};var o=t.console;return i.htmlInit=function(e,n){i.docReady(function(){var r=i.toDashed(n),s="data-"+r,a=document.querySelectorAll("["+s+"]"),h=document.querySelectorAll(".js-"+r),u=i.makeArray(a).concat(i.makeArray(h)),d=s+"-options",l=t.jQuery;u.forEach(function(t){var i,r=t.getAttribute(s)||t.getAttribute(d);try{i=r&&JSON.parse(r)}catch(a){return void(o&&o.error("Error parsing "+s+" on "+t.className+": "+a))}var h=new e(t,i);l&&l.data(t,n,h)})})},i}),function(t,e){"function"==typeof define&&define.amd?define("outlayer/item",["ev-emitter/ev-emitter","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("ev-emitter"),require("get-size")):(t.Outlayer={},t.Outlayer.Item=e(t.EvEmitter,t.getSize))}(window,function(t,e){"use strict";function i(t){for(var e in t)return!1;return e=null,!0}function n(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}function o(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}var r=document.documentElement.style,s="string"==typeof r.transition?"transition":"WebkitTransition",a="string"==typeof r.transform?"transform":"WebkitTransform",h={WebkitTransition:"webkitTransitionEnd",transition:"transitionend"}[s],u={transform:a,transition:s,transitionDuration:s+"Duration",transitionProperty:s+"Property",transitionDelay:s+"Delay"},d=n.prototype=Object.create(t.prototype);d.constructor=n,d._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},d.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},d.getSize=function(){this.size=e(this.element)},d.css=function(t){var e=this.element.style;for(var i in t){var n=u[i]||i;e[n]=t[i]}},d.getPosition=function(){var t=getComputedStyle(this.element),e=this.layout._getOption("originLeft"),i=this.layout._getOption("originTop"),n=t[e?"left":"right"],o=t[i?"top":"bottom"],r=parseFloat(n),s=parseFloat(o),a=this.layout.size;-1!=n.indexOf("%")&&(r=r/100*a.width),-1!=o.indexOf("%")&&(s=s/100*a.height),r=isNaN(r)?0:r,s=isNaN(s)?0:s,r-=e?a.paddingLeft:a.paddingRight,s-=i?a.paddingTop:a.paddingBottom,this.position.x=r,this.position.y=s},d.layoutPosition=function(){var t=this.layout.size,e={},i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop"),o=i?"paddingLeft":"paddingRight",r=i?"left":"right",s=i?"right":"left",a=this.position.x+t[o];e[r]=this.getXValue(a),e[s]="";var h=n?"paddingTop":"paddingBottom",u=n?"top":"bottom",d=n?"bottom":"top",l=this.position.y+t[h];e[u]=this.getYValue(l),e[d]="",this.css(e),this.emitEvent("layout",[this])},d.getXValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&!e?t/this.layout.size.width*100+"%":t+"px"},d.getYValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&e?t/this.layout.size.height*100+"%":t+"px"},d._transitionTo=function(t,e){this.getPosition();var i=this.position.x,n=this.position.y,o=t==this.position.x&&e==this.position.y;if(this.setPosition(t,e),o&&!this.isTransitioning)return void this.layoutPosition();var r=t-i,s=e-n,a={};a.transform=this.getTranslate(r,s),this.transition({to:a,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},d.getTranslate=function(t,e){var i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop");return t=i?t:-t,e=n?e:-e,"translate3d("+t+"px, "+e+"px, 0)"},d.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},d.moveTo=d._transitionTo,d.setPosition=function(t,e){this.position.x=parseFloat(t),this.position.y=parseFloat(e)},d._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},d.transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return void this._nonTransition(t);var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var n=this.element.offsetHeight;n=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var l="opacity,"+o(a);d.enableTransition=function(){if(!this.isTransitioning){var t=this.layout.options.transitionDuration;t="number"==typeof t?t+"ms":t,this.css({transitionProperty:l,transitionDuration:t,transitionDelay:this.staggerDelay||0}),this.element.addEventListener(h,this,!1)}},d.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},d.onotransitionend=function(t){this.ontransitionend(t)};var c={"-webkit-transform":"transform"};d.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,n=c[t.propertyName]||t.propertyName;if(delete e.ingProperties[n],i(e.ingProperties)&&this.disableTransition(),n in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[n]),n in e.onEnd){var o=e.onEnd[n];o.call(this),delete e.onEnd[n]}this.emitEvent("transitionEnd",[this])}},d.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(h,this,!1),this.isTransitioning=!1},d._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var f={transitionProperty:"",transitionDuration:"",transitionDelay:""};return d.removeTransitionStyles=function(){this.css(f)},d.stagger=function(t){t=isNaN(t)?0:t,this.staggerDelay=t+"ms"},d.removeElem=function(){this.element.parentNode.removeChild(this.element),this.css({display:""}),this.emitEvent("remove",[this])},d.remove=function(){return s&&parseFloat(this.layout.options.transitionDuration)?(this.once("transitionEnd",function(){this.removeElem()}),void this.hide()):void this.removeElem()},d.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("visibleStyle");e[i]=this.onRevealTransitionEnd,this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0,onTransitionEnd:e})},d.onRevealTransitionEnd=function(){this.isHidden||this.emitEvent("reveal")},d.getHideRevealTransitionEndProperty=function(t){var e=this.layout.options[t];if(e.opacity)return"opacity";for(var i in e)return i},d.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("hiddenStyle");e[i]=this.onHideTransitionEnd,this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:e})},d.onHideTransitionEnd=function(){this.isHidden&&(this.css({display:"none"}),this.emitEvent("hide"))},d.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},n}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("outlayer/outlayer",["ev-emitter/ev-emitter","get-size/get-size","fizzy-ui-utils/utils","./item"],function(i,n,o,r){return e(t,i,n,o,r)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter"),require("get-size"),require("fizzy-ui-utils"),require("./item")):t.Outlayer=e(t,t.EvEmitter,t.getSize,t.fizzyUIUtils,t.Outlayer.Item)}(window,function(t,e,i,n,o){"use strict";function r(t,e){var i=n.getQueryElement(t);if(!i)return void(h&&h.error("Bad element for "+this.constructor.namespace+": "+(i||t)));this.element=i,u&&(this.$element=u(this.element)),this.options=n.extend({},this.constructor.defaults),this.option(e);var o=++l;this.element.outlayerGUID=o,c[o]=this,this._create();var r=this._getOption("initLayout");r&&this.layout()}function s(t){function e(){t.apply(this,arguments)}return e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e}function a(t){if("number"==typeof t)return t;var e=t.match(/(^\d*\.?\d*)(\w*)/),i=e&&e[1],n=e&&e[2];if(!i.length)return 0;i=parseFloat(i);var o=m[n]||1;return i*o}var h=t.console,u=t.jQuery,d=function(){},l=0,c={};r.namespace="outlayer",r.Item=o,r.defaults={containerStyle:{position:"relative"},initLayout:!0,originLeft:!0,originTop:!0,resize:!0,resizeContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}};var f=r.prototype;n.extend(f,e.prototype),f.option=function(t){n.extend(this.options,t)},f._getOption=function(t){var e=this.constructor.compatOptions[t];return e&&void 0!==this.options[e]?this.options[e]:this.options[t]},r.compatOptions={initLayout:"isInitLayout",horizontal:"isHorizontal",layoutInstant:"isLayoutInstant",originLeft:"isOriginLeft",originTop:"isOriginTop",resize:"isResizeBound",resizeContainer:"isResizingContainer"},f._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),n.extend(this.element.style,this.options.containerStyle);var t=this._getOption("resize");t&&this.bindResize()},f.reloadItems=function(){this.items=this._itemize(this.element.children)},f._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,n=[],o=0;o<e.length;o++){var r=e[o],s=new i(r,this);n.push(s)}return n},f._filterFindItemElements=function(t){return n.filterFindElements(t,this.options.itemSelector)},f.getItemElements=function(){return this.items.map(function(t){return t.element})},f.layout=function(){this._resetLayout(),this._manageStamps();var t=this._getOption("layoutInstant"),e=void 0!==t?t:!this._isLayoutInited;this.layoutItems(this.items,e),this._isLayoutInited=!0},f._init=f.layout,f._resetLayout=function(){this.getSize()},f.getSize=function(){this.size=i(this.element)},f._getMeasurement=function(t,e){var n,o=this.options[t];o?("string"==typeof o?n=this.element.querySelector(o):o instanceof HTMLElement&&(n=o),this[t]=n?i(n)[e]:o):this[t]=0},f.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},f._getItemsForLayout=function(t){return t.filter(function(t){return!t.isIgnored})},f._layoutItems=function(t,e){if(this._emitCompleteOnItems("layout",t),t&&t.length){var i=[];t.forEach(function(t){var n=this._getItemLayoutPosition(t);n.item=t,n.isInstant=e||t.isLayoutInstant,i.push(n)},this),this._processLayoutQueue(i)}},f._getItemLayoutPosition=function(){return{x:0,y:0}},f._processLayoutQueue=function(t){this.updateStagger(),t.forEach(function(t,e){this._positionItem(t.item,t.x,t.y,t.isInstant,e)},this)},f.updateStagger=function(){var t=this.options.stagger;return null===t||void 0===t?void(this.stagger=0):(this.stagger=a(t),this.stagger)},f._positionItem=function(t,e,i,n,o){n?t.goTo(e,i):(t.stagger(o*this.stagger),t.moveTo(e,i))},f._postLayout=function(){this.resizeContainer()},f.resizeContainer=function(){var t=this._getOption("resizeContainer");if(t){var e=this._getContainerSize();e&&(this._setContainerMeasure(e.width,!0),this._setContainerMeasure(e.height,!1))}},f._getContainerSize=d,f._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},f._emitCompleteOnItems=function(t,e){function i(){o.dispatchEvent(t+"Complete",null,[e])}function n(){s++,s==r&&i()}var o=this,r=e.length;if(!e||!r)return void i();var s=0;e.forEach(function(e){e.once(t,n)})},f.dispatchEvent=function(t,e,i){var n=e?[e].concat(i):i;if(this.emitEvent(t,n),u)if(this.$element=this.$element||u(this.element),e){var o=u.Event(e);o.type=t,this.$element.trigger(o,i)}else this.$element.trigger(t,i)},f.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},f.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},f.stamp=function(t){t=this._find(t),t&&(this.stamps=this.stamps.concat(t),t.forEach(this.ignore,this))},f.unstamp=function(t){t=this._find(t),t&&t.forEach(function(t){n.removeFrom(this.stamps,t),this.unignore(t)},this)},f._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=n.makeArray(t)):void 0},f._manageStamps=function(){this.stamps&&this.stamps.length&&(this._getBoundingRect(),this.stamps.forEach(this._manageStamp,this))},f._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},f._manageStamp=d,f._getElementOffset=function(t){var e=t.getBoundingClientRect(),n=this._boundingRect,o=i(t),r={left:e.left-n.left-o.marginLeft,top:e.top-n.top-o.marginTop,right:n.right-e.right-o.marginRight,bottom:n.bottom-e.bottom-o.marginBottom};return r},f.handleEvent=n.handleEvent,f.bindResize=function(){t.addEventListener("resize",this),this.isResizeBound=!0},f.unbindResize=function(){t.removeEventListener("resize",this),this.isResizeBound=!1},f.onresize=function(){this.resize()},n.debounceMethod(r,"onresize",100),f.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},f.needsResizeLayout=function(){var t=i(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},f.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},f.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},f.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},f.reveal=function(t){if(this._emitCompleteOnItems("reveal",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.reveal()})}},f.hide=function(t){if(this._emitCompleteOnItems("hide",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.hide()})}},f.revealItemElements=function(t){var e=this.getItems(t);this.reveal(e)},f.hideItemElements=function(t){var e=this.getItems(t);this.hide(e)},f.getItem=function(t){for(var e=0;e<this.items.length;e++){var i=this.items[e];if(i.element==t)return i}},f.getItems=function(t){t=n.makeArray(t);var e=[];return t.forEach(function(t){var i=this.getItem(t);i&&e.push(i)},this),e},f.remove=function(t){var e=this.getItems(t);this._emitCompleteOnItems("remove",e),e&&e.length&&e.forEach(function(t){t.remove(),n.removeFrom(this.items,t)},this)},f.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="",this.items.forEach(function(t){t.destroy()}),this.unbindResize();var e=this.element.outlayerGUID;delete c[e],delete this.element.outlayerGUID,u&&u.removeData(this.element,this.constructor.namespace)},r.data=function(t){t=n.getQueryElement(t);var e=t&&t.outlayerGUID;return e&&c[e]},r.create=function(t,e){var i=s(r);return i.defaults=n.extend({},r.defaults),n.extend(i.defaults,e),i.compatOptions=n.extend({},r.compatOptions),i.namespace=t,i.data=r.data,i.Item=s(o),n.htmlInit(i,t),u&&u.bridget&&u.bridget(t,i),i};var m={ms:1,s:1e3};return r.Item=o,r}),function(t,e){"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("outlayer"),require("get-size")):t.Masonry=e(t.Outlayer,t.getSize)}(window,function(t,e){var i=t.create("masonry");i.compatOptions.fitWidth="isFitWidth";var n=i.prototype;return n._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var t=0;t<this.cols;t++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0},n.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}var n=this.columnWidth+=this.gutter,o=this.containerWidth+this.gutter,r=o/n,s=n-o%n,a=s&&1>s?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i});
File app/static/styles.css changed (mode: 100755) (index a98402c..c1aed7d)
66 66 margin: auto; margin: auto;
67 67 padding: 20px; padding: 20px;
68 68 border: 1px solid #888; border: 1px solid #888;
69 width: 80%;
69 width: 50%;
70 70 } }
71 71
72 72 /* The Close Button */ /* The Close Button */
 
... ... body{
92 92 } }
93 93 .box { .box {
94 94 float: left; float: left;
95 width: 25%;
95 width: 300px;
96 96 box-sizing: border-box; box-sizing: border-box;
97 min-width: 175px;
97 min-width: 285px;
98 98 } }
99 99 .box .box-border { .box .box-border {
100 100 border: 1px solid #c4c2c2; border: 1px solid #c4c2c2;
 
... ... body{
105 105 .box .contents { .box .contents {
106 106 padding: 5px; padding: 5px;
107 107 } }
108 .box .checkbox-item .fa-plus-square {
109 display: none;
110 }
111 /*.box .contents .description fieldset {
112 max-height: 75px;
113 overflow: auto;
114 }*/
108 115 .box .title { .box .title {
109 116 font-weight: bold; font-weight: bold;
110 117 font-size: 16px; font-size: 16px;
 
... ... body{
138 145 cursor: pointer; cursor: pointer;
139 146 padding: 3px; padding: 3px;
140 147 } }
141 #list-todos {
142 overflow: hidden;
148 .box fieldset,
149 .box textarea {
150 border: 0;
151 }
152 .box fieldset{
153 width: auto;
154 }
155 .box input,
156 .box textarea {
157 pointer-events: none;
143 158 } }
159 /*#list-todos {
160 overflow: hidden;
161 }*/
144 162
145 163 .header { .header {
146 164 /* background-color: #1c7b81; /* background-color: #1c7b81;
 
... ... body{
163 181 width: 100%; width: 100%;
164 182 display: block display: block
165 183 } }
166 .todo-form input[type=text] {
184 .todo-form input[type=text],
185 .box input[type=text] {
167 186 border-width: 0 0 1px 0; border-width: 0 0 1px 0;
168 187 } }
188 input#title {
189 font-weight: bold;
190 font-size: 16px;
191 }
169 192 #note-html-contents { #note-html-contents {
170 193 border-width: 1px; border-width: 1px;
171 border-color: #424040;
194 border-color: #a2a3a2;
172 195 border-style: solid; border-style: solid;
196 padding: 5px;
173 197 } }
174 198 #note-html-contents * { #note-html-contents * {
175 199 border-width: 0; border-width: 0;
200 padding: 0;
176 201 } }
177 202 .preview { .preview {
178 203 max-height: 200px; max-height: 200px;
File app/static/todolist.js added (mode: 100755) (index 0000000..f5e2f70)
1 var todoListArray = [];
2
3 function editTodo(event){
4 var todoEl = event.target.closest(".box");
5 const todoId = todoEl.id.replace("item-", "");
6 const found = todoListArray.find(element => element.id==todoId);
7 if(!found) {
8 alert ("Item not found");
9 }
10 var todoTitleInput = document.getElementById("title");
11 todoTitleInput.setAttribute("value", found.title);
12 var todoStatusInput = document.getElementById("status");
13 todoStatusInput.setAttribute("value", found.status);
14 var todoBodyInput = document.getElementById("body");
15 todoBodyInput.setAttribute("body", found.body);
16 var todoBodyHtml = document.getElementById("note-html-contents");
17 todoBodyHtml.innerHTML = found.body;
18 document.getElementById("todoForm").action = '/static/edit/'+todoId;
19 showModal();
20 }
21
22 async function deleteTodo(){
23 alert("delete "+event.target.closest('.box').id);
24 var response = await fetch('/static/delete/'+event.target.closest('.box').id.replace("item-",""), {
25 method: 'POST', // or 'PUT'
26 //body: formData, //JSON.stringify(formData), // data can be `string` or {object}!
27 headers: {
28 'Content-Type': 'application/json'
29 }
30 });
31
32 if(!response.ok){
33 alert("ERROR! todo not deleted!");
34 return;
35 }
36 var jsonresp = await response.json();
37 console.log(jsonresp);
38 var deletedElement = document.getElementById("item-"+jsonresp.todo_id);
39 if(deletedElement) {
40 deletedElement.parentNode.removeChild(deletedElement);
41 }
42 redrawList();
43 }
44 async function copyTodo(){
45 alert("copy "+event.target.closest('.box').id);
46 var response = await fetch('/static/copy/'+event.target.closest('.box').id.replace("item-",""), {
47 method: 'POST', // or 'PUT'
48 //body: formData, //JSON.stringify(formData), // data can be `string` or {object}!
49 headers: {
50 'Content-Type': 'application/json'
51 }
52 });
53 if(!response.ok){
54 alert("ERROR! todo not added!");
55 return;
56 }
57 var jsonresp = await response.json();
58 displayTodoList([jsonresp], false);
59 todoListArray.push(jsonresp);
60 }
61 function displayTodoList(listOfItems, bReset) {
62 console.log("display todo list");
63 console.log(listOfItems);
64
65 // Get the template element:
66 //temp = document.getElementsByTagName("template")[0];
67 var temp = document.getElementById("todo-detail");
68 var TodoList = document.getElementById("list-todos");
69 if(bReset) {
70 while(TodoList.hasChildNodes())
71 {
72 TodoList.removeChild(TodoList.lastChild);
73 }
74 }
75
76 // Get the DIV element from the template:
77 var boxEl = temp.content.querySelector(".box");
78
79 var tempelement = document.createElement('div');
80
81 // For each item in the array:
82 for (i = 0; i < listOfItems.length; i++) {
83 // Create a new node, based on the template:
84 var boxElCopy = document.importNode(boxEl, true);
85 boxElCopy.id = 'item-'+listOfItems[i].id;
86 // Add data from the array:
87 var titleEl = boxElCopy.querySelector('.title');
88 titleEl.textContent += listOfItems[i].title;
89 var descriptionEl = boxElCopy.querySelector('.description');
90 tempelement.innerHTML = listOfItems[i].body;
91 descriptionEl.innerHTML += listOfItems[i].body;//tempelement.textContent;
92
93 var filesEl = boxElCopy.querySelector('.files');
94 var fileTemplate = filesEl.querySelector('.file');
95 filesEl.removeChild(fileTemplate);
96 if (typeof listOfItems[i].files != "undefined") {
97 for (j = 0; j < listOfItems[i].files.length; j++) {
98 var fileElCopy = document.importNode(fileTemplate, true);
99 console.log(fileElCopy);
100 fileElCopy.querySelector('.filename').textContent = listOfItems[i].files[j];
101 filesEl.appendChild(fileElCopy);
102 }
103 }
104 // Append the new node wherever you like:
105 let existing = document.getElementById(boxElCopy.id);
106 if(existing) {
107 existing.parentNode.replaceChild(boxElCopy,existing);
108 } else {
109 TodoList.appendChild(boxElCopy);
110 }
111 }
112
113 redrawList();
114 }
115
116 function redrawList() {
117 var msnry = new Masonry( document.getElementById("list-todos"), {
118 // options
119 itemSelector: '.box',
120 gutter: 10,
121 fitWidth: true
122 });
123 console.log(msnry);
124 }
125
126 async function loadTodoList() {
127 console.log("load Todo list");
128 var response = await fetchTodos();
129 var jsonresponse = response;
130 console.log(jsonresponse);
131 todoListArray = jsonresponse;
132 displayTodoList(jsonresponse, true);
133 }
134 async function fetchTodos() {
135 console.log("fetch todos");
136 var response = await fetch('/static/getTodos');
137 if(!response.ok){
138 return [];
139 }
140 var jsonresp = await response.json();
141 console.log(jsonresp);
142 return jsonresp;
143 }
144
145 loadTodoList();
File app/templates/index.html changed (mode: 100755) (index 0be8cdb..e7c7d71)
7 7 <link href="{{ url_for('static', filename='fontawesome.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='fontawesome.css') }}" rel="stylesheet">
8 8 <link href="{{ url_for('static', filename='fontawesome-all.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='fontawesome-all.css') }}" rel="stylesheet">
9 9 <link href="{{ url_for('static', filename='fontawesome-solid.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='fontawesome-solid.css') }}" rel="stylesheet">
10
11 <script defer src="{{ url_for('static', filename='masonry.pkgd.min.js') }}"></script>
10 12 <script defer src="{{ url_for('static', filename='fontawesome-all.js') }}"></script> <script defer src="{{ url_for('static', filename='fontawesome-all.js') }}"></script>
11 13 <script defer src="{{ url_for('static', filename='index.js') }}"></script> <script defer src="{{ url_for('static', filename='index.js') }}"></script>
14 <script defer src="{{ url_for('static', filename='todolist.js') }}"></script>
12 15 <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet">
13 16 </head> </head>
14 17
 
42 45 </div> </div>
43 46 </div> </div>
44 47 <div class="footer"> <div class="footer">
45 <i class="far fa-edit" onclick="editTodo()"></i>
46 <i class="far fa-trash-alt" onclick="deleteTodo()"></i>
47 <i class="far fa-clone" onclick="copyTodo()"></i>
48 <i class="far fa-edit" onclick="editTodo(event)"></i>
49 <i class="far fa-trash-alt" onclick="deleteTodo(event)"></i>
50 <i class="far fa-clone" onclick="copyTodo(event)"></i>
48 51 </div> </div>
49 52 </div> </div>
50 53 </div> </div>
 
86 89 contents: 'This is the content of the second todo <ol><li>first</li><li>second</li>' + contents: 'This is the content of the second todo <ol><li>first</li><li>second</li>' +
87 90 '<li>third</li><li>fourth</li></ol>' '<li>third</li><li>fourth</li></ol>'
88 91 } }
89 {% for todo in todos %}
92 {#% for todo in todos %}
90 93 ,{ ,{
91 94 id: "{{todo.id}}", id: "{{todo.id}}",
92 95 title: "{{todo.title}}", title: "{{todo.title}}",
93 96 contents: "{{todo.body}}" contents: "{{todo.body}}"
94 97 } }
95 {% endfor %}
98 {% endfor %#}
96 99 ]; ];
97 function editTodo(){
98 alert("edit "+event.target.closest('.box').id);
99 console.log("EDIT");
100 const formData = new FormData();
101 //const fileField = document.querySelector('input[type="file"]');
102 formData.append('id', event.target.closest('.box').id);
103 promise = fetch('/static/edit/'+event.target.closest('.box').id.replace("item-",""), {
104 method: 'POST', // or 'PUT'
105 body: formData, //JSON.stringify(formData), // data can be `string` or {object}!
106 headers: {
107 'Content-Type': 'application/json'
108 }
109 });
110 promise.then((response) => function(response){
111 console.log("first promise");
112 console.log(response.clone());
113 if(response.ok){
114 return response;
115 }
116 console.log("ERROR");
117 throw new Error("there was an error");
118 })
119 //.then(response => response.json())
120 //.then(response => console.log(response))
121 .catch((response) => function(response){console.log(response)});
122 console.log("promise");
123 console.log(promise);
124 }
125 function deleteTodo(){
126 alert("delete "+event.target.closest('.box').id);
127 promise = fetch('/static/delete/'+event.target.closest('.box').id.replace("item-",""), {
128 method: 'POST', // or 'PUT'
129 //body: formData, //JSON.stringify(formData), // data can be `string` or {object}!
130 headers: {
131 'Content-Type': 'application/json'
132 }
133 });
134 promise.then((response) => function(response){
135 console.log("first promise");
136 console.log(response.clone());
137 if(response.ok){
138 return response;
139 }
140 console.log("ERROR");
141 throw new Error("there was an error");
142 })
143 //.then(response => response.json())
144 //.then(response => console.log(response))
145 .catch((response) => function(response){console.log(response)});
146 console.log("promise");
147 console.log(promise);
148 }
149 function copyTodo(){
150 alert("copy "+event.target.closest('.box').id);
151 promise = fetch('/static/copy/'+event.target.closest('.box').id.replace("item-",""), {
152 method: 'POST', // or 'PUT'
153 //body: formData, //JSON.stringify(formData), // data can be `string` or {object}!
154 headers: {
155 'Content-Type': 'application/json'
156 }
157 });
158 promise.then((response) => function(response){
159 console.log("first promise");
160 console.log(response.clone());
161 if(response.ok){
162 return response;
163 }
164 console.log("ERROR");
165 throw new Error("there was an error");
166 })
167 //.then(response => response.json())
168 //.then(response => console.log(response))
169 .catch((response) => function(response){console.log(response)});
170 console.log("promise");
171 console.log(promise);
172 }
173 function displayTodoList(listOfItems) {
174 console.log("display todo list");
175 console.log(listOfItems);
176 return;
177 // Get the template element:
178 //temp = document.getElementsByTagName("template")[0];
179 var temp = document.getElementById("todo-detail");
180 var TodoList = document.getElementById("list-todos");
181 console.log("detail el");
182 console.log(temp);
183 console.log(TodoList);
184
185 // Get the DIV element from the template:
186 var boxEl = temp.content.querySelector(".box");
187
188 var tempelement = document.createElement('div');
189
190 // For each item in the array:
191 for (i = 0; i < listOfItems.length; i++) {
192 // Create a new node, based on the template:
193 var boxElCopy = document.importNode(boxEl, true);
194 boxElCopy.id = 'item-'+listOfItems[i].id;
195 // Add data from the array:
196 var titleEl = boxElCopy.querySelector('.title');
197 titleEl.textContent += listOfItems[i].title;
198 var descriptionEl = boxElCopy.querySelector('.description');
199 tempelement.innerHTML = listOfItems[i].contents;
200 descriptionEl.innerHTML += tempelement.textContent;
201 console.log("listOfItems[i].contents");
202 console.log(listOfItems[i].contents);
203
204 console.log(tempelement.textContent);
205 var filesEl = boxElCopy.querySelector('.files');
206 var fileTemplate = filesEl.querySelector('.file');
207 filesEl.removeChild(fileTemplate);
208 if (typeof listOfItems[i].files != "undefined") {
209 for (j = 0; j < listOfItems[i].files.length; j++) {
210 var fileElCopy = document.importNode(fileTemplate, true);
211 console.log(fileElCopy);
212 fileElCopy.querySelector('.filename').textContent = listOfItems[i].files[j];
213 filesEl.appendChild(fileElCopy);
214 }
215 }
216
217 // Append the new node wherever you like:
218 TodoList.appendChild(boxElCopy);
219 }
220 }
221 displayTodoList(arrayData);
100 loadTodoList();
222 101 </script> </script>
223
102
224 103 </div> </div>
225 104 <div> <div>
226 105 &#x1F600; &#x1F600;
227 106 &#128060; &#128060;
228 &#9989;
229 &#128393;
107 &#9989;
108 &#128393;
230 109 </div> </div>
231 110
232 <button onclick="fetchTodos()">Fetch todos</button>
111 <button onclick="loadTodoList()">Fetch todos</button>
233 112 <button id="myBtn">Show modal</button> <button id="myBtn">Show modal</button>
234 113 <script> <script>
235 114
236 function fetchTodos() {
237 console.log("fetch todos");
238 promise = fetch('/static/getTodos');
239 promise.then((response) => function(response){
240 console.log("first promise");
241 console.log(response.clone());
242 if(response.ok){
243 return response;
244 }
245 console.log("ERROR");
246 throw new Error("there was an error");
247 })
248 //.then(response => response.json())
249 //.then(response => console.log(response))
250 .catch((response) => function(response){console.log(response)});
251 console.log("promise");
252 console.log(promise);
253 }
115
254 116 function addCheckboxTodoItem(el){ function addCheckboxTodoItem(el){
255 117 var checkboxItemTemplateEl = document.getElementById("todo-checkbox-item"); var checkboxItemTemplateEl = document.getElementById("todo-checkbox-item");
256 118 var checkboxItemEl = checkboxItemTemplateEl.content.querySelector(".checkbox-item"); var checkboxItemEl = checkboxItemTemplateEl.content.querySelector(".checkbox-item");
Hints:
Before first commit, do not forget to setup your git environment:
git config --global user.name "your_name_here"
git config --global user.email "your@email_here"

Clone this repository using HTTP(S):
git clone https://rocketgit.com/user/raluca.pacurar/TodoList_flask

Clone this repository using ssh (do not forget to upload a key first):
git clone ssh://rocketgit@ssh.rocketgit.com/user/raluca.pacurar/TodoList_flask

Clone this repository using git:
git clone git://git.rocketgit.com/user/raluca.pacurar/TodoList_flask

You are allowed to anonymously push to this repository.
This means that your pushed commits will automatically be transformed into a merge request:
... clone the repository ...
... make some changes and some commits ...
git push origin main