Skip to content

Commit c9c7ea9

Browse files
lieuzhenghonglieuzhenghong
committed
Add edit save and delete save function
1 parent a049c0a commit c9c7ea9

File tree

5 files changed

+114
-26
lines changed

5 files changed

+114
-26
lines changed

‎dist/index.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<img v-bind:src='defect_src(label)' width='30'>
7979
</td>
8080
<td>
81-
<a class='editable' v-on:click='delete_row(label)'> X
81+
<a class='editable delete' v-on:click='delete_row(label)'> X
8282
</a>
8383
</td>
8484
</tr>
@@ -142,12 +142,16 @@
142142
<tr>
143143
<th> Save name </th>
144144
<th> Save </th>
145-
<th> Load</th>
145+
<th> Load </th>
146+
<th> Delete </th>
146147
</tr>
147-
<tr v-for='(save, index) in saves'>
148-
<td v-on:mouseover='handle_save_click(save)'> {{save}}
148+
<tr v-for='(save, index) in saves'
149+
v-on:mouseover='handle_save_mouseover(save)'
150+
>
151+
<td v-on:click='rename_save(save)'> {{save}}
149152
<td> <button v-on:click='save_data(save)'>Save</button>
150153
<td> <button v-on:click='load_data(save)'>Load</button>
154+
<td> <a class='editable delete' v-on:click='delete_instance(save)'>X</a>
151155
</tr>
152156
</tbody>
153157
</table>

