513 lines
25 KiB
JavaScript
513 lines
25 KiB
JavaScript
!function (factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
define(['modules/editor'], function (Editor) {
|
|
return factory(window.jQuery, Editor);
|
|
});
|
|
}
|
|
}(function ($, Editor) {
|
|
'use strict';
|
|
|
|
var layouts = {
|
|
title: GetTextByKey('P_LAYOUTS', 'Layouts'),
|
|
description: GetTextByKey('P_LAYOUTS', 'Layouts'),
|
|
version: '1.0',
|
|
isteam: false,
|
|
changed: false,
|
|
ui: {}
|
|
};
|
|
|
|
function createHeader() {
|
|
var header = $('<div></div>');
|
|
header.append($('<div class="page_title"></div>').text(layouts.title));
|
|
setPageTitle(layouts.title, true);
|
|
var search_bar = $('<div class="search_bar"></div>');
|
|
header.append(search_bar);
|
|
search_bar.append('<input type="password" autocomplete="new-password" style="display: none" />');
|
|
var searchinputcontrol = $('<input type="text" style="margin-left:10px;" autocomplete="off" />');
|
|
layouts.searchInput = searchinputcontrol;
|
|
search_bar.append(searchinputcontrol);
|
|
searchinputcontrol.keydown(function (e) {
|
|
if (e.keyCode == 13 || e.keyCode == 9)
|
|
layouts.refresh();
|
|
});
|
|
var btnRefresh = $('<input class="search" type="button" style="margin-left:10px;"/>').val(GetTextByKey("P_IPT_SEARCH", "Search"));
|
|
search_bar.append(btnRefresh);
|
|
btnRefresh.click(function () {
|
|
layouts.refresh();
|
|
});
|
|
|
|
var func = $('<div class="function_title"></div>');
|
|
var iconAdd = $('<span class="sbutton iconadd"></span>').text(GetTextByKey("P_IPT_ADD", "Add")).on('click', function () {
|
|
layouts.onadd();
|
|
});
|
|
func.append(iconAdd);
|
|
var iconEdit = $('<span class="sbutton iconedit"></span>').text(GetTextByKey("P_IPT_EDIT", "Edit")).on('click', function () {
|
|
if (layouts.grid.selectedIndex >= 0) {
|
|
layouts.onedit();
|
|
}
|
|
}).prop('disabled', true);
|
|
layouts.ui.edit = iconEdit;
|
|
func.append(iconEdit);
|
|
var iconRefresh = $('<span class="sbutton iconrefresh"></span>').text(GetTextByKey("P_IPT_REFRESH", "Refresh")).on('click', function () {
|
|
layouts.refresh();
|
|
});
|
|
func.append(iconRefresh);
|
|
header.append(func)
|
|
|
|
return header;
|
|
}
|
|
|
|
function InitGridData() {
|
|
var div_grid = $('<div style="flex: 1 1 auto"></div>');
|
|
|
|
var grid_dt = new GridView(div_grid);
|
|
layouts.grid = grid_dt;
|
|
grid_dt.lang = {
|
|
all: GetTextByKey("P_GRID_ALL", "(All)"),
|
|
ok: GetTextByKey("P_GRID_OK", "OK"),
|
|
reset: GetTextByKey("P_GRID_RESET", "Reset")
|
|
};
|
|
grid_dt.canMultiSelect = false;
|
|
grid_dt.columns = [
|
|
{
|
|
caption: GetTextByKey('P_LAYOUT_NAME', 'Layout Name'),
|
|
key: 'Name',
|
|
width: 200,
|
|
isurl: true,
|
|
events: {
|
|
onclick: function () {
|
|
doedit(this.Id);
|
|
}
|
|
},
|
|
styleFilter: function () {
|
|
return {
|
|
color: 'initial',
|
|
cursor: 'pointer'
|
|
};
|
|
}
|
|
},
|
|
{
|
|
caption: GetTextByKey('P_LAYOUT_NOTES', 'Notes'),
|
|
key: 'Notes',
|
|
width: 300
|
|
},
|
|
{
|
|
isurl: true,
|
|
resizable: false,
|
|
orderable: false,
|
|
sortable: false,
|
|
width: 40,
|
|
align: 'center',
|
|
text: '\uf044',
|
|
events: {
|
|
onclick: function () {
|
|
doedit(this.Id);
|
|
}
|
|
},
|
|
classFilter: function () { return 'icon-col' },
|
|
attrs: {
|
|
title: GetTextByKey('P_WOS_EDIT', 'Edit')
|
|
}
|
|
},
|
|
{
|
|
isurl: true,
|
|
resizable: false,
|
|
orderable: false,
|
|
sortable: false,
|
|
width: 40,
|
|
align: 'center',
|
|
text: '\uf00d',
|
|
events: {
|
|
onclick: function () {
|
|
var id = this.Id;
|
|
showConfirm(
|
|
GetTextByKey('P_LAYOUT_DELETETIPS', 'Are you sure you want to delete the layout?'),
|
|
GetTextByKey('P_LAYOUTS', 'Layouts'),
|
|
function () {
|
|
inspectionrequest('DeleteInspectLayout',
|
|
JSON.stringify([layouts.isteam ? 1 : 0, id]),
|
|
function (data) {
|
|
if (data == 'OK') {
|
|
layouts.refresh();
|
|
} else {
|
|
showAlert(data != 'Failed' ? data : GetTextByKey('P_LAYOUT_FAILEDDELETE', 'Failed to delete this layout.'), GetTextByKey('P_LAYOUTS', 'Layouts'));
|
|
}
|
|
},
|
|
function () {
|
|
showAlert(GetTextByKey('P_LAYOUT_FAILEDDELETE', 'Failed to delete this layout.'), GetTextByKey('P_LAYOUTS', 'Layouts'));
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
},
|
|
classFilter: function () { return 'icon-col' },
|
|
attrs: {
|
|
title: GetTextByKey('P_WOS_DELETE', 'Delete')
|
|
}
|
|
}
|
|
];
|
|
grid_dt.init();
|
|
grid_dt.rowdblclick = layouts.onedit;
|
|
|
|
grid_dt.selectedrowchanged = function (rowindex) {
|
|
layouts.ui.edit.prop('disabled', rowindex >= 0);
|
|
}
|
|
return div_grid;
|
|
}
|
|
|
|
Object.defineProperty(layouts, 'createContent', {
|
|
value: function (isteam) {
|
|
layouts.isteam = isteam && isteam[0] == '1';
|
|
var content = $('<div style="height:100%; display:flex; flex-direction:column"></div>');
|
|
content.append(createHeader());
|
|
content.append(InitGridData());
|
|
content.append('<div style="height: 2px"></div>');
|
|
|
|
layouts.refresh();
|
|
return content;
|
|
}
|
|
});
|
|
|
|
Object.defineProperty(layouts, 'refresh', {
|
|
value: function () {
|
|
layouts.changed = false;
|
|
showmaskbg(true);
|
|
inspectionrequest('GetInspectLayouts', encodeURIComponent(
|
|
JSON.stringify([layouts.isteam ? 1 : 0, layouts.searchInput.val()])
|
|
), function (data) {
|
|
if ($.isArray(data)) {
|
|
layouts.grid.setData(data.map(function (i) { return { Values: i } }));
|
|
} else {
|
|
showAlert(data, GetTextByKey('P_LAYOUTS', 'Layouts'));
|
|
}
|
|
showmaskbg(false);
|
|
}, function () {
|
|
showmaskbg(false);
|
|
});
|
|
}
|
|
});
|
|
|
|
function appendToolbar(ele) {
|
|
ele.append(
|
|
$('<div class="editor-toolbar"></div>').append(
|
|
$('<select data-edit="fontname"></select>').append(
|
|
$('<option selected>- Font -</option>'),
|
|
$('<option>Arial</option>'),
|
|
$('<option>Arial Black</option>'),
|
|
$('<option>Courier New</option>'),
|
|
$('<option>Times New Roman</option>')
|
|
),
|
|
$('<select data-edit="fontsize"></select>').append(
|
|
$('<option selected>- Size -</option>'),
|
|
$('<option value="1">Very small</option>'),
|
|
$('<option value="2">A bit small</option>'),
|
|
$('<option value="3">Normal</option>'),
|
|
$('<option value="4">Medium-large</option>'),
|
|
$('<option value="5">Big</option>'),
|
|
$('<option value="6">Very big</option>'),
|
|
$('<option value="7">Maximum</option>')
|
|
),
|
|
$('<a data-edit="undo" title="Undo"><svg><use href="#symbol-undo"></use></svg></a>'),
|
|
$('<a data-edit="redo" title="Redo"><svg><use href="#symbol-redo"></use></svg></a>'),
|
|
$('<a data-edit="bold" title="Bold"><svg class="black"><use href="#symbol-bold"></use></svg></a>'),
|
|
$('<a data-edit="italic" title="Italic"><svg class="black"><use href="#symbol-italic"></use></svg></a>'),
|
|
$('<a data-edit="underline" title="Underline"><svg class="black"><use href="#symbol-underline"></use></svg></a>'),
|
|
$('<a data-edit="createlink" title="Hyperlink"><svg><use href="#symbol-link"></use></svg></a>'),
|
|
$('<select data-edit="forecolor" style="margin-left: 10px">').append(
|
|
$('<option selected>- Color -</option>'),
|
|
$('<option value="red">Red</option>'),
|
|
$('<option value="blue">Blue</option>'),
|
|
$('<option value="green">Green</option>'),
|
|
$('<option value="black">Black</option>')
|
|
),
|
|
$('<select data-edit>').append(
|
|
$('<option selected>- Fields -</option>'),
|
|
$('<option value="[Advisor]">Advisor</option>'),
|
|
$('<option value="[Asset_Groups]">Asset Group(s)</option>'),
|
|
$('<option value="[Asset_Name]">Asset Name</option>'),
|
|
$('<option value="[Asset_Name_Custom]">Asset Name (Custom)</option>'),
|
|
$('<option value="[Asset_Type]">Asset Type</option>'),
|
|
$('<option value="[Creator]">Creator</option>'),
|
|
$('<option value="[Current_Jobsite]">Current Jobsite</option>'),
|
|
$('<option value="[Current_Location]">Current Location</option>'),
|
|
$('<option value="[Customer_Visible]">Customer Visible</option>'),
|
|
$('<option value="[Date_Performed]">Date Performed</option>'),
|
|
$('<option value="[DateTime_Performed]">Date/Time Performed</option>'),
|
|
$('<option value="[Engine_Hours]">Engine Hours</option>'),
|
|
$('<option value="[Odometer]">Odometer</option>'),
|
|
$('<option value="[Engine_Hours_Or_Odometer]">Engine Hours Or Odometer</option>'),
|
|
$('<option value="[Make]">Make</option>'),
|
|
$('<option value="[Model]">Model</option>'),
|
|
$('<option value="[VIN]">VIN/SN</option>'),
|
|
$('<option value="[Work_Order_Number]">Work Order Number</option>'),
|
|
$('<option value="[Work_Order_Type]">Work Order Type</option>'),
|
|
$('<option value="[Parts_Order_Number]">Parts Order Number</option>'),
|
|
$('<option value="[Year]">Year</option>')
|
|
)
|
|
)
|
|
);
|
|
return ele;
|
|
}
|
|
|
|
function initEditor(content, id) {
|
|
var textarea = $('<textarea class="editor-content"></textarea>');
|
|
if (!layouts.isteam) {
|
|
var selector = $('<select class="editor-select"></select>').append(
|
|
$('<option></option>'),
|
|
$('<option value="[Advisor]">Advisor</option>'),
|
|
$('<option value="[Asset_Groups]">Asset Group(s)</option>'),
|
|
$('<option value="[Asset_Name]">Asset Name</option>'),
|
|
$('<option value="[Asset_Name_Custom]">Asset Name (Custom)</option>'),
|
|
$('<option value="[Asset_Type]">Asset Type</option>'),
|
|
$('<option value="[Creator]">Creator</option>'),
|
|
$('<option value="[Current_Jobsite]">Current Jobsite</option>'),
|
|
$('<option value="[Current_Location]">Current Location</option>'),
|
|
$('<option value="[Customer_Visible]">Customer Visible</option>'),
|
|
$('<option value="[Date_Performed]">Date Performed</option>'),
|
|
$('<option value="[DateTime_Performed]">Date/Time Performed</option>'),
|
|
$('<option value="[Engine_Hours]">Engine Hours</option>'),
|
|
$('<option value="[Odometer]">Odometer</option>'),
|
|
$('<option value="[Engine_Hours_Or_Odometer]">Engine Hours Or Odometer</option>'),
|
|
$('<option value="[Make]">Make</option>'),
|
|
$('<option value="[Model]">Model</option>'),
|
|
$('<option value="[VIN]">VIN/SN</option>'),
|
|
$('<option value="[Work_Order_Number]">Work Order Number</option>'),
|
|
$('<option value="[Work_Order_Type]">Work Order Type</option>'),
|
|
$('<option value="[Parts_Order_Number]">Parts Order Number</option>'),
|
|
$('<option value="[Year]">Year</option>')
|
|
);
|
|
if (typeof IsCustomerRecord !== 'undefined' && IsCustomerRecord) {
|
|
selector.append(
|
|
$('<option value="[Company_Name]">Company Name</option>'),
|
|
$('<option value="[Contacts]">Contacts</option>'),
|
|
$('<option value="[Customer_Code]">Customer Code</option>'),
|
|
$('<option value="[Location]">Location</option>')
|
|
);
|
|
}
|
|
content.find(id + '-vars').append(
|
|
$('<span></span>').text(GetTextByKey('P_LAYOUT_VARIABLE', 'Variable:')),
|
|
selector.on('change', function () {
|
|
var val = $(this).val();
|
|
var t = textarea[0];
|
|
if (document.selection) {
|
|
textarea.focus();
|
|
var sel = document.selection.createRange();
|
|
sel.text = val;
|
|
textarea.focus();
|
|
} else {
|
|
if (t.selectionStart || t.selectionStart == 0) {
|
|
var start = t.selectionStart;
|
|
var end = t.selectionEnd;
|
|
var scrollTop = t.scrollTop;
|
|
t.value = t.value.substr(0, start) + val + t.value.substr(end, t.value.length);
|
|
textarea.focus();
|
|
t.selectionStart = start + val.length;
|
|
t.selectionEnd = start + val.length;
|
|
t.scrollTop = scrollTop;
|
|
} else {
|
|
t.value += val;
|
|
textarea.focus();
|
|
}
|
|
}
|
|
$(this).val('');
|
|
})
|
|
);
|
|
}
|
|
content.find(id).append(textarea);
|
|
}
|
|
|
|
function editLayout(info) {
|
|
$('#right_popup').load('js/modules/layouts/addlayout.html?v=2', function () {
|
|
var modified = false;
|
|
var deleteIcon = false;
|
|
var content = $(this).applyFleetLanguageText(true);
|
|
content.find('.button-exit').on('click', function () {
|
|
if (modified) {
|
|
showConfirm(
|
|
GetTextByKey('P_LAYOUT_CONFIRMSAVE', 'The inspection layout has been modified, are you sure you want to discard the modifications and exit?'),
|
|
GetTextByKey('P_LAYOUT_EDITINSPECTLAYOUT', 'Edit Inspection Layout'),
|
|
function () {
|
|
showRightPopup(false);
|
|
if (layouts.changed) {
|
|
layouts.refresh();
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
showRightPopup(false);
|
|
if (layouts.changed) {
|
|
layouts.refresh();
|
|
}
|
|
}
|
|
});
|
|
content.find('.button-icon-upload').on('click', function () {
|
|
content.find('.icon-file file').remove();
|
|
$('<input type="file" accept="image/png,image/jpeg" />')
|
|
.hide().appendTo(content.find('.icon-file'))
|
|
.on('change', function () {
|
|
if (!/image\/\w+/.test(this.files[0].type)) {
|
|
showAlert(GetTextByKey("P_LAYOUT_UPLOADICONTIPS", 'The file type for the logo is invalid. The file must be JPG or PNG.'), GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout'));
|
|
$(this).remove();
|
|
return;
|
|
}
|
|
var file = this.files[0];
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = function (e) {
|
|
setTimeout(function () {
|
|
content.find('.img-icon-filename').remove();
|
|
$('<img class="img-icon-filename" />').attr('src', e.target.result).insertAfter(content.find('.icon-file-title'));
|
|
});
|
|
};
|
|
}).click();
|
|
});
|
|
content.find('.button-icon-delete').on('click', function () {
|
|
deleteIcon = true;
|
|
content.find('.img-icon-filename').remove();
|
|
});
|
|
var save = function (exit) {
|
|
return function () {
|
|
var title = GetTextByKey('P_LAYOUT_SAVEINSPECTLAYOUT', 'Save Inspection Layout');
|
|
var name = content.find('.text-layout-name').val();
|
|
name = name && name.trim();
|
|
if (name == null || name.length === 0) {
|
|
showAlert(
|
|
GetTextByKey('P_LAYOUT_NAMEISEQUIRED', 'Layout name is required.'),
|
|
title, null,
|
|
function () { content.find('.text-layout-name').focus() }
|
|
);
|
|
return;
|
|
}
|
|
|
|
var layout = {
|
|
Id: info && info.Id,
|
|
Target: layouts.isteam ? 1 : 0,
|
|
Name: name,
|
|
IncludeLOGO: content.find('#layout-include-logo').prop('checked'),
|
|
Notes: content.find('.text-layout-notes').val(),
|
|
PageHeaderLeft: content.find('.layout-headers-left .editor-content').val(),
|
|
PageHeaderCenter: content.find('.layout-headers-middle .editor-content').val(),
|
|
PageHeaderRight: content.find('.layout-headers-right .editor-content').val(),
|
|
PageFooterLeft: content.find('.layout-footers-left .editor-content').val(),
|
|
PageFooterCenter: content.find('.layout-footers-middle .editor-content').val(),
|
|
PageFooterRight: content.find('.layout-footers-right .editor-content').val()
|
|
};
|
|
var data = new FormData();
|
|
var files = content.find('.icon-file input[type="file"]').prop('files');
|
|
if (files && files[0]) {
|
|
data.append('iconFile', files && files[0]);
|
|
} else if (!deleteIcon) {
|
|
var logo = content.find('.img-icon-filename').prop('src');
|
|
layout.LOGO = logo.substr(logo.indexOf(';base64,') + 8);
|
|
}
|
|
data.append('MethodName', 'SaveInspectLayout');
|
|
data.append('ClientData', encodeURIComponent(JSON.stringify(layout)));
|
|
$.ajax({
|
|
url: window.location.href,
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
data: data,
|
|
success: function (data) {
|
|
if ($.isArray(data)) {
|
|
if (data[1] !== 'Failed') {
|
|
if (exit) {
|
|
showRightPopup(false);
|
|
layouts.refresh();
|
|
return;
|
|
}
|
|
if (info == null) {
|
|
info = layout;
|
|
}
|
|
info.Id = data[0];
|
|
showAlert(data[1], title, null, function () {
|
|
layouts.changed = true;
|
|
modified = false;
|
|
});
|
|
} else {
|
|
showAlert(GetTextByKey('P_MA_PAGEERROR', 'An unknown error occurred. Please refresh page.'), title);
|
|
}
|
|
} else {
|
|
showAlert(data, title);
|
|
}
|
|
},
|
|
error: function (err) {
|
|
showAlert(GetTextByKey('P_MA_PAGEERROR', 'An unknown error occurred. Please refresh page.'), title);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
content.find('.button-save').on('click', save());
|
|
content.find('.button-save-exit').on('click', save(true));
|
|
showRightPopup(true);
|
|
|
|
//new Editor(appendToolbar($(this).find('.layout-headers-left')));
|
|
//new Editor(appendToolbar($(this).find('.layout-headers-middle')));
|
|
//new Editor(appendToolbar($(this).find('.layout-headers-right')));
|
|
//new Editor(appendToolbar($(this).find('.layout-footers-left')));
|
|
//new Editor(appendToolbar($(this).find('.layout-footers-middle')));
|
|
//new Editor(appendToolbar($(this).find('.layout-footers-right')));
|
|
initEditor(content, '.layout-headers-left');
|
|
initEditor(content, '.layout-headers-middle');
|
|
initEditor(content, '.layout-headers-right');
|
|
initEditor(content, '.layout-footers-left');
|
|
initEditor(content, '.layout-footers-middle');
|
|
initEditor(content, '.layout-footers-right');
|
|
|
|
var onchange = function () { modified = true };
|
|
if (info != null) {
|
|
content.find('.text-layout-name').val(info.Name);
|
|
content.find('#layout-include-logo').prop('checked', info.IncludeLOGO);
|
|
if (info.LOGO != null) {
|
|
content.find('.img-icon-filename').attr('src', 'data:image/png;base64,' + info.LOGO);
|
|
}
|
|
content.find('.text-layout-notes').val(info.Notes);
|
|
content.find('.layout-headers-left .editor-content').val(info.PageHeaderLeft);
|
|
content.find('.layout-headers-middle .editor-content').val(info.PageHeaderCenter);
|
|
content.find('.layout-headers-right .editor-content').val(info.PageHeaderRight);
|
|
content.find('.layout-footers-left .editor-content').val(info.PageFooterLeft);
|
|
content.find('.layout-footers-middle .editor-content').val(info.PageFooterCenter);
|
|
content.find('.layout-footers-right .editor-content').val(info.PageFooterRight);
|
|
}
|
|
content.find('.text-layout-name').on('change', onchange);
|
|
content.find('#layout-include-logo').on('change', onchange);
|
|
content.find('.text-layout-notes').on('change', onchange);
|
|
content.find('.layout-headers-left .editor-content').on('change', onchange);
|
|
content.find('.layout-headers-middle .editor-content').on('change', onchange);
|
|
content.find('.layout-headers-right .editor-content').on('change', onchange);
|
|
content.find('.layout-footers-left .editor-content').on('change', onchange);
|
|
content.find('.layout-footers-middle .editor-content').on('change', onchange);
|
|
content.find('.layout-footers-right .editor-content').on('change', onchange);
|
|
|
|
content.find('.text-layout-name').focus();
|
|
});
|
|
}
|
|
|
|
Object.defineProperty(layouts, 'onadd', {
|
|
value: function () {
|
|
editLayout();
|
|
}
|
|
});
|
|
|
|
function doedit(id) {
|
|
showmaskbg(true);
|
|
var p = [layouts.isteam ? 1 : 0, id];
|
|
inspectionrequest('GetInspectLayout', JSON.stringify(p), function (data) {
|
|
editLayout(data);
|
|
}, function () {
|
|
});
|
|
}
|
|
|
|
Object.defineProperty(layouts, 'onedit', {
|
|
value: function () {
|
|
if (layouts.grid && layouts.grid.selectedIndex >= 0) {
|
|
var id = layouts.grid.source[layouts.grid.selectedIndex].Values.Id;
|
|
doedit(id);
|
|
}
|
|
}
|
|
});
|
|
|
|
return layouts;
|
|
}); |