Widget /Archive and Restore tinyG

This widgetarchives and restores from archive TinyG

by carl mcgrath

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-widget-backuprestoretinyg" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="btn-toolbar pull-right" role="toolbar">
                    <div class="btn-group">
                        <div class="dropdown">
                            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>

                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                        </div>
                    </div>
                </div>	<span class="modal-title" data-toggle="popover">Archive and Restore from Archive for TinyG v0.51 <br> <mark>(this widget is under development)</mark> </span>  <span style="font-size:9px;" class="fb-build"></span>

            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#backuprestoretinyg-Backup" role="tab" data-toggle="tab">Archive to File</a>

                    </li>
                    <li><a href="#backuprestoretinyg-Restore" role="tab" data-toggle="tab">Restore from Archive File</a>

                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="backuprestoretinyg-Backup">
                        <div class="panel-body">
                            <table>
                                <tr>
                                    <td>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Archive-to-File Display and Edit Window:</td>
                                </tr>
   ...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
#com-chilipeppr-widget-backuprestoretinyg .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-backuprestoretinyg .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
}
#com-chilipeppr-widget-backuprestoretinyg .panel-body {
    padding:3px;
}
.com-chilipeppr-widget-backuprestoretinyg-stat div.input-label {
    line-height:13px;
    padding-top:6px;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .input-val {
    padding:0;
    padding-left: 10px;
    height:28px;
    margin-bottom:2px;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .col {
    padding:0 10px 0 0;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .col:last-child {
    padding:0;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .progress {
    margin-bottom:0;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .stat-row {
    padding-top:2px;
}
#com-chilipeppr-widget-backuprestoretinyg .com-chilipeppr-widget-backuprestoretinyg-stat div.col.lblpad {
    padding-left:10px;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .stat-unit {
    font-size:9px;
    /* display:none; */
}
.com-chilipeppr-widget-backuprestoretinyg-stat div.col.well {
    margin-bottom:0px;
    padding-left:5px;
}
.com-chilipeppr-widget-backuprestoretinyg-stat .stat-sm {
    font-size:10px;
}
#com-chilipeppr-widget-backuprestoretinyg .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-backuprestoretinyg-status {
    //overflow: auto;
    //max-height:30px;
    background:none;
    background-color:#f5f5f5;
    border:none;
}
#com-chilipeppr-widget-backuprestoretinyg .col-xs-3 {
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-backuprestoretinyg .progress-bar span {
    color: black;
    padding-left:4px;
}
#com-chilipeppr-widget-backuprestoretinyg .stat-val {
    padding-left:4px;
}

JavaScript

//cjm Working HTML Editor Window
cprequire_test(["inline:com-chilipeppr-widget-backuprestoretinyg"], function (ls) {
    console.log("test running of " + ls.id);

    // Serial Port Selector
    // http://jsfiddle.net/chilipeppr/4RgrS/
    // NEW VERSION for SPJS v1.7 http://jsfiddle.net/chilipeppr/vetj5fvx/
    chilipeppr.load("com-chilipeppr-serialport-spselector",
        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-widget-serialport"],

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg", 115200);
            setTimeout(function () {
                ls.init();
            }, 2000); //startup delay (ms) for spjs connection to get going during debug
        });

    });
    // Serial Port Console Log Window
    // http://jsfiddle.net/chilipeppr/JB2X7/
    // NEW VERSION http://jsfiddle.net/chilipeppr/rczajbx0/
    // The new version supports onQueue, onWrite, onComplete

    chilipeppr.load("#com-chilipeppr-serialport-log",
        "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-widget-spconsole"],

        function (spc) {
            // pass in regular expression filter as 2nd parameter
            // to enable filter button and clean up how much
            // data is shown
            spc.init(true, /^{/);

            // resize this console on a browser resize
            $(window).on('resize', function (evt) {
                //console.log("serial-port-console. resize evt:", evt);
                if ($.isWindow(evt.target)) {
                    //console.log("resize was window. so resizing");
                    spc.resize();
                } else {
                    //console.log("resize was not window, so ignoring");
                }
            });
            // resize this console if we get a publish
            // from the gcode viewer...