fleet-contractor/Site/Maintenance/SurveyDetail.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Maintenance/MaintenanceBase.master" AutoEventWireup="true" CodeFile="SurveyDetail.aspx.cs" Inherits="SurveyDetail" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="<%=Common.GenerateUrl("../css/tabcontrol.css") %>" rel="stylesheet" />
    <link href="<%=Common.GenerateUrl("../Inspection/css/sections.css") %>" rel="stylesheet" />
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .tab-header {
            float: left;
            padding: 2px 6px;
            cursor: pointer;
            border: 1px solid #fff;
            border-bottom: none;
        }

            .tab-header:hover {
                background: #eee;
            }

            .tab-header.selected {
                border-color: #d8d8d8;
                cursor: default;
            }

                .tab-header.selected:hover {
                    background: #fff;
                }

        .label { /*cover tab.css*/
            display: table-cell;
        }

        .login_lable {
            height: 24px;
            line-height: 24px;
            vertical-align: top;
        }

        .sbutton {
            font-weight: 200;
        }

        .subtitle {
            margin: 20px 40px 5px 0px;
            font-size: 16px;
            color: gray;
        }

            .subtitle span {
                margin-left: 10px;
            }

            .subtitle hr {
                background-color: #d8d8d8;
                border: none;
                height: 1px;
            }

        .dialog-content table td.label {
            width: 120px;
        }

        .catelog {
            color: #444;
            height: 30px;
            line-height: 30px;
            margin-top: 8px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 20px;
            font-style: italic;
        }

        .page {
            line-height: 52px;
            margin-top: 8px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 26px;
            font-weight: 700;
            color: #333;
        }

        .question {
            min-height: 30px;
            line-height: 30px;
            padding-left: 30px;
            padding-right: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #111;
            /*display: flex;*/
        }

        .answer {
            min-height: 30px;
            padding-left: 50px;
            padding-right: 10px;
        }

        .maintable {
            border-collapse: collapse;
            width: 98%;
            page-break-inside: avoid;
            margin-left: 1%;
            line-height: 24px;
            table-layout: fixed;
        }

            .maintable td {
                /*border: 1px solid #a9a9a9;*/
                padding-left: 3px;
                padding-right: 3px;
            }

            .maintable .mainlabel {
                font-weight: bold;
                text-align: right;
            }

        .question-tips {
            font-weight: normal;
            font-size: .8rem;
            margin-left: 8px;
            color: gray;
            display: inline-block;
        }

        .noneanswer {
            min-height: 30px;
            padding-left: 50px;
            padding-right: 10px;
            font-weight: normal;
            font-size: .8rem;
            margin-left: 8px;
            color: gray;
            display: inline-block;
            font-style: italic;
        }
    </style>

    <script src="<%=GetFileUrlWithVersion("../js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>" type="text/javascript"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script src="<%=GetFileUrlWithVersion("../js/utility.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/language.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/modulelang.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/surveydetail.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
        var surveyid = "";
        var vm;
        var surveydata;

        function worequest(method, param, callback, error) {
            _network.request("Maintenance/SurveyDetail.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey('P_WOS_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_WOS_QUERY', 'Query'));
            });
        }

        function showcontatcmask(flag) {
            if (flag) {
                $('#contatcmask').fadeIn(100);
            } else {
                $('#contatcmask').fadeOut(100);
            }
        }

        function OnExit(type) {
            if (window.parent && typeof window.parent.CloseCustomerDialog == 'function')
                window.parent.CloseCustomerDialog(type);
            else
                window.parent.CloseDialog(type);
        }

        function init(sid) {
            surveyid = sid;
            if (!surveyid || surveyid === '')
                return;

            GetWorkOrderSurveyResult();
        }

        function showLoading() {
            $("#dialogmask").show();
        }

        function hideLoading() {
            $("#dialogmask").hide();
        }

        $(function () {
            vm = new Vue({
                el: '#divresult',
                data: {
                    result: {
                        SurveyData: {
                            Question: {
                                Questions: {}
                            }
                        }
                    }
                },
                methods: {
                    reload: function (data) {
                        this.result = data;
                    }
                }
            });

            function resizeContent() {
                $('#divcontent').css('height', $(window).height() - $('#divcontent').offset().top - 4);
            }

            window.onresize = resizeContent;
            resizeContent();
        });

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="mask_bg" style="display: none; z-index: 500"><div class="loading c-spin"></div></div>
    <div>
        <div id="dialogmask" class="maskbg" style="display: none; z-index: 500;">
            <div class="loading_icon icon c-spin"></div>
        </div>
        <div class="function_title">
            <span class="sbutton icondelete" onclick="OnExit(0);" style="margin-left: 756px; font-size: 16px;"></span>
        </div>
        <div class="clear"></div>
        <div class="content_main" id="divcontent" style="overflow: auto;">
            <div id="divresult" style="margin: 0 auto;">
                <h1 style="text-align: center;">{{result.SurveyData.Question.Questions.Name}}</h1>
                <div style="text-align: center; margin-bottom: 10px;"><span style="font-weight: bold;" data-lgid="P_WOS_REPLYTIME_COLON">Reply Time: </span> {{result.SubmitTimeStr}}</div>
                <table class="maintable">
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_WORKORDERNUMBER_COLON">Work Order Number:</span> {{result.SurveyData.Question.WorkOrderNumber}}</td>
                    </tr>
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_ASSET_COLON">Asset:</span> {{result.SurveyData.Question.AssetVIN}}/{{result.SurveyData.Question.AssetMake}}/{{result.SurveyData.Question.AssetModel}}</td>
                    </tr>
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_CONTACT_COLON">Contact:</span> {{result.SurveyData.Question.CustomerName}}/{{result.SurveyData.Question.CustomerPhone}}</td>
                    </tr>
                    <tr>
                        <td style="padding: 0;">
                            <div id="divtemplate" style="margin-top: 10px;"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</asp:Content>