@using Leica.Spider.BusinessCenter.Frontend.Utils
@{
    ViewBag.Title = Lang.Raw("IDS_MENU_ITEM_RINEX_RESULTS");
}
<div>
    <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h2><i class="icon24 icon-database"></i> Rinex Parser Test Page</h2>
        </div>
    </div>

    @section scripts {
        <partial name="_XposErrorCodes" />
        @Scripts.Render("~/Areas/User/Scripts/Rinex/RinexParser.js")
    }

    @section styles{
        <style>
            .rinexFile {
                max-height: 300px;
                overflow: auto;
            }

            /* this style is important to not have the animated progress bar, the animation will spoil the dynamic update */
            .rinexFile .progress-bar {
                -webkit-transition: none;
                -moz-transition: none;
                -ms-transition: none;
                -o-transition: none;
                transition: none;
            }​
        </style>
    }

    Select a files to parse:
    <input id="fileToParse"
           type="file"
           multiple/>

    <div id="progressHolder">
    </div>

    <script type="text/x-handlebars-template"
            id="fileTemplate">
        <div class="rinexFile tabs-container">
            <div class="tab-content">
                <h1>{{file.name}} ({{file.size}} bytes)</h1>
                <div class="bar-holder">
                    <div class="progress progress">
                        <div class="progress-bar bg-color-teal"></div>
                    </div>
                </div>
                <strong>File Details:</strong>
                <div class="fileDetails">
                </div>
                <strong>Header Details:</strong>
                <div class="headerDetails">
                </div>
                <strong>Markers:</strong>
                <ul class="markers"></ul>
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template"
            id="fileDetailsTemplate">
        {{#if error}}
        <strong>Error Kind:</strong> {{error.errorKind}}
        <br />
        <strong>Error Detail:</strong> {{error.errorDetail}}
        <br />
        {{/if}}
        <strong>Rinex Version:</strong> {{rinexVersion}}
        <br />
        <strong>Rinex File Type:</strong> {{fileType}}
        <br />
        <strong>Satellite System:</strong> {{satSystem}}
        <br />
        <strong>Occupation Type:</strong> {{occupationType}}
        <br />


    </script>

    <script type="text/x-handlebars-template"
            id="headerDetailsTemplate">
        <ul>
            <li>
                <strong>Marker Name:</strong> {{markerName}} <br />
                <strong>Marker Number:</strong> {{markerNumber}} <br />
                <strong>Approximate Position (X/Y/Z):</strong> {{approximatePosition.x}}/{{approximatePosition.y}}/{{approximatePosition.z}} <br />
                <strong>Receiver Type (Nr/Type/Version):</strong> {{receiverType.number}}/{{receiverType.type}}/{{receiverType.version}} <br />
                <strong>Antenna Type (Nr/Type):</strong> {{antennaType.number}}/{{antennaType.type}} <br />
            </li>
        </ul>
    </script>

    <script type="text/x-handlebars-template"
            id="markerTemplate">
        <li>
            <strong>Marker Name:</strong> {{markerName}}
            <br />
            <strong>Marker Number:</strong> {{markerNumber}}
            <br />
            <strong>Approximate Position (X/Y/Z):</strong> {{approximatePosition.x}}/{{approximatePosition.y}}/{{approximatePosition.z}}
            <br />
            <strong>Receiver Type (Nr/Type/Version):</strong> {{receiverType.number}}/{{receiverType.type}}/{{receiverType.version}}
            <br />
            <strong>Antenna Type (Nr/Type):</strong> {{antennaType.number}}/{{antennaType.type}}
        </li>
    </script>

    <script>
        var containerTemplate = Handlebars.compile($('#fileTemplate').html());
        var fileDetailsTemplate = Handlebars.compile($('#fileDetailsTemplate').html());
        var headerDetailsTemplate = Handlebars.compile($('#headerDetailsTemplate').html());
        var markerTemplate = Handlebars.compile($('#markerTemplate').html());
        var progressHolder = $('#progressHolder');

        // to be placed in an own file:
        var RinexFileInfoControl = function (parent, file, containerTemplate, fileDetailsTemplate, headerDetailsTemplate, markerTemplate) {
            this._model = {
                file: file,
                header: null,
                markers: []
            };
            this._view = $(containerTemplate(this._model));
            parent.append(this._view);

            this._fileDetailsTemplate = fileDetailsTemplate;
            this._headerDetailsTemplate = headerDetailsTemplate;
            this._markerTemplate = markerTemplate;

            this._progressBar = $(this._view).find('.progress-bar');
            this._fileDetails = $(this._view).find('.fileDetails');
            this._headerDetails = $(this._view).find('.headerDetails');
            this._markers = $(this._view).find('.markers');
        };

        RinexFileInfoControl.prototype = {
            read: function () {
                this._parser = new RinexParserWorker(this._model.file);
                var throttle = parseInt(getParameterByName('throttle'));
                if (!isNaN(throttle)) {
                    this._parser.throttle = throttle;
                }
                this._parser.onprogress = this._handleProgress.bind(this);
                this._parser.onsection = this._handleSection.bind(this);
                this._parser.onerror = this._handleError.bind(this);
                this._parser.onfinish = this._handleFinish.bind(this);
                this._parser.read();
            },
            _handleProgress: function (position, totalLength) {
                var percentage = ((position / totalLength) * 100).toFixed(2) + "%";
                var self = this;
                window.requestAnimationFrame(function () {
                    // jquery css is horribly slow
                    var bar = self._progressBar[0];
                    bar.style.width = percentage;
                    bar.innerText = percentage;
                });
            },
            _handleSection: function (sectionKind, sectionDetail) {
                switch (sectionKind) {
                    case RinexSection.FileType:
                        this._model.rinexVersion = sectionDetail.rinexVersion;
                        this._model.fileType = sectionDetail.fileType;
                        this._model.satSystem = sectionDetail.satSystem;
                        this._renderFileDetails();
                        break;
                    case RinexSection.Header:
                        this._model.header = sectionDetail;
                        this._headerDetails.html(this._headerDetailsTemplate(sectionDetail));
                        break;
                    case RinexSection.Data:
                        if (sectionDetail.markerName) {
                            this._model.markers.push(sectionDetail);
                            this._markers.append(this._markerTemplate(sectionDetail));
                        }
                        break;
                }
            },
            _handleError: function (errorKind, errorDetail) {
                this._model.error = {
                    errorKind: errorKind,
                    errorDetail: errorDetail
                };
                this._progressBar.addClass('bg-color-redLight');
                this._renderFileDetails();
            },
            _handleFinish: function (fileInfo) {
                this._model.occupationType = fileInfo.occupationType;
                this._renderFileDetails();
            },

            _renderFileDetails: function () {
                this._fileDetails.html(this._fileDetailsTemplate(this._model));
            }
        };

        $('#fileToParse').on('change', function (e) {
            for (var i = 0; i < e.target.files.length; i++) {
                var file = e.target.files[i];
                var control = new RinexFileInfoControl(progressHolder, file, containerTemplate, fileDetailsTemplate, headerDetailsTemplate, markerTemplate);
                control.read();
            }
        });
    </script>
</div>