‎dist/renderer.js

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7332,11 +7332,42 @@ let vue = new __WEBPACK_IMPORTED_MODULE_9_vue__["a" /* default */]({
73327332
this.saves = instance_names;
73337333
});
73347334
},
7335-
handle_save_click: function(save) {
7335+
handle_save_mouseover: function(save) {
73367336
local_db.get_instance(save).getItem('plan').then((value) => {
73377337
this.save_preview_src = value;
73387338
});
73397339
},
7340+
rename_save: function(save) {
7341+
// Renaming a save is quite involved
7342+
// 1. Prompt for new name of save
7343+
// 2. Create a new instance
7344+
// 3. Populate the new instance with the values of the old instance
7345+
// 4. Add a pointer to the new instance in instances_db
7346+
// 5. Delete the old instance and the pointer to it in instances_db
7347+
const instance = local_db.get_instance(save);
7348+
__WEBPACK_IMPORTED_MODULE_8_vex_js___default.a.dialog.prompt({
7349+
message: 'Enter new name for save. If save name already exists, ' +
7350+
'it will override the previous save!',
7351+
callback: (new_name) => {
7352+
const new_instance = __WEBPACK_IMPORTED_MODULE_0_localforage___default.a.createInstance({
7353+
name: new_name
7354+
});
7355+
instance.iterate( (value, key) => {
7356+
new_instance.setItem(key, value);
7357+
});
7358+
// Add pointer to the new save in index_db
7359+
const instances_db = __WEBPACK_IMPORTED_MODULE_0_localforage___default.a.createInstance({
7360+
name: 'instances'
7361+
});
7362+
instances_db.getItem('instances').then((instances) => {
7363+
instances_db.setItem('instances', instances.concat(new_name));
7364+
// Clear the old key and the reference to it in instances_db
7365+
this.delete_instance(save);
7366+
this.update_saves();
7367+
});
7368+
}
7369+
});
7370+
},
73407371
sort_data: function(sort_by) {
73417372
this.labels = this.labels.sort( (a,b) => {
73427373
if (typeof a[sort_by] === 'number') {
@@ -7644,11 +7675,20 @@ let vue = new __WEBPACK_IMPORTED_MODULE_9_vue__["a" /* default */]({
76447675
});
76457676
instances_db.clear().then(() => this.update_saves());
76467677
},
7647-
/*
76487678
delete_instance: function(db_name) {
7649-
//TODO
7679+
const instances_db = __WEBPACK_IMPORTED_MODULE_0_localforage___default.a.createInstance({
7680+
name: 'instances'
7681+
});
7682+
instances_db.getItem('instances').then((instances) => {
7683+
let idx = instances.indexOf(db_name);
7684+
let new_instances = instances;
7685+
new_instances.splice(idx, 1);
7686+
instances_db.setItem('instances', new_instances).then(() => {
7687+
local_db.get_instance(db_name).clear();
7688+
this.update_saves();
7689+
});
7690+
});
76507691
},
7651-
*/
76527692
save_data: function(db_name = new Date().toISOString()) {
76537693
const db = local_db.create_instance(db_name);
76547694
let p1 = db.setItem('building', globals.BUILDING);
@@ -7657,7 +7697,9 @@ let vue = new __WEBPACK_IMPORTED_MODULE_9_vue__["a" /* default */]({
76577697
let p4 = db.setItem('id', globals.ID);
76587698
let p5 = db.setItem('plan', globals.PLAN);
76597699

7660-
Promise.all([p1, p2, p3, p4, p5]).then(() => this.update_saves());
7700+
Promise.all([p1, p2, p3, p4, p5]).then(() => {
7701+
this.update_saves();
7702+
});
76617703
},
76627704
load_data: function (db_name) {
76637705
let db = local_db.get_instance(db_name);
@@ -19571,7 +19613,7 @@ exports = module.exports = __webpack_require__(9)(undefined);
1957119613

1957219614

1957319615
// module
19574-
exports.push([module.i, "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n height: 100%;\n width: 100%;\n}\n\n\ncanvas {\n align-self: flex-start;\n padding: 0;\n margin: 0;\n border: 1px solid black; display: block;\n background-color: rgba(220, 220, 220, 1);\n}\n\nnav {\n width: 100%;\n position: fixed;\n}\n\nnav li {\n display: inline-block;\n min-width: 200px;\n height: 40px;\n text-align: center;\n line-height: 40px;/* centers text vertically */\n font-size: 24px;\n border: 1px solid black;\n border-bottom: none;\n border-radius: 0.5rem 0.5rem 0 0;\n margin-right: 2px;\n padding-left: 10px;\n padding-right: 10px;\n}\n\nnav li:hover {\n cursor: pointer;\n background-color: rgba(240, 220, 200, 1);\n}\n\nnav .active {\n background-color: rgba(240, 220, 200, 1);\n}\n\n\n.hidden {\n /*\n display: none;\n */\n}\n\n.wrapper {\n margin-left: 10px;\n margin-right: 10px;\n height: 100%;\n display: flex;\n}\n\n.page-1, .page-2, .page-3 {\n margin-top: 40px; \n height: calc(100%-40px);\n width: 100%;\n } \n\n.page-1 {\n display: flex;\n}\n\n.col1, .col2 {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n padding-bottom: 10px;\n}\n\n.col1 {\n width:100%;\n}\n\n.col2 {\n width: 400px;\n }\n\n.button {\n width: 0.1px;\n height: 0.1px;\n opacity: 0;\n overflow: hidden;\n z-index: -1;\n}\n\n.button + label, .label {\n font-size: 30px;\n display: inline-block;\n border: 2px solid black;\n padding: 10px;\n background-color: rgba(255, 255, 255, 1.0);\n color: black;\n text-decoration: none;\n}\n.button + label, .label{\n cursor:pointer;\n}\n.button + label:hover, .label:hover{\n background-color: rgba(240, 220, 200, 1);\n}\n\n#img-preview {\n min-height: 300px;\n min-width: 300px;\n border: 2px solid black;\n}\n\n.edit-bar {\n}\n\n.nav {\n font-size: 30px;\n width: 80px;\n height: 80px;\n display: inline-block;\n border: 2px solid black;\n padding: 10px;\n background-color: rgba(255, 255, 255, 1.0);\n color: black;\n text-decoration: none;\n cursor:pointer;\n}\n\n.nav:hover {\n background-color: rgba(240, 220, 200, 1);\n}\n\n", ""]);
19616+
exports.push([module.i, "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n height: 100%;\n width: 100%;\n}\n\n\ncanvas {\n align-self: flex-start;\n padding: 0;\n margin: 0;\n border: 1px solid black; display: block;\n background-color: rgba(220, 220, 220, 1);\n}\n\nnav {\n width: 100%;\n position: fixed;\n}\n\nnav li {\n display: inline-block;\n min-width: 200px;\n height: 40px;\n text-align: center;\n line-height: 40px;/* centers text vertically */\n font-size: 24px;\n border: 1px solid black;\n border-bottom: none;\n border-radius: 0.5rem 0.5rem 0 0;\n margin-right: 2px;\n padding-left: 10px;\n padding-right: 10px;\n}\n\nnav li:hover {\n cursor: pointer;\n background-color: rgba(240, 220, 200, 1);\n}\n\nnav .active {\n background-color: rgba(240, 220, 200, 1);\n}\n\n\n.hidden {\n /*\n display: none;\n */\n}\n\n.wrapper {\n margin-left: 10px;\n margin-right: 10px;\n height: 100%;\n display: flex;\n}\n\n.page-1, .page-2, .page-3 {\n margin-top: 40px; \n height: calc(100%-40px);\n width: 100%;\n } \n\n.page-1 {\n display: flex;\n}\n\n.col1, .col2 {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n padding-bottom: 10px;\n}\n\n.col1 {\n width:100%;\n}\n\n.col2 {\n width: 400px;\n }\n\n.button {\n width: 0.1px;\n height: 0.1px;\n opacity: 0;\n overflow: hidden;\n z-index: -1;\n}\n\n.button + label, .label {\n font-size: 30px;\n display: inline-block;\n border: 2px solid black;\n padding: 10px;\n background-color: rgba(255, 255, 255, 1.0);\n color: black;\n text-decoration: none;\n}\n.button + label, .label{\n cursor:pointer;\n}\n.button + label:hover, .label:hover{\n background-color: rgba(240, 220, 200, 1);\n}\n\n#img-preview {\n min-height: 300px;\n min-width: 300px;\n border: 2px solid black;\n}\n\n.edit-bar {\n}\n\n.nav {\n font-size: 30px;\n width: 80px;\n height: 80px;\n display: inline-block;\n border: 2px solid black;\n padding: 10px;\n background-color: rgba(255, 255, 255, 1.0);\n color: black;\n text-decoration: none;\n cursor:pointer;\n}\n\n.nav:hover {\n background-color: rgba(240, 220, 200, 1);\n}\n\n.delete {\n text-align: center;\n color: red;\n text-decoration: underline;\n}\n\n.delete:hover {\n cursor: pointer;\n}\n\n", ""]);
1957519617

1957619618
// exports
1957719619

@@ -19711,7 +19753,7 @@ exports = module.exports = __webpack_require__(9)(undefined);
1971119753

1971219754

1971319755
// module
19714-
exports.push([module.i, "#tag-tables, #tag-tables tr, #tag-tables td {\n width: 400px;\n font-family: monospace;\n text-align: center;\n border-collapse: collapse;\n border: 1px solid black;\n}\n\n#tag-tables thead {\n display: block;\n}\n\n#tag-tables tbody {\n display: block;\n height: 425px;\n max-height: 425px;\n overflow-y:scroll;\n}\n\n#tag-tables tr:hover {\n background-color: rgba(200, 200, 200, 1);\n}\n#tag-tables td .editable {\n text-decoration: underline; \n}\n\n#tag-tables td {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n#tag-tables a {\n text-align: center;\n color: red;\n text-decoration: underline;\n}\n\n#tag-tables a:hover {\n cursor: pointer;\n}\n\n#tag-tables td img:hover {\n cursor: pointer;\n}\n", ""]);
19756+
exports.push([module.i, "#tag-tables, #tag-tables tr, #tag-tables td {\n width: 400px;\n font-family: monospace;\n text-align: center;\n border-collapse: collapse;\n border: 1px solid black;\n}\n\n#tag-tables thead {\n display: block;\n}\n\n#tag-tables tbody {\n display: block;\n height: 425px;\n max-height: 425px;\n overflow-y:scroll;\n}\n\n#tag-tables tr:hover {\n background-color: rgba(200, 200, 200, 1);\n}\n#tag-tables td .editable {\n text-decoration: underline; \n}\n\n#tag-tables td {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n#tag-tables td img:hover {\n cursor: pointer;\n}\n", ""]);
1971519757

1971619758
// exports
1971719759

‎src/index.js

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,42 @@ let vue = new Vue({
146146
this.saves = instance_names;
147147
});
148148
},
149-
handle_save_click: function(save) {
149+
handle_save_mouseover: function(save) {
150150
local_db.get_instance(save).getItem('plan').then((value) => {
151151
this.save_preview_src = value;
152152
});
153153
},
154+
rename_save: function(save) {
155+
// Renaming a save is quite involved
156+
// 1. Prompt for new name of save
157+
// 2. Create a new instance
158+
// 3. Populate the new instance with the values of the old instance
159+
// 4. Add a pointer to the new instance in instances_db
160+
// 5. Delete the old instance and the pointer to it in instances_db
161+
const instance = local_db.get_instance(save);
162+
vex.dialog.prompt({
163+
message: 'Enter new name for save. If save name already exists, ' +
164+
'it will override the previous save!',
165+
callback: (new_name) => {
166+
const new_instance = localforage.createInstance({
167+
name: new_name
168+
});
169+
instance.iterate( (value, key) => {
170+
new_instance.setItem(key, value);
171+
});
172+
// Add pointer to the new save in index_db
173+
const instances_db = localforage.createInstance({
174+
name: 'instances'
175+
});
176+
instances_db.getItem('instances').then((instances) => {
177+
instances_db.setItem('instances', instances.concat(new_name));
178+
// Clear the old key and the reference to it in instances_db
179+
this.delete_instance(save);
180+
this.update_saves();
181+
});
182+
}
183+
});
184+
},
154185
sort_data: function(sort_by) {
155186
this.labels = this.labels.sort( (a,b) => {
156187
if (typeof a[sort_by] === 'number') {
@@ -458,11 +489,20 @@ let vue = new Vue({
458489
});
459490
instances_db.clear().then(() => this.update_saves());
460491
},
461-
/*
462492
delete_instance: function(db_name) {
463-
//TODO
493+
const instances_db = localforage.createInstance({
494+
name: 'instances'
495+
});
496+
instances_db.getItem('instances').then((instances) => {
497+
let idx = instances.indexOf(db_name);
498+
let new_instances = instances;
499+
new_instances.splice(idx, 1);
500+
instances_db.setItem('instances', new_instances).then(() => {
501+
local_db.get_instance(db_name).clear();
502+
this.update_saves();
503+
});
504+
});
464505
},
465-
*/
466506
save_data: function(db_name = new Date().toISOString()) {
467507
const db = local_db.create_instance(db_name);
468508
let p1 = db.setItem('building', globals.BUILDING);
@@ -471,7 +511,9 @@ let vue = new Vue({
471511
let p4 = db.setItem('id', globals.ID);
472512
let p5 = db.setItem('plan', globals.PLAN);
473513

474-
Promise.all([p1, p2, p3, p4, p5]).then(() => this.update_saves());
514+
Promise.all([p1, p2, p3, p4, p5]).then(() => {
515+
this.update_saves();
516+
});
475517
},
476518
load_data: function (db_name) {
477519
let db = local_db.get_instance(db_name);

‎src/styles/style.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,13 @@ nav .active {
139139
background-color: rgba(240, 220, 200, 1);
140140
}
141141

142+
.delete {
143+
text-align: center;
144+
color: red;
145+
text-decoration: underline;
146+
}
147+
148+
.delete:hover {
149+
cursor: pointer;
150+
}
151+

‎src/styles/tag-tables.css

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,6 @@
2929
padding-bottom: 4px;
3030
}
3131

32-
#tag-tables a {
33-
text-align: center;
34-
color: red;
35-
text-decoration: underline;
36-
}
37-
38-
#tag-tables a:hover {
39-
cursor: pointer;
40-
}
41-
4232
#tag-tables td img:hover {
4333
cursor: pointer;
4434
}

0 commit comments

Comments
 (0)