backup-list.html 23.4 KB
Newer Older
Efthymia Bika's avatar
Efthymia Bika committed
1
2
3
4
<!DOCTYPE html>
<html>
    <head>
        <title>Backup List</title>
5
6
7
        <script src="backup.js"></script>
        <script src="dup_calls.js"></script>
        <script src="timeview.js"></script>
Efthymia Bika's avatar
Efthymia Bika committed
8
9
10
        <script type="text/javascript">

            $(document).ready(function() {
Efthymia Bika's avatar
Efthymia Bika committed
11
                $(".tabs").hide();
Efthymia Bika's avatar
Efthymia Bika committed
12
13
14
15
16
17
18
19
20
                if(typeof clouds === 'undefined') {
                    load_data_from_file(CLOUDS_CONF_FILE, populate_clouds);
                } else {
                    populate_clouds("");
                }
            });

            var errors = {
                backup_name_empty: 'Provide a Backup Name',
Efthymia Bika's avatar
Efthymia Bika committed
21
22
                backup_name_illegal: 'Invalid Entry. Name must start with '
                    + '\'Backup_\' and followed by characters [A-Za-z0-9-_]',
Efthymia Bika's avatar
Efthymia Bika committed
23
                cloud_empty: 'Select cloud configuration',
Efthymia Bika's avatar
Efthymia Bika committed
24
                dir_not_chosen : 'Provide a local directory',
Efthymia Bika's avatar
Efthymia Bika committed
25
                res_file_illegal: 'Invalid Entry. Provide a valid file name',
Efthymia Bika's avatar
Efthymia Bika committed
26
27
                path_empty: 'Provide a path',
                passphrase_empty: 'Provide a Passphrase'
Efthymia Bika's avatar
Efthymia Bika committed
28
            };
Efthymia Bika's avatar
Efthymia Bika committed
29

Efthymia Bika's avatar
Efthymia Bika committed
30
            load_data_from_file(BACKUP_CONF_FILE, render_backup_sets);
