/*! util-web-test/modules/component/sandbox */
/*jslint
browser, long
*/
/*global
addEventListener, define
*/
/**
* sandbox is a playground for testing util-web functionality.
*
* @module util-web-test/modules/component/sandbox
*/
import _ from "underscore";
import {DateTime} from "luxon";
import dates from "util-web/modules/dates";
import device from "util-web/modules/device";
import ext from "util-web/modules/ext";
import fixture from "util-web-test/modules/fixture";
import ko from "knockout";
import Logger from "js-logger";
import template from "./sandbox.html";
import ui from "util-web/modules/ui";
const LOG = Logger.get("util-web-test/component/sandbox");
export default Object.freeze({
template,
viewModel: {
createViewModel: function () {
const vm = {};
let takePictureCallback;
vm.device = device;
vm.eventMessage = ko.observable();
addEventListener("message", function (event) {
if (event.origin !== fixture.SERVER_URL + ":" + fixture.DEFAULT_PORT) {
LOG.warn(`origin check failed, origin=${event.origin}`);
return;
}
vm.eventMessage(JSON.parse(event.data).message);
});
vm.cameras = ko.observable();
vm.cameraConfig = ko.observable(JSON.stringify(device.cameraConfig({
audio: false,
video: true
}), undefined, 4));
vm.getCameras = function () {
return device.getCameras().then(function (cameras) {
vm.cameras(cameras);
if (_.isEmpty(cameras) === false) {
const firstCamera = cameras[0].id;
vm.cameraConfig(JSON.stringify(device.cameraConfig({
audio: false,
video: {
deviceId: {
exact: firstCamera
}
}
}), undefined, 4));
}
});
};
vm.takenPicture = ko.observable();
vm.isTakePictureActive = ko.observable(false);
vm.activateTakePicture = function () {
vm.isTakePictureActive(true);
device.takePicture("#picturepreview", JSON.parse(vm.cameraConfig())).then(function (callback) {
takePictureCallback = callback;
});
};
vm.cancelTakePicture = function () {
return device.stopCamera().then(function () {
vm.isTakePictureActive(false);
takePictureCallback = undefined;
});
};
vm.takePicture = function () {
if (takePictureCallback) {
takePictureCallback(500, 500).then(function (dataUrl) {
vm.takenPicture(dataUrl);
vm.isTakePictureActive(false);
takePictureCallback = undefined;
});
}
};
vm.takePictureFallback = function (ignore, event) {
return ext.loadFileContent({
event,
fileFormats: ["image/jpg", "image/jpeg", "image/gif", "image/png"],
type: ext.FILE_CONTENT_TYPES.DATAURL
}).then(function (file) {
return ext.shrinkImage({dataUrl: file.content, maxHeight: 500, maxWidth: 500});
}).then(function (dataUrl) {
vm.takenPicture(dataUrl);
});
};
vm.scannedCode = ko.observable();
vm.scanCodeConfig = ko.observable(JSON.stringify(device.scanCodeConfig({
camera: "Insert ID from Cameras here",
video: "scanpreview"
}), undefined, 4));
vm.scanCodeKeyboardParam = ko.observable();
vm.isScanCodeActive = ko.observable(false);
vm.cancelScanCode = function () {
return device.cancelScan();
};
vm.scanCodeInternal = function (scanPromise, activateScan) {
vm.scannedCode(undefined);
if (activateScan) {
vm.isScanCodeActive(true);
}
return scanPromise.then(function (content) {
vm.scannedCode(content);
vm.isScanCodeActive(false);
}, function (exc) {
if (exc) {
LOG.warn("scanCodeInternal failed", exc);
}
vm.isScanCodeActive(false);
});
};
vm.scanCode = function () {
return vm.scanCodeInternal(device.scanCode(JSON.parse(vm.scanCodeConfig())), true);
};
vm.scanCodeKeyboardLength = function () {
return vm.scanCodeInternal(device.scanCodeKeyboard(parseInt(vm.scanCodeKeyboardParam())), false);
};
vm.scanCodeKeyboardTimeout = function () {
return vm.scanCodeInternal(device.scanCodeKeyboardTimeout(parseInt(vm.scanCodeKeyboardParam())), false);
};
vm.scanCodeKeyboardSuffix = function () {
return vm.scanCodeInternal(device.scanCodeKeyboardSuffix(vm.scanCodeKeyboardParam()), false);
};
vm.readNfcTagId = ko.observable();
vm.readNfcTagNdefMessage = ko.observable();
vm.isReadNfcTagWritable = ko.observable(false);
vm.writeNfcTagNdefMessage = ko.observable(
JSON.stringify(device.ndefMessage({
records: [
device.ndefExternalRecord({
data: "AA",
domain: "platform",
type: `${fixture.SERVER_DOMAIN}:${fixture.DEFAULT_PORT}/util-web-test/src/main/resources/`
})
]
}), undefined, 4)
);
vm.writeNfcTag = function () {
return device.writeTag(JSON.parse(vm.writeNfcTagNdefMessage())).then(function () {
LOG.debug("writeNfcTag");
vm.writeNfcTagNdefMessage(undefined);
});
};
vm.notificationId = ko.observable("123");
vm.notificationTitle = ko.observable("Hello world!");
vm.notificationText = ko.observable("This is a notification.");
vm.displayNotification = function () {
ext.displayNotification({
onClick: () => LOG.info("displayNotification clicked"),
onClose: () => LOG.info("displayNotification closed"),
options: {
body: vm.notificationText(),
tag: vm.notificationId()
},
title: vm.notificationTitle()
});
};
vm.isBusyButton1 = ko.observable(false);
vm.isBusyButton1Disabled = ko.observable(false);
vm.busyButton1 = function () {
vm.isBusyButton1(true);
setTimeout(function () {
vm.isBusyButton1(false);
}, 1000);
};
vm.isBusyButton2 = ko.observable(false);
vm.isBusyButton2Disabled = ko.observable(false);
vm.busyButton2 = function () {
vm.isBusyButton2(true);
setTimeout(function () {
vm.isBusyButton2(false);
}, 2000);
};
vm.isBusyButton3 = ko.observable(false);
vm.isBusyButton3Disabled = ko.observable(false);
vm.busyButton3 = function () {
vm.isBusyButton3(true);
setTimeout(function () {
vm.isBusyButton3(false);
}, 500);
};
vm.i18nKey = ko.observable("text_with_options");
vm.i18nOptions = ko.observable({count: 5, name: "<script></script>"});
vm.isModal1Active = ko.observable(false);
vm.activateModal1 = () => vm.isModal1Active(true);
vm.isModal2Active = ko.observable(false);
vm.activateModal2 = () => vm.isModal2Active(true);
vm.isOffcanvas1Active = ko.observable(false);
vm.activateOffcanvas1 = () => vm.isOffcanvas1Active(true);
vm.progress1 = ko.observable(0);
vm.activateProgress1 = function () {
vm.progress1(0);
vm.completeProgress1();
};
vm.completeProgress1 = function () {
if (vm.progress1() < 100) {
setTimeout(function () {
vm.progress1(vm.progress1() + 1);
vm.completeProgress1();
}, 10);
}
};
vm.isShowToast1 = ko.observable(false);
vm.isShowToast2 = ko.observable(false);
vm.toggleToast = function () {
vm.isShowToast1(!vm.isShowToast1());
vm.isShowToast2(!vm.isShowToast2());
};
vm.userName = ko.observable();
vm.userPassword = ko.observable();
vm.userCustom = ko.observable();
vm.userDate = ko.observable();
vm.userTime = ko.observable();
vm.userDateTime = ko.observable();
vm.userDateTimeUtc = ko.observable();
vm.isUserCustomValid = ko.pureComputed(function () {
const custom = vm.userCustom();
return custom && 0 === custom.indexOf("Hello");
});
vm.isSavingUser = ko.observable();
vm.insertDateTime = function () {
dates.setDateTimeInputs(DateTime.now(), vm.userDate, vm.userTime);
};
vm.saveUser = function (form) {
if (ui.validateForm(form) === false) {
return;
}
vm.isSavingUser(true);
setTimeout(function () {
const inputDateLocal = dates.parseDateTimeInputs(vm.userDate, vm.userTime, true);
vm.userDateTime(dates.toDateTimeString(inputDateLocal));
vm.userDateTimeUtc(dates.toDateTimeString(dates.setZoneUtc(inputDateLocal)));
ui.resetForm(form);
vm.isSavingUser(false);
}, 1000);
};
const deviceSub = {};
deviceSub[device.EVENTS.READ_NFCTAG_EVENT] = function (event) {
vm.readNfcTagId(event.id);
vm.readNfcTagNdefMessage(JSON.stringify(event.ndefMessage, undefined, 4));
};
deviceSub[device.EVENTS.BTLE_SCAN_EVENT] = function (event) {
vm.btleDevices(JSON.stringify(event.devices, undefined, 4));
};
const deviceHandle = device.registerOnEvent(deviceSub);
vm.dispose = function () {
LOG.debug("dispose");
device.unregisterOnEvent(deviceHandle);
};
return Object.freeze(vm);
}
}
});