add site
This commit is contained in:
		
							
								
								
									
										722
									
								
								Site/MachineDeviceManagement/ManageModels.aspx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										722
									
								
								Site/MachineDeviceManagement/ManageModels.aspx
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,722 @@ | ||||
| <%@ Page Title="" Language="C#" MasterPageFile="~/MachineDeviceManagement/DeviceManagementBase.master" AutoEventWireup="true" CodeFile="ManageModels.aspx.cs" Inherits="ManageModels" %> | ||||
|  | ||||
|  | ||||
| <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> | ||||
|     <style type="text/css"> | ||||
|         ::-ms-clear, ::-ms-reveal { | ||||
|             display: none; | ||||
|         } | ||||
|  | ||||
|         .selectinput { | ||||
|             width: 150px; | ||||
|             margin-right: 10px; | ||||
|         } | ||||
|  | ||||
|         .dialog-content table { | ||||
|             border-collapse: collapse; | ||||
|             width: 100%; | ||||
|         } | ||||
|  | ||||
|             .dialog-content table td.label { | ||||
|                 width: 100px; | ||||
|                 text-align: right; | ||||
|                 padding-right: 10px; | ||||
|                 line-height: 24px; | ||||
|                 height: 24px; | ||||
|                 vertical-align: top; | ||||
|             } | ||||
|  | ||||
|             .dialog-content table td input, | ||||
|             .dialog-content table td textarea { | ||||
|                 border: 1px solid #a9a9a9; | ||||
|                 width: 200px; | ||||
|                 height: 18px; | ||||
|                 padding: 1px; | ||||
|             } | ||||
|  | ||||
|                 .dialog-content table td input[type="checkbox"] { | ||||
|                     border: none; | ||||
|                 } | ||||
|  | ||||
|             .dialog-content table td textarea { | ||||
|                 height: 100px; | ||||
|                 max-width: 200px; | ||||
|             } | ||||
|  | ||||
|         #dialogdatatb td { | ||||
|             padding-top: 30px; | ||||
|         } | ||||
|  | ||||
|         .a { | ||||
|             text-decoration: none; | ||||
|             color: #2140fb; | ||||
|         } | ||||
|  | ||||
|         .selected { | ||||
|             background-color: #cccccc; | ||||
|         } | ||||
|  | ||||
|         .makeitem { | ||||
|             padding-left: 5px; | ||||
|             line-height: 30px; | ||||
|         } | ||||
|  | ||||
|             .makeitem:hover { | ||||
|                 background-color: #e1e1e1; | ||||
|             } | ||||
|  | ||||
|         .sbtn { | ||||
|             padding: 6px; | ||||
|             cursor: pointer; | ||||
|             font-size: 12px; | ||||
|             /*margin-left: 8px;*/ | ||||
|         } | ||||
|  | ||||
|             .sbtn:hover { | ||||
|                 background: #ccc; | ||||
|             } | ||||
|  | ||||
|             .sbtn:before { | ||||
|                 font-family: 'FontAwesome'; | ||||
|                 color: rgb(123,28,33); | ||||
|             } | ||||
|  | ||||
|         .sbtnhide { | ||||
|             display: none; | ||||
|         } | ||||
|     </style> | ||||
|  | ||||
|     <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" /> | ||||
|     <script src="<%=GetFileUrlWithVersion("../Maintenance/js/inputdatactr.js")%>" type="text/javascript"></script> | ||||
|     <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script> | ||||
|     <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>"></script> | ||||
|     <script>Vue.config.productionTip = false; Vue.config.silent = true;</script> | ||||
|     <script type="text/javascript"> | ||||
|         var IsSuperAdmin =<%=IsSuperAdmin ?"true":"false"%>; | ||||
|         var typessdata = []; | ||||
|  | ||||
|         function devicerequest(method, param, callback, error) { | ||||
|             _network.request("MachineDeviceManagement/ManageModels.aspx", -1, method, param, callback, error || function (e) { | ||||
|                 showmaskbg(false, true); | ||||
|                 showAlert(GetTextByKey('P_MM_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_MM_QUERY', 'Query')); | ||||
|             }); | ||||
|         } | ||||
|          | ||||
|         function GetMakes() { | ||||
|             selectedMake = null; | ||||
|             showloading(true); | ||||
|  | ||||
|             var searchtxt = htmlencode($.trim($('#txtMakeSearch').val())); | ||||
|             devicerequest("GetAssetMakes", searchtxt, function (data) { | ||||
|                 $('#tbody_makes').empty(); | ||||
|                 currentShownIndex = -1; | ||||
|  | ||||
|                 if (typeof (data) === "string") { | ||||
|                     showAlert(data, GetTextByKey("P_MM_ERROR", 'Error')); | ||||
|                     return; | ||||
|                 } | ||||
|  | ||||
|                 $("#dialog_make").empty(); | ||||
|                 for (var i = 0; i < data.length; i++) { | ||||
|                     var kv = data[i]; | ||||
|                     op = $("<option></option>").val(kv.ID).text(kv.Name); | ||||
|                     $("#dialog_make").append(op); | ||||
|                 } | ||||
|  | ||||
|                 showMakes(data); | ||||
|                 showloading(false); | ||||
|             }, function (err) { | ||||
|                 showloading(false); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         function showMakes(data) { | ||||
|             _MakeObject.showMakes(data); | ||||
|         } | ||||
|  | ||||
|         function OnAddMake() { | ||||
|             makeID = undefined; | ||||
|  | ||||
|             $('#dialog_makename').val(''); | ||||
|             $('#dialog_addmake .dialog-title span.title').text(GetTextByKey("P_MA_ADDMAKE", 'Add Make')); | ||||
|  | ||||
|             showmaskbg(true); | ||||
|             $('#dialog_addmake') | ||||
|                 .attr('act', 'add') | ||||
|                 .css({ | ||||
|                     'top': (document.documentElement.clientHeight - $('#dialog_addmake').height()) / 3, | ||||
|                     'left': (document.documentElement.clientWidth - $('#dialog_addmake').width()) / 2 | ||||
|                 }) | ||||
|                 .showDialogfixed(); | ||||
|             $('#dialog_name').focus(); | ||||
|         } | ||||
|  | ||||
|         var makeID; | ||||
|         function OnEditMake(make) { | ||||
|             if (!make) { | ||||
|                 makeID = undefined; | ||||
|                 return; | ||||
|             } | ||||
|             //if (!make.CanEdit) | ||||
|             //    return; | ||||
|  | ||||
|             makeID = make.ID; | ||||
|             $('#dialog_makename').val(make.Name); | ||||
|  | ||||
|             $('#dialog_addmake .dialog-title span.title').text(GetTextByKey("P_MM_EDITMAKE", 'Edit Make')); | ||||
|             showmaskbg(true); | ||||
|             $('#dialog_addmake') | ||||
|                 .attr('act', 'edit') | ||||
|                 .css({ | ||||
|                     'top': (document.documentElement.clientHeight - $('#dialog_addmake').height()) / 3, | ||||
|                     'left': (document.documentElement.clientWidth - $('#dialog_addmake').width()) / 2 | ||||
|                 }) | ||||
|                 .showDialogfixed(); | ||||
|             $('#dialog_makename').focus(); | ||||
|         } | ||||
|  | ||||
|         function OnSaveMake() { | ||||
|             var item = { | ||||
|                 'Name': $.trim($('#dialog_makename').val()), | ||||
|             }; | ||||
|             var alerttitle; | ||||
|             if (makeID) { | ||||
|                 item.ID = makeID; | ||||
|                 alerttitle = GetTextByKey("P_MM_EDITMAKE", "Edit Make"); | ||||
|             } else { | ||||
|                 item.ID = -1; | ||||
|                 alerttitle = GetTextByKey("P_MM_ADDMAKE", "Add Make"); | ||||
|             } | ||||
|  | ||||
|             if (!item.Name || item.Name.length == 0) { | ||||
|                 showAlert(GetTextByKey("P_MM_MAKENAMEEMPTY", 'Make name cannot be empty.'), alerttitle); | ||||
|                 $('#dialog_name').focus(); | ||||
|                 return; | ||||
|             } | ||||
|  | ||||
|             var param = JSON.stringify(item); | ||||
|             param = htmlencode(param); | ||||
|             devicerequest("SaveMachineMake", param, function (data) { | ||||
|                 if (data !== 'OK') { | ||||
|                     showAlert(data, GetTextByKey("P_MM_SAVEMAKE", 'Save Make')); | ||||
|                 } else { | ||||
|                     $('#dialog_addmake').hideDialog(); | ||||
|                     GetMakes(); | ||||
|                 } | ||||
|             }, function (err) { | ||||
|                 showAlert(GetTextByKey("P_MM_FAILEDSAVEMAKE", 'Failed to save Make.'), GetTextByKey("P_MM_SAVEMAKE", 'Save Make')); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         function OnDeleteMake(make) { | ||||
|             if (!make) { | ||||
|                 return; | ||||
|             } | ||||
|             showConfirm(GetTextByKey("P_MM_AREYOUSUREYOUWANTTODELETETHISMAKE", 'Are you sure you want to delete this Make?'), GetTextByKey("P_MM_DELETEMAKE", 'Delete Make'), function () { | ||||
|                 devicerequest("DELETEMACHINEMAKE", make.ID, function (data) { | ||||
|                     if (data !== 'OK') | ||||
|                         showAlert(data, GetTextByKey("P_MM_DELETEMAKE", 'Delete Make')); | ||||
|                     else | ||||
|                         GetMakes(); | ||||
|                 }, function (err) { | ||||
|                     showAlert(GetTextByKey("P_MM_FAILEDTODELETETHISMAKE", 'Failed to delete this Make.'), GetTextByKey("P_MM_DELETEMAKE", 'Delete Make')); | ||||
|                 }); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         function OnAddModel() { | ||||
|             modelID = undefined; | ||||
|             $('#dialog_name').val(''); | ||||
|             if (selectedMake) | ||||
|                 $('#dialog_make').val(selectedMake.ID); | ||||
|             else | ||||
|                 $('#dialog_make').find("option:first").prop("selected", "selected"); | ||||
|             $('#dialog_type').dropdownVal(""); | ||||
|  | ||||
|             $('#dialog_addmodel .dialog-title span.title').text(GetTextByKey("P_MM_ADDMODEL", "Add Model")); | ||||
|             showmaskbg(true); | ||||
|             $('#dialog_addmodel') | ||||
|                 .attr('act', 'add') | ||||
|                 .css({ | ||||
|                     'top': (document.documentElement.clientHeight - $('#dialog_addmodel').height()) / 3, | ||||
|                     'left': (document.documentElement.clientWidth - $('#dialog_addmodel').width()) / 2 | ||||
|                 }) | ||||
|                 .showDialogfixed(); | ||||
|             $('#dialog_name').focus(); | ||||
|         } | ||||
|  | ||||
|         var modelID; | ||||
|         function OnEditModel(e) { | ||||
|             if (!IsSuperAdmin) | ||||
|                 return; | ||||
|             var model = grid_dtmodel.source[grid_dtmodel.selectedIndex].Values; | ||||
|             if (!model) { | ||||
|                 modelID = undefined; | ||||
|                 return; | ||||
|             } | ||||
|             //if (!model.CanEdit) | ||||
|             //    return; | ||||
|  | ||||
|             modelID = model.ID; | ||||
|             $('#dialog_name').val(model.Name); | ||||
|             $('#dialog_make').val(model.MakeID); | ||||
|             $('#dialog_type').dropdownVal(model.TypeID); | ||||
|  | ||||
|             $('#dialog_addmodel .dialog-title span.title').text(GetTextByKey("P_MM_EDITMODEL", 'Edit Model')); | ||||
|             showmaskbg(true); | ||||
|             $('#dialog_addmodel') | ||||
|                 .attr('act', 'edit') | ||||
|                 .css({ | ||||
|                     'top': (document.documentElement.clientHeight - $('#dialog_addmodel').height()) / 3, | ||||
|                     'left': (document.documentElement.clientWidth - $('#dialog_addmodel').width()) / 2 | ||||
|                 }) | ||||
|                 .showDialogfixed(); | ||||
|             $('#dialog_name').focus(); | ||||
|         } | ||||
|  | ||||
|         function OnDeleteModel(model) { | ||||
|             if (!model) { | ||||
|                 return; | ||||
|             } | ||||
|             var alerttitle = GetTextByKey("P_MM_DELETEMODEL", "Delete Model"); | ||||
|             showConfirm(GetTextByKey("P_MM_DOYOUWANTTODELETETHEMODEL", 'Do you want to delete the Model?'), alerttitle, function () { | ||||
|                 devicerequest("DELETEMACHINEMODEL", model.ID, function (data) { | ||||
|                     if (data !== 'OK') | ||||
|                         showAlert(data, alerttitle); | ||||
|                     else | ||||
|                         GetModels(); | ||||
|  | ||||
|                 }, function (err) { | ||||
|                     showAlert(GetTextByKey("P_MM_FAILEDTODELETETHISMODEL", 'Failed to delete this Model.'), alerttitle); | ||||
|                 }); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         function GetModels() { | ||||
|             var make = selectedMake; | ||||
|             if (!make) return; | ||||
|  | ||||
|             showloading(true); | ||||
|             var makeid = make.ID; | ||||
|             var searchtxt = htmlencode($.trim($('#txtModelSearch').val())); | ||||
|             var ps = [makeid, searchtxt] | ||||
|             devicerequest("GetAssetModels", JSON.stringify(ps), function (data) { | ||||
|                 if (typeof (data) === "string") { | ||||
|                     showAlert(data, GetTextByKey("P_MM_ERROR", 'Error')); | ||||
|                     return; | ||||
|                 } | ||||
|  | ||||
|                 showModels(data); | ||||
|  | ||||
|                 showloading(false); | ||||
|             }, function (err) { | ||||
|                 showloading(false); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|  | ||||
|         function showModels(data) { | ||||
|             var rows = []; | ||||
|             for (var i = 0; i < data.length; i++) { | ||||
|                 var r = data[i]; | ||||
|                 var fr = { Values: r }; | ||||
|                 rows.push(fr); | ||||
|             } | ||||
|             grid_dtmodel.setData(rows); | ||||
|         } | ||||
|  | ||||
|  | ||||
|         var grid_dtmodel; | ||||
|         function InitModelGridData() { | ||||
|             $('#btnEdit').attr("disabled", "disabled"); | ||||
|  | ||||
|             grid_dtmodel = new GridView('#modellist'); | ||||
|             grid_dtmodel.lang = { | ||||
|                 all: GetTextByKey("P_GRID_ALL", "(All)"), | ||||
|                 ok: GetTextByKey("P_GRID_OK", "OK"), | ||||
|                 reset: GetTextByKey("P_GRID_RESET", "Reset") | ||||
|             }; | ||||
|             var list_columns = [ | ||||
|                 { name: 'Name', caption: GetTextByKey("P_MM_MODEL", "Model"), valueIndex: 'Name', css: { 'width': 300, 'text-align': 'left' } }, | ||||
|                 { name: 'TypeName', caption: GetTextByKey("P_MM_TYPE", "Type"), valueIndex: 'TypeName', allowFilter: true, css: { 'width': 300, 'text-align': 'left' } }, | ||||
|                 //{ name: 'Edit', caption: "", css: { 'width': 30, 'text-align': 'center' } }, | ||||
|                 //{ name: 'Delete', caption: "", css: { 'width': 30, 'text-align': 'center' } } | ||||
|             ]; | ||||
|             var columns = []; | ||||
|             // head | ||||
|             for (var hd in list_columns) { | ||||
|                 var col = {}; | ||||
|                 col.name = list_columns[hd].name; | ||||
|                 col.caption = list_columns[hd].caption; | ||||
|                 col.visible = true; | ||||
|                 col.sortable = true; | ||||
|                 col.width = list_columns[hd].css.width; | ||||
|                 col.align = list_columns[hd].css["text-align"] | ||||
|                 col.key = list_columns[hd].valueIndex; | ||||
|                 col.allowFilter = list_columns[hd].allowFilter; | ||||
|                 if (col.name === "Edit") { | ||||
|                     if (!IsSuperAdmin) continue; | ||||
|                     col.isurl = true; | ||||
|                     col.text = "\uf044"; | ||||
|                     col.events = { | ||||
|                         onclick: function () { | ||||
|                             //if (this.CanEdit) | ||||
|                             OnEditModel() | ||||
|                         } | ||||
|                     }; | ||||
|                     col.classFilter = function (e) { | ||||
|                         return "icon-col"; | ||||
|                     } | ||||
|                     col.styleFilter = function (e) { | ||||
|                         //return { | ||||
|                         //    display: !e.CanEdit ? 'none' : '' | ||||
|                         //}; | ||||
|                     }; | ||||
|                     col.attrs = { 'title': GetTextByKey("P_MM_EDIT", 'Edit') }; | ||||
|                 } | ||||
|                 else if (col.name === "Delete") { | ||||
|                     if (!IsSuperAdmin) continue; | ||||
|                     col.isurl = true; | ||||
|                     col.text = "\uf00d"; | ||||
|                     col.events = { | ||||
|                         onclick: function () { | ||||
|                             //if (this.CanEdit) | ||||
|                             OnDeleteModel(this); | ||||
|                         } | ||||
|                     }; | ||||
|                     col.classFilter = function (e) { | ||||
|                         return "icon-col"; | ||||
|                     }; | ||||
|                     col.styleFilter = function (e) { | ||||
|                         //return { | ||||
|                         //    display: !e.CanEdit ? 'none' : '' | ||||
|                         //}; | ||||
|                     }; | ||||
|                     col.attrs = { 'title': GetTextByKey("P_MM_DELETE", 'Delete') }; | ||||
|                 } | ||||
|                 columns.push(col); | ||||
|             } | ||||
|             grid_dtmodel.canMultiSelect = false; | ||||
|             grid_dtmodel.columns = columns; | ||||
|             grid_dtmodel.init(); | ||||
|             //grid_dtmodel.rowdblclick = OnEditModel; | ||||
|  | ||||
|             grid_dtmodel.selectedrowchanged = function (rowindex) { | ||||
|                 var rowdata = grid_dtmodel.source[rowindex]; | ||||
|                 if (rowdata) { | ||||
|                     modelID = rowdata.Values.ID; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         function OnSaveModel() { | ||||
|             var item = { | ||||
|                 'Name': $.trim($('#dialog_name').val()), | ||||
|                 'MakeID': $.trim($('#dialog_make').val()), | ||||
|                 'TypeID': $.trim($('#dialog_type').dropdownVal()) | ||||
|             }; | ||||
|             var alerttitle; | ||||
|             if (modelID) { | ||||
|                 item.ID = modelID; | ||||
|                 alerttitle = GetTextByKey("P_MM_EDITMODEL", "Edit Model"); | ||||
|             } else { | ||||
|                 item.ID = -1; | ||||
|                 alerttitle = GetTextByKey("P_MM_ADDMODEL", "Add Model"); | ||||
|             } | ||||
|  | ||||
|             if (!item.Name || item.Name.length == 0) { | ||||
|                 showAlert(GetTextByKey("P_MM_MODELNAMEEMPTY", 'Model name cannot be empty.'), alerttitle); | ||||
|                 $('#dialog_name').focus(); | ||||
|                 return; | ||||
|             } | ||||
|  | ||||
|             showloading(true); | ||||
|             var param = JSON.stringify(item); | ||||
|             param = htmlencode(param); | ||||
|             devicerequest("SAVEMACHINEMODEL", param, function (data) { | ||||
|                 if (data !== 'OK') { | ||||
|                     showAlert(data, GetTextByKey("P_MM_SAVEMAKE", 'Save Make')); | ||||
|                 } else { | ||||
|                     $('#dialog_addmodel').hideDialog(); | ||||
|                     showloading(false); | ||||
|                     GetModels(); | ||||
|                 } | ||||
|             }, function (err) { | ||||
|                 showloading(false); | ||||
|                 showAlert(GetTextByKey("P_MM_FAILEDSAVEMAKE", 'Failed to save Make.'), GetTextByKey("P_MM_SAVEMAKE", 'Save Make')); | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         var _MakeObject = undefined; | ||||
|         $(function () { | ||||
|             setPageTitle(GetTextByKey("P_MANAGEMODELS", "Manage Models"), true); | ||||
|             _MakeObject = new MakeObject(); | ||||
|             //InitMakeGridData(); | ||||
|             InitModelGridData(); | ||||
|  | ||||
|             GetMakes(); | ||||
|             GetMachineTypes(); | ||||
|  | ||||
|             $('#dialog_type').dropdown([ | ||||
|             ], { | ||||
|                 search: true, | ||||
|                 valueKey: 'Key', | ||||
|                 textKey: 'Value' | ||||
|             }); | ||||
|  | ||||
|             $('#dialog_addmake').dialog(function () { | ||||
|                 showmaskbg(false); | ||||
|             }); | ||||
|  | ||||
|             $('#dialog_addmodel').dialog(function () { | ||||
|                 showmaskbg(false); | ||||
|             }); | ||||
|  | ||||
|             $('#txtMakeSearch').keydown(searchMake); | ||||
|             $('#txtModelSearch').keydown(searchModel); | ||||
|  | ||||
|             $(window).resize(function () { | ||||
|                 $("#modellist").css("height", $(window).height() - $("#modellist").offset().top - 4); | ||||
|                 grid_dtmodel && grid_dtmodel.resize(); | ||||
|             }).resize(); | ||||
|  | ||||
|             document.getElementById('leftdiv').addEventListener('scroll', onscrollMakes, { passive: true }); | ||||
|         }); | ||||
|  | ||||
|         function searchMake(e) { | ||||
|             if (e.keyCode == 13 || e.keyCode == 9) { | ||||
|                 GetMakes(); | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         function searchModel(e) { | ||||
|             if (e.keyCode == 13 || e.keyCode == 9) { | ||||
|                 GetModels(); | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         function GetMachineTypes() { | ||||
|             devicerequest("GetMachineTypes", '', function (data) { | ||||
|                 if (data && data.length > 0) { | ||||
|                     typessdata = data; | ||||
|                     //$("#dialog_type").empty(); | ||||
|                     //for (var i = 0; i < data.length; i++) { | ||||
|                     //    var kv = data[i]; | ||||
|                     //    op = $("<option></option>").val(kv.Key).text(kv.Value); | ||||
|                     //    $("#dialog_type").append(op); | ||||
|                     //} | ||||
|  | ||||
|                     var dropdown = $('#dialog_type').data('dropdown'); | ||||
|                     dropdown.setSource(typessdata); | ||||
|                 } | ||||
|             }, function (err) { | ||||
|             }); | ||||
|         } | ||||
|  | ||||
|         function onscrollMakes(e) { | ||||
|             _MakeObject && _MakeObject.onscrollAssets(e); | ||||
|         } | ||||
|  | ||||
|         var selectedMake = undefined; | ||||
|         if (typeof (MakeObject) != "function") { | ||||
|             MakeObject = function () { | ||||
|                 var REDUN = 2; | ||||
|                 var ROW_HEIGHT = 24; | ||||
|                 var MIN_LENGTH = 40; | ||||
|                 var trunc = function (val) { | ||||
|                     return (val > 0 ? Math.floor : Math.ceil)(val); | ||||
|                 }; | ||||
|  | ||||
|                 var makes = []; | ||||
|                 var vm = new Vue({ | ||||
|                     el: '#makelist', | ||||
|                     data: { | ||||
|                         startIndex: 0, | ||||
|                         bodyContentStyle: { top: null }, | ||||
|                         bodyContainerHeight: 0, | ||||
|                         bodyContainerStyle: { height: null }, | ||||
|                         scrollTop: 0 | ||||
|                     }, | ||||
|                     computed: { | ||||
|                         bodyClientRowCount: function () { | ||||
|                             var height = document.getElementById('leftdiv').clientHeight; | ||||
|                             return trunc((height - 1) / ROW_HEIGHT) + 1; | ||||
|                         }, | ||||
|                         innerMakes: function () { | ||||
|                             var start = this.startIndex; | ||||
|                             if (start < 0) { | ||||
|                                 start = 0; | ||||
|                             } | ||||
|                             if (makes == null || makes.length < MIN_LENGTH) { | ||||
|                                 return makes.slice(); | ||||
|                             } | ||||
|                             var end = this.bodyClientRowCount + start + (REDUN * 2) + 1; | ||||
|                             if (end > makes.length) { | ||||
|                                 end = makes.length; | ||||
|                             } | ||||
|                             return makes.slice(start, end); | ||||
|                         } | ||||
|                     }, | ||||
|                     methods: { | ||||
|                         reload: function (data) { | ||||
|                             makes = data; | ||||
|  | ||||
|                             var height = data && data.length * ROW_HEIGHT; | ||||
|                             this.bodyContainerHeight = height; | ||||
|                             this.bodyContainerStyle.height = height && (height + 'px'); | ||||
|                             if (data.length < MIN_LENGTH) { | ||||
|                                 this.startIndex = -1; | ||||
|                                 this.startIndex = 0; | ||||
|                                 this.bodyContentStyle.top = '0px'; | ||||
|                             } else { | ||||
|                                 var index = this.startIndex; | ||||
|                                 var lastIndex = data.length - this.bodyClientRowCount; | ||||
|                                 if (index > lastIndex) { | ||||
|                                     index = lastIndex; | ||||
|                                 } | ||||
|                                 this.startIndex = -1; | ||||
|                                 this.startIndex = index; | ||||
|                             } | ||||
|                         }, | ||||
|                         refresh: function () { | ||||
|                             var index = this.startIndex; | ||||
|                             this.startIndex = -1; | ||||
|                             this.startIndex = index; | ||||
|                         }, | ||||
|                         makeClick: function (make, ev) { | ||||
|                             if (selectedMake && selectedMake.ID == make.ID) | ||||
|                                 return; | ||||
|                             if (selectedMake) | ||||
|                                 selectedMake.Highlight = false; | ||||
|                             make.Highlight = true; | ||||
|                             selectedMake = make; | ||||
|                             vm.refresh(); | ||||
|  | ||||
|                             GetModels(); | ||||
|                         }, | ||||
|                         makeEdit: function (make, ev) { | ||||
|                             OnEditMake(make); | ||||
|                         }, | ||||
|                         makeDelete: function (make, ev) { | ||||
|                             OnDeleteMake(make); | ||||
|                         } | ||||
|                     } | ||||
|                 }); | ||||
|  | ||||
|                 this.onscrollAssets = function (e) { | ||||
|                     if (makes == null || makes.length < MIN_LENGTH) { | ||||
|                         return; | ||||
|                     } | ||||
|                     var top = e == null ? 0 : e.target.scrollTop; | ||||
|                     top -= (top % ROW_HEIGHT) + (REDUN * ROW_HEIGHT); | ||||
|                     if (top < 0) { | ||||
|                         top = 0; | ||||
|                     } else { | ||||
|                         var bottomTop = vm.bodyContainerHeight - ((vm.bodyClientRowCount + (REDUN * 2) + 1) * ROW_HEIGHT); | ||||
|                         if (top > bottomTop) { | ||||
|                             top = bottomTop; | ||||
|                         } | ||||
|                     } | ||||
|                     if (vm.scrollTop !== top) { | ||||
|                         vm.scrollTop = top; | ||||
|                         vm.startIndex = top / ROW_HEIGHT; | ||||
|                         vm.bodyContentStyle.top = top && (top + 'px'); | ||||
|                     } | ||||
|                 }; | ||||
|  | ||||
|                 this.showMakes = function (data) { | ||||
|                     vm.reload(data); | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|  | ||||
|     </script> | ||||
| </asp:Content> | ||||
| <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> | ||||
|     <div id="recordcontent" style="padding: 0px; margin: 0px; min-width: 800px;"> | ||||
|         <div class="page_title" data-lgid="P_MANAGEMODELS">Manage Models</div> | ||||
|         <div class="search_bar" style="position: relative;"> | ||||
|             <input type="text" id="txtMakeSearch" autocomplete="off" style="width: 145px;" /> | ||||
|             <input class="search" type="button" onclick="GetMakes();" value="Search" data-lgid="P_MM_SEARCH" style="margin-left: 5px;" /> | ||||
|             <span class="sbutton iconadd" onclick="OnAddMake();" style="margin-right: 30px; padding: 0px 10px 0px 10px;" data-lgid="P_MM_ADD">Add</span> | ||||
|  | ||||
|             <div style="position: absolute; left: 345px; top: 0;"> | ||||
|                 <input type="text" id="txtModelSearch" autocomplete="off" style="width: 145px;" /> | ||||
|                 <input class="search" type="button" onclick="GetModels();" value="Search" data-lgid="P_MM_SEARCH" /> | ||||
|                 <span class="sbutton iconadd" onclick="OnAddModel();" data-lgid="P_MM_ADD">Add</span> | ||||
|             </div> | ||||
|             <%--<span class="sbutton iconrefresh" onclick="OnRefresh();">Refresh</span>--%> | ||||
|         </div> | ||||
|         <div class="clear"></div> | ||||
|         <div id="leftdiv" style="position: absolute; width: 320px; top: 75px; left: 0px; bottom: 4px; overflow: auto; border: 1px solid #9a9a9a;"> | ||||
|             <div id="makelist" v-bind:style="bodyContainerStyle" style="position: relative"> | ||||
|                 <div v-bind:style="bodyContentStyle" style="position: absolute; width: 100%;"> | ||||
|                     <div class='makeitem' v-for="make in innerMakes" v-bind:class="make.Highlight ?'selected': ''"> | ||||
|                         <table style="border-spacing: 0; width: 100%; height: 30px;"> | ||||
|                             <tr> | ||||
|                                 <td v-on:click="makeClick(make,$event)">{{make.Name}}</td> | ||||
|                                 <td style="width: 20px;"><span class="sbtn iconedit" style="display: none;" v-bind:class="IsSuperAdmin ?'': 'sbtnhide'" v-on:click="makeEdit(make,$event)"></span></td> | ||||
|                                 <td style="width: 20px;"><span class="sbtn icondelete" style="display: none;" v-bind:class="IsSuperAdmin ?'': 'sbtnhide'" v-on:click="makeDelete(make,$event)"></span></td> | ||||
|                             </tr> | ||||
|                         </table> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <div style="position: absolute; top: 40px; left: 330px; bottom: 2px; border-left: 1px solid #9a9a9a;"></div> | ||||
|         <div style="position: absolute; top: 75px; left: 340px; bottom: 0; right: 0px; overflow: auto;"> | ||||
|             <div id="modellist"></div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div id="mask_bg" style="display: none;"> | ||||
|         <div class="loading c-spin"></div> | ||||
|     </div> | ||||
|  | ||||
|     <div class="dialog" id="dialog_addmake" style="display: none; width: 360px;"> | ||||
|         <div class="dialog-title"><span class="title" data-lgid="P_MM_ADDMAKE">Add Make</span><em class="dialog-close"></em></div> | ||||
|         <div class="dialog-content"> | ||||
|             <table> | ||||
|                 <tr> | ||||
|                     <td class="label" data-lgid="P_MM_MAKE_COLON">Make:</td> | ||||
|                     <td> | ||||
|                         <input type="text" id="dialog_makename" style="width: 220px;" maxlength="100" tabindex="1" /></td> | ||||
|                 </tr> | ||||
|             </table> | ||||
|         </div> | ||||
|         <div class="dialog-func"> | ||||
|             <input type="button" value="Cancel" data-lgid="P_MM_CANCEL" class="dialog-close" tabindex="3" /> | ||||
|             <input type="button" onclick="OnSaveMake();" value="OK" data-lgid="P_MM_OK" tabindex="2" /> | ||||
|             <div class="clear"></div> | ||||
|         </div> | ||||
|     </div> | ||||
|  | ||||
|     <div class="dialog" id="dialog_addmodel" style="display: none; width: 360px;"> | ||||
|         <div class="dialog-title"><span class="title" data-lgid="P_MM_ADDMODEL">Add Model</span><em class="dialog-close"></em></div> | ||||
|         <div class="dialog-content"> | ||||
|             <table> | ||||
|                 <tr> | ||||
|                     <td class="label" data-lgid="P_MM_MAKE_COLON">Make:</td> | ||||
|                     <td> | ||||
|                         <select id="dialog_make" tabindex="1" style="width: 224px; height: 22px;"></select></td> | ||||
|                 </tr> | ||||
|                 <tr> | ||||
|                     <td class="label" data-lgid="P_MM_MODEL_COLON">Model:</td> | ||||
|                     <td> | ||||
|                         <input type="text" id="dialog_name" maxlength="100" style="width: 220px; height: 22px;" tabindex="2" /></td> | ||||
|                 </tr> | ||||
|                 <tr> | ||||
|                     <td class="label" data-lgid="P_MM_TYPE_COLON">Type:</td> | ||||
|                     <td> | ||||
|                         <div id="dialog_type" tabindex="3" style="width: 224px; height: 22px;"></div> | ||||
|                         <%--<select id="dialog_type" tabindex="3" style="width: 224px; height: 22px;"></select>--%> | ||||
|                     </td> | ||||
|                 </tr> | ||||
|             </table> | ||||
|         </div> | ||||
|         <div class="dialog-func"> | ||||
|             <input type="button" value="Cancel" data-lgid="P_MM_CANCEL" class="dialog-close" tabindex="5" /> | ||||
|             <input type="button" onclick="OnSaveModel();" value="OK" data-lgid="P_MM_OK" tabindex="4" /> | ||||
|             <div class="clear"></div> | ||||
|         </div> | ||||
|     </div> | ||||
| </asp:Content> | ||||
		Reference in New Issue
	
	Block a user