Efthymia Bika's avatar
Efthymia Bika committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

            function render_backup_sets(data) {
                $("#backup_list").remove();
                // backups is undefined the first time, when
                // reading data from file
                if(typeof backups === 'undefined') {
                    if(data != "") {
                        backups = JSON.parse(data).backups;
                    } else {
                        backups = [];
                    }
                }
                var ul = $("<ul></ul>")
                    .attr("id", "backup_list")
                    .attr("class", "side-nav");
                $.each(backups, function(i, backup) {
Efthymia Bika's avatar
Efthymia Bika committed
47
48
49
                    var li = $("<li></li>")
                        .attr("class", "clearfix")
                        .attr("id", "li_" + backup.name);
Efthymia Bika's avatar
Efthymia Bika committed
50
51
52
53
                    var a = $("<a>" + backup.name + "</a>")
                        .attr("href", "#")
                        .attr("id", backup.name)
                        .attr("class", "left")
Efthymia Bika's avatar
Efthymia Bika committed
54
55
56
57
                        .click(function() {
                            load_backup(backup);
                            activate_li("li_" + backup.name);
                        });
Efthymia Bika's avatar
Efthymia Bika committed
58
59
60
61
62
63
                    li.append(a);

                    var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
                        .attr("href", "#")
                        .attr("class", "right")
                        .click(function() {
64
65
                            if(confirm("Are you sure you want to delete " + backup.name + '?' +
                                "\nNOTE: To actually remove backup sets from remote container you have to manually purge it.")) {
Efthymia Bika's avatar
Efthymia Bika committed
66
67
68
69
70
71
72
73
74
75
                                delete_backup(backup);
                            }
                        });
                    li.append(a_del);

                    ul.append(li);
                    $("#sidebar").append(ul);
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
76
77
78
79
80
81
82
83
84
85
            function activate_li(id) {
                $("li").each(function(i, li) {
                    if($(this).is("#" + id)) {
                        $(this).addClass("active-li");
                    } else {
                        $(this).removeClass("active-li");
                    }
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
86
            function check_backup_name() {
Efthymia Bika's avatar
Efthymia Bika committed
87
88
89
90
                var backup_name = $('#backup-name').val().replace(/^\s+|\s+$/gm,'');
                if(!backup_name) {
                    $('#backup-name-error small').text(errors.backup_name_empty);
                    $('#backup-name-error small').show();
Efthymia Bika's avatar
Efthymia Bika committed
91
                    return false;
Efthymia Bika's avatar
Efthymia Bika committed
92
                } else {
Efthymia Bika's avatar
Efthymia Bika committed
93
                    var pattern = /^Backup_[\w.\-]+$/;
Efthymia Bika's avatar
Efthymia Bika committed
94
95
96
                    if(!backup_name.match(pattern)) {
                        $('#backup-name-error small').text(errors.backup_name_illegal);
                        $('#backup-name-error small').show();
Efthymia Bika's avatar
Efthymia Bika committed
97
                        return false;
Efthymia Bika's avatar
Efthymia Bika committed
98
99
100
101
                    } else {
                        $('#backup-name-error small').hide();
                    }
                }
Efthymia Bika's avatar
Efthymia Bika committed
102
                return true;
Efthymia Bika's avatar
Efthymia Bika committed
103
104
            }

Efthymia Bika's avatar
Efthymia Bika committed
105
106
107
108
            function check_directory(dir_id) {
                if(!$('#' + dir_id).html()) {
                    $('#' + dir_id + '-error small').text(errors.dir_not_chosen);
                    $('#' + dir_id + '-error small').show();
Efthymia Bika's avatar
Efthymia Bika committed
109
                    return false;
Efthymia Bika's avatar
Efthymia Bika committed
110
                } else $('#' + dir_id + '-error small').hide();
Efthymia Bika's avatar
Efthymia Bika committed
111
112
113
                return true;
            }

Efthymia Bika's avatar
Efthymia Bika committed
114
115
116
117
118
119
120
121
122
123
124
125
            function check_cloud() {
                var cloud = $("#cloud").val();
                if(!cloud) {
                    $('#cloud-error small').text(errors.cloud_empty);
                    $('#cloud-error small').show();
                    return false;
                } else {
                    $('#cloud-error small').hide();
                }
                return true;
            }

Efthymia Bika's avatar
Efthymia Bika committed
126
127
128
129
130
131
132
133
134
135
136
137
            function check_passphrase() {
                var passphrase = $("#passphrase").val();
                if(!passphrase) {
                    $('#passphrase-error small').text(errors.passphrase_empty);
                    $('#passphrase-error small').show();
                    return false;
                } else {
                    $('#passphrase-error small').hide();
                }
                return true;
            }

Efthymia Bika's avatar
Efthymia Bika committed
138
139
            function populate_clouds(data) {
                if(typeof clouds === 'undefined') {
Efthymia Bika's avatar
Efthymia Bika committed
140
141
142
143
144
145
                    if(data != "") {
                        clouds = JSON.parse(data).clouds;
                    } else {
                        clouds = [];
                    }
                }
Efthymia Bika's avatar
Efthymia Bika committed
146
147
148
149
150
151
152
153
                var cloud_sel = $("#cloud");
                $.each(clouds, function(i, cloud) {
                    cloud_sel.append($("<option></option>")
                        .attr("value", cloud.name)
                        .text(cloud.name));
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
            function disable_form(disable) {
                $("#backup-name").prop("disabled", disable);
                $("#choose-dir").prop("disabled", disable);
                $("#cloud").prop("disabled", disable);
                var save_pass = $("#save_passphrase").is(":checked");
                if(save_pass) {
                    $("#passphrase").prop("disabled", disable);
                }
                if(disable) {
                    $("#save_button").hide();
                } else {
                    $("#save_button").show();
                }
            }

            function disable_actions(disable) {
                $("#restore_details_link").prop("disabled", disable);
                $("#status_link").prop("disabled", disable);
Efthymia Bika's avatar
Efthymia Bika committed
172
                $("#timeview_link").prop("disabled", disable);
Efthymia Bika's avatar
Efthymia Bika committed
173
174
175
176
                if(disable) {
                    $("#restore_details_link").click(function(e) { e.preventDefault(); });
                    $("#status_link").click(function(e) { e.preventDefault(); });
                    $("#status_link").unbind("click");
Efthymia Bika's avatar
Efthymia Bika committed
177
178
                    $("#timeview_link").click(function(e) { e.preventDefault(); });
                    $("#timeview_link").unbind("click");
Efthymia Bika's avatar
Efthymia Bika committed
179
180
181
                } else {
                    $("#restore_details_link").click(function(e) { return true; });
                    $("#status_link").click(function(e) { load_status(); });
Efthymia Bika's avatar
Efthymia Bika committed
182
                    $("#timeview_link").click(function(e) { load_timeview(); });
Efthymia Bika's avatar
Efthymia Bika committed
183
184
185
                }
            }

186
            function backup(restore) {
Efthymia Bika's avatar
Efthymia Bika committed
187
                $("#loader").show();
Efthymia Bika's avatar
Efthymia Bika committed
188
                if(!restore) save_backup_set();
Efthymia Bika's avatar
Efthymia Bika committed
189
                run_duplicity(restore);
Efthymia Bika's avatar
Efthymia Bika committed
190
                disable_form(true);
Efthymia Bika's avatar
Efthymia Bika committed
191
                write_first_backup();
Efthymia Bika's avatar
Efthymia Bika committed
192
                disable_actions(false);
Efthymia Bika's avatar
Efthymia Bika committed
193
194
            }

195
196
            function check_fields(restore) {
                if(!restore) {
Efthymia Bika's avatar
Efthymia Bika committed
197
198
199
200
                    return (check_backup_name()
                        && check_directory("directory")
                        && check_cloud()
                        && check_passphrase());
201
202
                }
                return check_directory("res-directory");
Efthymia Bika's avatar
Efthymia Bika committed
203
204
205
            }
        </script>
    </head>
Efthymia Bika's avatar
Efthymia Bika committed
206
207
208
209
210
211
212

    <body>
        <div class="row">
            <div class="small-12 columns">
                <p>&nbsp;</p>
            </div>
        </div>
Efthymia Bika's avatar
Efthymia Bika committed
213
        <div class="row">
Efthymia Bika's avatar
Efthymia Bika committed
214
            <div class="small-3 columns vertical-border" id="sidebar">
215
                <a href="#" onclick="load_backup();" class="button radius small">
Efthymia Bika's avatar
Efthymia Bika committed
216
                    <i class="fa fa-plus-circle">&nbsp;Add Backup</i>
Efthymia Bika's avatar
Efthymia Bika committed
217
                </a>
Efthymia Bika's avatar
Efthymia Bika committed
218
219
220
221
            </div>
            <div class="small-9 columns">
                <ul class="tabs" data-tab>
                    <li class="tab-title radius" id="backup_details_tab">
222
                        <a href="#backup_details" id="backup_details_link">Backup</a>
Efthymia Bika's avatar
Efthymia Bika committed
223
                    </li>
Efthymia Bika's avatar
Efthymia Bika committed
224
225
226
                    <li class="tab-title radius" id="restore_details_tab">
                        <a href="#restore_details" id="restore_details_link">Restore</a>
                    </li>
Efthymia Bika's avatar
Efthymia Bika committed
227
                    <li class="tab-title radius">
Efthymia Bika's avatar
Efthymia Bika committed
228
                        <a href="#timeview" id="timeview_link">Timeview</a>
Efthymia Bika's avatar
Efthymia Bika committed
229
230
231
232
                    </li>
                    <li class="tab-title radius">
                        <a href="#status" id="status_link">Status</a>
                    </li>
Efthymia Bika's avatar
Efthymia Bika committed
233
234
235
236
                </ul>
                <div class="tabs-content">
                    <div class="content" id="backup_details">
                        <form>
Efthymia Bika's avatar
Efthymia Bika committed
237
238
239
240
241
242
243
244
245
246
247
248
                            <fieldset>
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                        <label id="directory_label" for="directory" class="right">
                                            Local directory
                                        </label>
                                    </div>
                                    <div id="directory" class="small-6 columns"></div>
                                    <div id="dirdialogue_label" onclick="$('#choose-dir').trigger('click');"
                                        class="small-3 columns" id="dirpick">
                                        <i class="fa fa-folder-o blue-folder">&nbsp;</i>
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
249
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
250
251
252
253
254
255
256
257
258
                                <div class="clearfix">
                                    <div class="small-3 columns">&nbsp;</div>
                                    <div id="directory-error" class="small-6 columns">
                                        <small class="error"></small>
                                    </div>
                                    <input type="file" id="choose-dir" nwdirectory
                                        style="display:none;"
                                        onchange="$('#directory').html($(this).val());
                                            check_directory('directory');" />
Efthymia Bika's avatar
Efthymia Bika committed
259
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
260
261
262
263
264
265
266
267
268
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                         <label id="cloud_label" for="cloud" class="right inline">Cloud</label>
                                    </div>
                                    <div class="small-9 columns error" id="cloud-error">
                                        <select id="cloud" onchange="check_cloud();">
                                        </select>
                                        <small class="error"></small>
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
269
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
270
271
272
273
274
275
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                         <label id="backup_name_label" for="backup-name" class="right inline">Name</label>
                                    </div>
                                    <div class="small-9 columns error" id="backup-name-error">
                                        <input type="text" id="backup-name"
Efthymia Bika's avatar
Efthymia Bika committed
276
277
278
                                        placeholder="Backup_[A-Za-z0-9-_]"
                                        value="Backup_"
                                        onchange="check_backup_name();">
Efthymia Bika's avatar
Efthymia Bika committed
279
280
                                        <small class="error"></small>
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
281
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
282
283
284
285
286
                            </fieldset>
                            <fieldset>
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                         <label id="exclude-label" for="exclude" class="right inline">
287
288
                                             Exclude&nbsp;<i class="fa fa-info-circle green-info"
                                             onclick="$('#include-help').slideDown();"></i>
Efthymia Bika's avatar
Efthymia Bika committed
289
290
291
292
293
294
295
                                         </label>
                                    </div>
                                    <div class="small-9 columns error" id="exclude-error">
                                        <input type="text" id="exclude"
                                        placeholder="Exclude folders or files">
                                        <small class="error"></small>
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
296
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
297
298
299
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                         <label id="include-label" for="include" class="right inline">
300
301
                                             Include&nbsp;<i class="fa fa-info-circle green-info"
                                                onclick="$('#include-help').slideDown();"></i>
Efthymia Bika's avatar
Efthymia Bika committed
302
303
304
305
306
307
308
                                         </label>
                                    </div>
                                    <div class="small-9 columns error" id="include-error">
                                        <input type="text" id="include"
                                        placeholder="Include folders or files">
                                        <small class="error"></small>
                                    </div>
309
310
311
312
313
314
315
316
317
318
                                    <div class="small-3 columns">&nbsp;</div>
                                    <div class="small-9 columns hide info-text panel" id="include-help">
                                        <i class="fa fa-times right" onclick="$('#include-help').slideUp();"></i>
                                        Include and Exclude fields accept some extended shell globbing patterns:
                                        <br>* Matches any string not containing '/'
                                        <br>? Matches any character except '/'
                                        <br>[...] Expands to a single character of those characters specified
                                            (ranges are acceptable)
                                        <br>** Matches any string
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
319
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
320
321
322
323
324
325
326
327
328
329
330
331
332
                                <div class="clearfix">
                                    <div class="small-3 columns">
                                        <label id="passphrase_label" for="passphrase" class="right inline">Passphrase</label>
                                    </div>
                                    <div class="small-6 columns error" id="passphrase-error">
                                        <input type="password" id="passphrase" placeholder="Passphrase">
                                        <small class="error"></small>
                                    </div>
                                    <div class="small-3 columns">
                                        <label for="save_passphrase" class="left">Save&nbsp;
                                        <input id="save_passphrase" type="checkbox" class="right">
                                        </label>
                                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
333
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
334
                            </fieldset>
Efthymia Bika's avatar
Efthymia Bika committed
335
336
                            <div class="clearfix">
                                <div class="small-6 columns">
Efthymia Bika's avatar
Efthymia Bika committed
337
                                    <a id="backup_button" class="button radius left small"
338
                                    onclick="if(check_fields(false)) backup(false);">
Efthymia Bika's avatar
Efthymia Bika committed
339
                                    <i class="fa fa-cloud-upload"></i>&nbsp;Backup Now</a>
Efthymia Bika's avatar
Efthymia Bika committed
340
                                </div>
341
342
                                <div class="small-6 columns">
                                    <a id="save_button" class="button radius right small success"
343
                                    onclick="if(check_fields(false)) save_backup_set();">
344
345
                                    <i class="fa fa-floppy-o"></i>&nbsp;Save</a>
                                </div>
Efthymia Bika's avatar
Efthymia Bika committed
346
347
348
                            </div>
                        </form>
                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
349
350
351
352
                    <div class="content" id="restore_details">
                        <div class="clearfix">
                            <div class="small-3 columns">
                                <label id="res_directory_label" for="res-directory" class="right">
353
                                    Local directory
Efthymia Bika's avatar
Efthymia Bika committed
354
355
356
357
358
                                </label>
                            </div>
                            <div id="res-directory" class="small-6 columns"></div>
                            <div id="res-dirdialogue_label" onclick="$('#choose-res-dir').trigger('click');"
                                class="small-3 columns" id="resdirpick">
359
                                <i class="fa fa-folder-o blue-folder">&nbsp;</i>
Efthymia Bika's avatar
Efthymia Bika committed
360
361
362
363
364
365
366
367
368
369
370
371
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-3 columns">&nbsp;</div>
                            <div id="res-directory-error" class="small-6 columns">
                                <small class="error"></small>
                            </div>
                            <input type="file" id="choose-res-dir" nwdirectory
                                style="display:none;"
                                onchange="$('#res-directory').html($(this).val());
                                    check_directory('res-directory');" />
                        </div>
Efthymia Bika's avatar
Efthymia Bika committed
372
373
374
375
                        <div class="clearfix">
                            <div class="small-3 columns">
                                 <label id="res-file-label" for="res-file" class="right inline">
                                     <span data-tooltip aria-haspopup="true" class="has-tip"
Efthymia Bika's avatar
Efthymia Bika committed
376
                                     title="Use relative path">
Efthymia Bika's avatar
Efthymia Bika committed
377
378
379
380
381
382
383
384
385
386
                                         File to Restore
                                     </span>
                                 </label>
                            </div>
                            <div class="small-9 columns error" id="res-file-error">
                                <input type="text" id="res-file"
                                placeholder="Only restore this file">
                                <small class="error"></small>
                            </div>
                        </div>
Efthymia Bika's avatar
Efthymia Bika committed
387
388
                        <div class="clearfix">
                            <div class="small-3 columns">
Efthymia Bika's avatar
Efthymia Bika committed
389
390
391
392
                                <label id="timestamp-label" for="timestamp" class="right inline">
                                    Timestamp&nbsp;<i class="fa fa-info-circle green-info"
                                        onclick="$('#timestamp-help').slideDown();"></i>
                                </label>
Efthymia Bika's avatar
Efthymia Bika committed
393
394
395
396
397
398
                            </div>
                            <div class="small-9 columns error" id="timestamp-error">
                                <input type="text" id="timestamp"
                                placeholder="Restore from a specific time">
                                <small class="error"></small>
                            </div>
Efthymia Bika's avatar
Efthymia Bika committed
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
                            <div class="small-3 columns">&nbsp;</div>
                            <div class="small-9 columns hide info-text panel" id="timestamp-help">
                                <i class="fa fa-times right" onclick="$('#timestamp-help').slideUp();"></i>
                                Accepts following formats<br>
                                1. String "now" refers to current time<br>
                                2. A sequences of digits, like "123456890"
                                    (indicating the time in seconds after the epoch)<br>
                                3. A string like "2002-01-25T07:00:00+02:00" in datetime format<br>
                                4. A number followed by one of the characters s, m, h, D, W, M, or Y
                                    (indicating seconds, minutes, hours, days, weeks, months,
                                    or years respectively), or a series of such pairs.
                                    In this case the string refers to the time that preceded
                                    the current time by the length of the interval.
                                    For instance, "1h78m" indicates the time that was
                                    one hour and 78 minutes ago.<br>
                                5. A date format of the form YYYY/MM/DD, YYYY-MM-DD, MM/DD/YYYY,
                                    or MM-DD-YYYY, which indicates midnight on the day in question,
                                    relative to the current time zone settings.
                            </div>
Efthymia Bika's avatar
Efthymia Bika committed
418
                        </div>
Efthymia Bika's avatar
Efthymia Bika committed
419
420
421
422
                        <div class="clearfix">
                            <div class="small-6 columns">&nbsp;</div>
                            <div class="small-6 columns">
                                <a id="restore_button" class="button radius right small"
423
                                onclick="if(check_fields(true)) backup(true);">
Efthymia Bika's avatar
Efthymia Bika committed
424
425
426
427
                                <i class="fa fa-cloud-download"></i>&nbsp;Restore</a>
                            </div>
                        </div>
                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
428
429
430
431
                    <div class="content" id="status"></div>
                    <div class="content" id="timeview">
                        <div class="clearfix">
                            <div class="small-9 columns error" id="time-head-error">
432
                                <input type="hidden" id="time-path" placeholder="Select path"
433
                                    value="/">
Efthymia Bika's avatar
Efthymia Bika committed
434
435
436
                                <small class="error"></small>
                            </div>
                        </div>
437
438
439
                        <div class="clearfix">
                            <ul class="breadcrumbs" id="breadcrumbs"></ul>
                        </div>
Efthymia Bika's avatar
Efthymia Bika committed
440
                        <div class="clearfix">
Efthymia Bika's avatar
Efthymia Bika committed
441
442
                            <div class="small-4 columns left scroll-list" id="time-dates"></div>
                            <div class="small-8 columns scroll-list" id="time-contents"></div>
Efthymia Bika's avatar
Efthymia Bika committed
443
                        </div>
Efthymia Bika's avatar
Efthymia Bika committed
444
445
                    </div>
                </div>
Efthymia Bika's avatar
Efthymia Bika committed
446
447
448
                <div id="loader" class="hide text-center">
                    <i class="fa fa-spinner fa-pulse fa-2x gray-spin"></i>
                </div>
Efthymia Bika's avatar
Efthymia Bika committed
449
450
451
452
453
                <div id="msg" class="small-10 columns"></div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).foundation();
Efthymia Bika's avatar
Efthymia Bika committed
454
        </script>
Efthymia Bika's avatar
Efthymia Bika committed
455
    </body>
Efthymia Bika's avatar
Efthymia Bika committed
456
</html>