I am having html form and gs.code as shown below. Its working perfect but files are uploaded in root folder of google drive. I want my files to upload in particular folder. Please help me.
Even i want to know how to use uploadView.setIncludeFolders(true) to show particular folder and subfolder for selection and upload.
var config = {
DEVELOPER_KEY: 'xxxx',
UPLOAD_FOLDER_ID: 'xxx',
ACCEPTED_FOLDER_ID: 'xxx',
TIME_ZONE: "GMT",
DATE_FORMAT: "MM/dd/yyyy HH:mm:ss",
ALLOWED_FILES: [
// MimeType.BMP,
// MimeType.GIF,
MimeType.pdf
// MimeType.PNG,
// MimeType.SVG,
// MimeType.PDF,
// MimeType.CSS,
// MimeType.CSV,
// MimeType.HTML,
// MimeType.JAVASCRIPT,
// MimeType.PLAIN_TEXT,
// MimeType.RTF,
// MimeType.OPENDOCUMENT_GRAPHICS,
// MimeType.OPENDOCUMENT_PRESENTATION,
// MimeType.OPENDOCUMENT_SPREADSHEET,
// MimeType.OPENDOCUMENT_TEXT,
// MimeType.MICROSOFT_EXCEL,
// MimeType.MICROSOFT_EXCEL_LEGACY,
// MimeType.MICROSOFT_POWERPOINT,
// MimeType.MICROSOFT_POWERPOINT_LEGACY,
// MimeType.MICROSOFT_WORD,
// MimeType.MICROSOFT_WORD_LEGACY,
// MimeType.ZIP
]
}
function doGet( e ){
return HtmlService.createHtmlOutputFromFile( "Form.html" ).setSandboxMode( HtmlService.SandboxMode.IFRAME )
}
function getConfig(){
DriveApp.getRootFolder();
return {
DEVELOPER_KEY: config.DEVELOPER_KEY,
TOKEN: ScriptApp.getOAuthToken(),
UPLOAD_FOLDER_ID: config.UPLOAD_FOLDER_ID
}
}
function verifyUpload( upload ){
var acceptedFolder = DriveApp.getFolderById( config.ACCEPTED_FOLDER_ID ),
uploadFolder = DriveApp.getFolderById( config.UPLOAD_FOLDER_ID ),
date = Utilities.formatDate( new Date(), config.TIME_ZONE, config.DATE_FORMAT ),
success = [],
fail = [],
doc,
file,
name
for( var i = 0; i < upload.docs.length; i++ ){
doc = upload.docs[ i ];
file = DriveApp.getFileById( doc.id );
name = file.getName();
if ( config.ALLOWED_FILES.indexOf( doc.mimeType ) >= 0 ){
success.push( name );
acceptedFolder.addFile( file );
uploadFolder.removeFile( file );
} else {
fail.push( name );
}
file.setName( upload.username + " - " + date + " - " + name);
}
return {
success: success,
fail: fail
}
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.app {
margin: 50px 0 0 30px;
}
.formholder {
background-color: #eee;
padding: 25px;
min-width: 400px;
max-width: 40%
}
input[type="text"] {
width: 300px;
}
</style>
</head>
<html>
<body>
<div class="app">
<div class="block formholder">
<div class="block form-group">
<label for="username">Name<span class="current">*</span>
</label>
<input type="text" id="username" class="width-100">
</div>
<div class="block">
<button class="blue" id="run-filepicker-interface">Choose File/s to Upload</button>
</div>
<div class="block">
</a>
</div>
</div>
<div class="block">
<div class="block" id="success-output"></div>
<div class="block error" id="error-output"></div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var fileUploadApp = {
config: {
DIALOG_DIMENSIONS: {
width: 600,
height: 425
}
},
init: function() {
google.script.run
.withSuccessHandler(fileUploadApp.setup)
.withFailureHandler(fileUploadApp.system.outputError)
.getConfig()
},
setup: function(config) {
$.extend(fileUploadApp.config, config)
gapi.load('picker', {
'callback': function() {
$('#run-filepicker-interface').click(fileUploadApp.runFilePickerInterface);
}
});
},
runFilePickerInterface: function(event) {
fileUploadApp.system.clearOutput()
var username = $("#username").val()
if (username) {
var config = fileUploadApp.config
$('#run-filepicker-interface').prop("disabled", false)
var uploadView = new google.picker.DocsUploadView()
uploadView.setIncludeFolders(false)
var picker = new google.picker.PickerBuilder()
.addView(uploadView)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.hideTitleBar()
.setOAuthToken(config.TOKEN)
.setDeveloperKey(config.DEVELOPER_KEY)
.setCallback(fileUploadApp.pickerCallback)
.setSize(config.DIALOG_DIMENSIONS.width, config.DIALOG_DIMENSIONS.height)
.setOrigin(google.script.host.origin)
.setSelectableMimeTypes('application/vnd.google-apps.folder')
.build();
picker.setVisible(true);
} else {
fileUploadApp.system.outputError("Name is required.")
}
},
pickerCallback: function(data) {
switch (data.action) {
case google.picker.Action.PICKED:
var upload = {
username: $("#username").val(),
docs: []
}
$.each(data.docs, function(index, value) {
if (value.uploadState == "success")
upload.docs.push({
id: value.id,
mimeType: value.mimeType
})
})
google.script.run
.withSuccessHandler(fileUploadApp.verifyUploadSuccess)
.withFailureHandler(function(msg) {
$('#run-filepicker-interface').prop("disabled", false)
fileUploadApp.system.outputError(msg)
})
.verifyUpload(upload)
fileUploadApp.system.outputSuccess("Verifying uploaded files.")
break;
case google.picker.Action.CANCEL:
$('#run-filepicker-interface').prop("disabled", false)
break;
case google.picker.Action.LOADED:
// actions here
break;
}
},
verifyUploadSuccess: function(verifyResult) {
fileUploadApp.system.clearOutput()
if (verifyResult.success.length) {
fileUploadApp.system.outputSuccess(
"Fail:<br />" +
verifyResult.success.join("<br />")
)
}
if (verifyResult.fail.length) {
fileUploadApp.system.outputError(
"Success:<br />" +
verifyResult.fail.join("<br />")
)
}
$('#run-filepicker-interface').prop("disabled", false)
},
system: {
outputError: function(msg) {
$("#error-output").html(msg)
},
outputSuccess: function(msg) {
$("#success-output").html(msg)
},
clearOutput: function() {
$("#error-output, #success-output").html("")
}
}
}
function init() {
fileUploadApp.init()
}
</script>
<script src="https://apis.google.com/js/api.js?onload=init"></script>
</html>
Related
I get these errors in my Electron App Project:
webview logged from Dashboard.html(146): Uncaught TypeError: window.require is not a function
webview logged from dashboard.js(7): Uncaught ReferenceError: require is not defined
and further errors in other files that also use the require function.
Edit: To be more explicit: These errors occur in the tab files that should be opened. Not in the main Window.
These errors occured, because i updated my electron version to the latest one (was on 10 or 11 before) - but needed new version for a new npm module.
I already tried to add nodeIntegration: true, contextIsolation: false, enableRemoteModule: true to webpreferences of main browserwindow and also to each tab in electron-tabs and it didnt work.
I will show here only the main files, because showing the whole project is too much for the question text...
Index.html for Electron:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ExMeX Companion App</title>
<link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
<script>
// 1. Require the module
const TabGroup = require("electron-tabs");
// 2. Define the instance of the tab group (container)
let tabGroup = new TabGroup({});
let tabDashboard = tabGroup.addTab({
title: "Dashboard",
src: "pages/Dashboard.html",
visible: true,
active: true,
webviewAttributes: {
webSecurity: false,
plugins: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
let webviewDashboard = tabDashboard.webview;
webviewDashboard.addEventListener('console-message', function(e) {
var srcFile = e.sourceId.replace(/^.*[\\\/]/, '');
if (srcFile == 'renderer_init.js') {
console.log("Electron Security warning hidden from console.");
} else {
console.log('webview logged from ' + srcFile + '(' + e.line + '): ' + e.message);
}
});
//implementation to get messages from other renderer windows
const {
remote,
ipcRenderer
} = require('electron');
var ExmexGUITabOpened = 'false';
var ExmexGUITabID = 0;
ipcRenderer.on("cardClickedExmexGUI", function(event, arg) {
if (ExmexGUITabOpened == 'false') {
//create new tab
console.log("Tab creation ExmexGUI");
let tabExmexGUI = tabGroup.addTab({
title: "Batch Orchestration",
src: "pages/BatchOrchestration.html",
visible: true,
active: true,
webviewAttributes: {
webSecurity: false,
plugins: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
ExmexGUITabOpened = 'true';
ExmexGUITabID = tabExmexGUI.id;
tabExmexGUI.on("close", (tab) => {
ExmexGUITabOpened = 'false';
ExmexGUITabID = 0;
});
let webview2 = tabExmexGUI.webview;
webview2.addEventListener('console-message', function(e) {
var srcFile = e.sourceId.replace(/^.*[\\\/]/, '');
if (srcFile == 'renderer_init.js') {
console.log("Electron Security warning hidden from console.");
} else {
console.log('webview logged from ' + srcFile + '(' + e.line + '): ' + e.message);
}
});
} else {
let activeExmexTab = tabGroup.getTab(ExmexGUITabID);
activeExmexTab.activate();
}
});
var ExmexConfigurationTabOpened = 'false';
var ExmexConfigurationTabID = 0;
ipcRenderer.on("cardClickedExmexConfiguration", function(event, arg) {
if (ExmexConfigurationTabOpened == 'false') {
//create new tab
console.log("Tab creation ExmexConfiguration");
let tabExmexConfig = tabGroup.addTab({
title: "ExMeX Configuration",
src: "pages/ExmexConfiguration.html",
visible: true,
active: true,
webviewAttributes: {
webSecurity: false,
plugins: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
ExmexConfigurationTabOpened = 'true';
ExmexConfigurationTabID = tabExmexConfig.id;
tabExmexConfig.on("close", (tab) => {
ExmexConfigurationTabOpened = 'false';
ExmexConfigurationTabID = 0;
});
let webview3 = tabExmexConfig.webview;
webview3.addEventListener('console-message', function(e) {
var srcFile = e.sourceId.replace(/^.*[\\\/]/, '');
if (srcFile == 'renderer_init.js') {
console.log("Electron Security warning hidden from console.");
} else {
console.log('webview logged from ' + srcFile + '(' + e.line + '): ' + e.message);
}
});
} else {
let activeExmexConfigTab = tabGroup.getTab(ExmexConfigurationTabID);
activeExmexConfigTab.activate();
}
});
var ExmexSourceFilterTabOpened = 'false';
var ExmexSourceFilterTabID = 0;
ipcRenderer.on("cardClickedSourceFilter", function(event, arg) {
if (ExmexSourceFilterTabOpened == 'false') {
//create new tab
console.log("Tab creation SourceFilter");
let tabSourceFilter = tabGroup.addTab({
title: "Filter Configuration",
src: "pages/FilterConfiguration.html",
visible: true,
active: true,
webviewAttributes: {
webSecurity: false,
plugins: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
ExmexSourceFilterTabOpened = 'true';
ExmexSourceFilterTabID = tabSourceFilter.id;
tabSourceFilter.on("close", (tab) => {
ExmexSourceFilterTabOpened = 'false';
ExmexSourceFilterTabID = 0;
});
let webview4 = tabSourceFilter.webview;
webview4.addEventListener('console-message', function(e) {
var srcFile = e.sourceId.replace(/^.*[\\\/]/, '');
if (srcFile == 'renderer_init.js') {
console.log("Electron Security warning hidden from console.");
} else {
console.log('webview logged from ' + srcFile + '(' + e.line + '): ' + e.message);
}
});
} else {
let activeExmexSourceFilterTab = tabGroup.getTab(ExmexSourceFilterTabID);
activeExmexSourceFilterTab.activate();
}
});
</script>
</body>
</html>
Main.js for electron
/*jshint esversion: 8 */
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
global.mainWindow = null;
/* Configuration for server is stored in these variables, accessible for all windows or tabs */
/*Test Config*/
const appversion = '0.5.0 Beta';
/*Live Config*/
global.user = 'Not available';
global.password = 'Not Set';
global.server = 'Not available';
global.serverPort = 0;
global.database = 'Not available';
global.serverInfoText = 'Server connection is not configured.';
global.installedExmexVersion = 'ExMeX | Core ? | App ' + appversion + '';
global.trustedConnectionOption = 'no';
global.userDeploy = '';
global.passwordDeploy = '';
global.serverDeploy = '';
global.databaseDeploy = '';
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1080,
height: 1000,
webPreferences: {
webviewTag: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
// Open the DevTools.
//mainWindow.webContents.openDevTools();
//remove the top menu from electron
//mainWindow.removeMenu();
// load the index.html of the app.
mainWindow.loadFile('index.html');
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
const {
ipcMain
} = require('electron'); // include the ipc module to communicate with render process ie to receive the message from render process
ipcMain.on("setUser", function(event, arg) {
global.user = arg;
});
ipcMain.on("setPassword", function(event, arg) {
global.password = arg;
});
ipcMain.on("setServer", function(event, arg) {
global.server = arg;
});
ipcMain.on("setServerPort", function(event, arg) {
global.serverPort = parseInt(arg, 10);
});
ipcMain.on("setDatabase", function(event, arg) {
global.database = arg;
});
ipcMain.on("setServerInfoText", function(event, arg) {
global.serverInfoText = arg;
});
ipcMain.on("setInstalledExmexVersion", function(event, arg) {
global.installedExmexVersion = 'ExMeX | Core ' + arg + ' | App ' + appversion + '';
});
ipcMain.on("setTrustedConnection", function(event, arg) {
global.trustedConnectionOption = arg;
});
const Store = require('electron-store');
Store.initRenderer();
Dashboard.html
This is the first Tab that should be opened, here the error occurs at the first time
<!doctype html>
<html lang="en" class="no-js">
<!-- <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css"> -->
<link rel="stylesheet" href="../css/dashboard.css">
<link rel="stylesheet" href="../css/sweetalert.css" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ExMeX Dashboard App</title>
</head>
<body>
<div class="grid-container-dashboard">
<header class="header">
<div class="header_server_info">
<p style="font-size:16px">Server</p>
<p style="font-size:12px" id="serverInfoText">No server connection.</p>
</div>
<!-- Button to open the serverConfigPopupWindow -->
<div class="header_server_connect">
<button id="myBtn" class="header_button"> Connect</button>
</div>
<div id="serverConfigPopupWindow" class="modal">
<div class="modal-content">
<!-- <span class="close">×</span> -->
<p style="font-size:20px ">Configure the server connection</p>
<br><br>
<div class="box">
<p class="item1">Server Name: </p> <input type="text" id="serverInputField" class="item2" placeholder="Server to connect">
</div>
<div class="box">
<p class="item1">Server Port: </p> <input type="text" id="serverPortInputField" class="item2" placeholder="Port to connect" value="1433">
</div>
<div class="box">
<p class="item1">Database Name: </p> <input type="text" id="databaseInputField" class="item2" placeholder="Your ExMeX database name">
</div>
<div class="box">
<p class="item1">Authentication Mode: </p>
<select class="item2" id="authenticationModeOptionField" onclick="showOrHideUserPWFields()">
<option>Windows Authentication</option>
<option>SQL Server Authentication</option>
</select>
</div>
<div class="box" id="userBox" style="visibility: hidden">
<p class="item1">User: </p> <input type="text" id="userInputField" class="item2" placeholder="Your user login name">
</div>
<div class="box" id="passwordBox" style="visibility: hidden">
<p class="item1">Password: </p> <input type="password" id="passwordInputField" class="item2" placeholder="Your password">
</div>
<br><br>
<textarea type="text" id="OutputTestServerConnection" name="FilterSPOutput" disabled rows="4" cols="70" style="resize: none;">Output will be shown after saving first filter.
</textarea>
<button id="testServerConfig" class="blue_button_big" onclick="testServerConfigFunction()">Connect</button>
<button id="cancelServerConfig" class="blue_button_big" onclick="cancelServerConfigFunction()">Cancel</button>
</div>
</div>
</header>
<aside class="sidenav">
<img src="../img/TedamohLogoFull.png" style=" display: block; margin-left: auto; margin-right: auto; width: 90%; height:80px; object-fit: contain;" alt="Logo" id="spin">
<ul class="sidenav_list">
<p style="font-size:20px">Quick Links</p>
<li class="sidenav_list-item" id="sidenav_Tedamoh" onclick="openTedamohHomepageInBrowser()">TEDAMOH</li>
<li class="sidenav_list-item" id="sidenav_Helpdesk" onclick="openHelpdeskInBrowser()">Helpdesk</li>
<li class="sidenav_list-item" id="sidenav_FAQ" onclick="openFAQInBrowser()">FAQ</li>
<li class="sidenav_list-item" id="sidenav_Documentation" onclick="openDocumentationInBrowser()">Documentation</li>
</ul>
</aside>
<main class="main">
<div class="main-header">
<div class="main-header_heading">
<img src="../img/ExMeX_Banner_Dashboard.png" style="width: 100%; height: 100%; " alt="ExMeX Dashboard">
</div>
<!-- <div class="main-header_updates">A powerful interface component for the Tedamoh ExMeX Framework. <br />We call it ExMeX Companion App!</div> -->
</div>
<div class="main-overview-dashboard">
<div class="overviewcard" id="cardIDExmexConfiguration">
<div class="overviewcard_icon"><img src="../img/dashboard_config.png" style="width:70px;height:70px;" alt="ConfigIcon"></div>
<div class="overviewcard_info">Exmex Configuration</div>
</div>
<div class="overviewcard" id="cardIDExmexGUI">
<div class="overviewcard_icon"><img src="../img/dashboard_threearrows.png" style="width:70px;height:70px;" alt="ThreeArrowIcon"></div>
<div class="overviewcard_info">Batch Orchestration</div>
</div>
<div class="overviewcard" id="cardIDFilterConfig">
<div class="overviewcard_icon"><img src="../img/dashboard_filter.png" style="width:70px;height:70px;" alt="FilterIcon"></div>
<div class="overviewcard_info">Filter Configuration</div>
</div>
<!-- future -->
<div class="overviewcard" id="cardIDFuture4" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div>
<div class="overviewcard_info">Future feature</div> -->
</div>
<div class="overviewcard" id="cardIDFuture5" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div>
<div class="overviewcard_info">Future feature</div> -->
</div>
<div class="overviewcard" id="cardIDFuture6" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div>
<div class="overviewcard_info">Future feature</div> -->
</div>
<div class="overviewcard" id="cardIDFuture7" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div>
<div class="overviewcard_info">Future feature</div> -->
</div>
<div class="overviewcard" id="cardIDFuture8" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div>
<div class="overviewcard_info">Future feature</div> -->
</div>
<div class="overviewcard" id="cardIDFuture9" style=" pointer-events: none;">
<!-- <div class="overviewcard_icon">Icon</div> -->
<!-- <div class="overviewcard_info">Future feature</div> -->
</div>
<!-- future end -->
</div>
</main>
<footer class="footer">
<div class="footer_copyright">© 2019-2022 TEDAMOH GmbH</div>
<div class="footer_signature" id="footer_signature">ExMeX | Core ? | App ?</div>
</footer>
</div>
</body>
<!-- Insert this line above script imports -->
<script>
if (typeof module === 'object') {
window.module = module;
module = undefined;
}
</script>
<!-- normal script imports etc -->
<script src="../js/sweetalert.min.downloaded.js"></script>
<script src="../js/swal-messages.js"></script>
<!-- scripts for opening the links on the dashboard -->
<script>
const {
shell
} = window.require('electron');
function openDocumentationInBrowser() {
shell.openExternal("https://tedamoh.com/de/helpdesk/doc-faq/exmex-framework-book");
}
function openFAQInBrowser() {
shell.openExternal("https://tedamoh.com/de/helpdesk/doc-faq/frequently-asked-questions");
}
function openTedamohHomepageInBrowser() {
shell.openExternal("https://tedamoh.com/de/");
}
function openHelpdeskInBrowser() {
shell.openExternal("https://tedamoh.com/de/helpdesk/my-tickets");
}
</script>
<script src="../js/SQLConnectAndQuery.js"></script>
<script src="../js/dashboard.js"></script>
<!-- Insert this line after script imports -->
<script>
if (window.module) module = window.module;
actualizeVersionInfo('footer_signature');
</script>
</html>
Dashboard.js
This is the javascript for the first tab that should be opened.
/*jshint esversion: 8 */
// include the ipc module to communicate with main process.
const {
remote,
ipcRenderer
} = require('electron');
const Store = require('electron-store');
const store = new Store();
//if store file was never initialized, put defaults in it
if (store.get('serverConfigStore') == undefined) {
store.set('serverConfigStore', {
serverName: "Server to connect",
serverPort: 1433,
databaseName: "Your ExMeX database name",
authenticationMode: "Windows Authentication",
user: ""
});
}
// console.log(store.get('serverConfigStore').serverName);
// console.log(store.get('serverConfigStore').serverPort);
// console.log(store.get('serverConfigStore').databaseName);
let btnclick2 = document.getElementById('cardIDExmexGUI');
btnclick2.addEventListener('click', () => {
var arg2 = "secondparam";
//send the info to main process . we can pass any arguments as second param.
//ipcRenderer.send("btnclick", arg); // ipcRender.send will pass the information to main process
let mainWindowTest2 = remote.getGlobal('mainWindow');
if (mainWindowTest2) mainWindowTest2.webContents.send("cardClickedExmexGUI", arg2);
});
let btnclick3 = document.getElementById('cardIDExmexConfiguration');
btnclick3.addEventListener('click', () => {
var arg3 = "secondparam";
//send the info to main process . we can pass any arguments as second param.
//ipcRenderer.send("btnclick", arg); // ipcRender.send will pass the information to main process
let mainWindowTest3 = remote.getGlobal('mainWindow');
if (mainWindowTest3) mainWindowTest3.webContents.send("cardClickedExmexConfiguration", arg3);
});
let btnclick4 = document.getElementById('cardIDFilterConfig');
btnclick4.addEventListener('click', () => {
var arg4 = "secondparam";
//send the info to main process . we can pass any arguments as second param.
//ipcRenderer.send("btnclick", arg); // ipcRender.send will pass the information to main process
let mainWindowTest4 = remote.getGlobal('mainWindow');
if (mainWindowTest4) mainWindowTest4.webContents.send("cardClickedSourceFilter", arg4);
});
// Get the modal
var modal = document.getElementById("serverConfigPopupWindow");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
console.log(store.get('serverConfigStore').serverName);
console.log(store.get('serverConfigStore').serverPort);
console.log(store.get('serverConfigStore').databaseName);
console.log('The connect button clicked and onclickfunction starts');
modal.style.display = "block";
document.getElementById('OutputTestServerConnection').innerHTML = '';
document.getElementById('serverInputField').value = store.get('serverConfigStore').serverName;
document.getElementById('serverPortInputField').value = store.get('serverConfigStore').serverPort;
document.getElementById('databaseInputField').value = store.get('serverConfigStore').databaseName;
document.getElementById('userInputField').value = store.get('serverConfigStore').user;
//Make sure that authentication mode is one of the two possible values (instead a poweruser changes the config file manually...)
if (store.get('serverConfigStore').authenticationMode == "Windows Authentication" || store.get('serverConfigStore').authenticationMode == "SQL Server Authentication") {
document.getElementById('authenticationModeOptionField').value = store.get('serverConfigStore').authenticationMode;
} else {
document.getElementById('authenticationModeOptionField').value = "Windows Authentication";
}
showOrHideUserPWFields();
};
// When the user clicks on <span> (x), close the modal
// span.onclick = function() {
// modal.style.display = "none";
// };
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
function testServerConfigFunction() {
console.log("The test server config button was clicked.");
document.getElementById('OutputTestServerConnection').innerHTML = 'Wait for database response...';
const sql = require('mssql/msnodesqlv8');
var authOption = '' + document.getElementById('authenticationModeOptionField').value;
var trustedAuthBool = false;
if (authOption == 'Windows Authentication') {
trustedAuthBool = true;
}
var config;
//if trustedAuthBool is true, then WindowsAuthentification should be used (no User+PW)
if (trustedAuthBool) {
config = {
user: 'Win User',
password: 'Win User',
server: '' + document.getElementById('serverInputField').value,
database: '' + document.getElementById('databaseInputField').value,
port: parseInt(document.getElementById('serverPortInputField').value, 10),
options: {
trustedConnection: "yes"
}
};
}
//else SQL Server Authentification is available (User+PW needed)
else {
config = {
user: '' + document.getElementById('userInputField').value,
password: '' + document.getElementById('passwordInputField').value,
server: '' + document.getElementById('serverInputField').value,
database: '' + document.getElementById('databaseInputField').value,
port: parseInt(document.getElementById('serverPortInputField').value, 10)
};
}
// async function invocation - connect to db and try a query
queryDatabase(config, 'Select TOP(1) ReleaseVersion FROM [MetadataZone].[TEDAMOHExMeXRelease] Order by ReleaseInstalledDate DESC')
.then(result => {
var obj = JSON.parse(JSON.stringify(result.recordsets[0]));
console.log('Connection succesful! Your last installed ExMeX Version is: ' + obj[0].ReleaseVersion);
const {
remote,
ipcRenderer
} = require('electron');
ipcRenderer.send('setInstalledExmexVersion', '' + obj[0].ReleaseVersion);
var s = obj[0].ReleaseVersion;
if ((s.match(/2.12.*/)) || (s.match(/2.11.*/)) || (s.match(/2.10.*/)) || (s.match(/2.9.*/)) || (s.match(/2.8.*/)) || (s.match(/2.7.*/)) || (s.match(/2.6.*/)) || (s.match(/2.5.*/))) {
swal('Old ExMeX Version installed', 'On the connected database the latest installed ExMeX Version is lower than 2.13.* ! The companion App will not work stable in all features! Please install the latest ExMeX release.', 'warning');
}
//document.getElementById('footer_signature').innerHTML = "ExMeX Version: " + obj[0].ReleaseVersion;
actualizeVersionInfo('footer_signature');
})
.catch(err => {
sql.close();
console.log("A connection error happened");
document.getElementById('OutputTestServerConnection').innerHTML = 'An error occurred while trying to query the database. The detailed error message is: ' + err.message;
});
// async function invocation - connect to db and try a query
queryDatabase(config, 'SELECT SUSER_NAME() as LoggedInUser;')
.then(result => {
var obj = JSON.parse(JSON.stringify(result.recordsets[0]));
console.log('Connection succesful! Your SysUsername is: ' + obj[0].LoggedInUser);
const {
remote,
ipcRenderer
} = require('electron');
modal.style.display = "none";
var sysusername = obj[0].LoggedInUser;
saveServerConfigFunction(config, sysusername);
})
.catch(err => {
sql.close();
console.log("A connection error happened");
document.getElementById('OutputTestServerConnection').innerHTML = 'An error occurred while trying to query the database. The detailed error message is: ' + err.message;
});
}
//needed to delete some parts here for question length
I hope this is something where you can follow the code and give me an advise, on how to change my electron code to get the require function working on my tabs.
Best wishes!
Currently I have a form with dropzone.js and it works correctly, but the form must be 2 times on the same page, only the styles change when I insert the second form only the first one remains working
I don't know what changes I should make
Currently I have a form with dropzone.js and it works correctly, but the form must be 2 times on the same page, only the styles change when I insert the second form only the first one remains working
I don't know what changes I should make
script
<code>
var Onyx = {
defaults: {
debug: true
},
/**
* Function to print results in the console if the above debug is true
**/
log: function() {
if (Onyx.defaults.debug === true) {
var argsArray = [],
printOut = "console.log(args)";
for ( var i = 0; i < arguments.length; i++ ) {
argsArray.push("args[" + i + "]");
}
printOut = new Function( "args", printOut.replace( /args/, argsArray.join(",") ) );
printOut(arguments);
}
},
/**
* Firing functions and bindings and other important stuff
**/
init: function(e) {
if ( $("#the-planner-form").length ) {
Onyx.projectPlanner();
if ( $("body").data("form-completed") == "yes" ) {
setTimeout(function() {
Onyx.plannerShowSuccess(true)
}, 800)
}
}
},
/**
* Project planner
**/
projectPlanner: function() {
Onyx.initDropzone();
var checkedValues = [];
// Add default checked service
$('input[name="planner_project_type_checkbox"]:checked').each(function() {
$(this).val();
checkedValues.push($(this).val())
});
$('input[name="planner_project_type"]').val(checkedValues.join(", "));
$('div.type-selection').each(function() {
$(this).on("click", function(e) {
e.preventDefault();
if ( $(this).find('input[checked]').length ) {
checkedValues.splice( $.inArray($(this).find('input[checked]').val(), checkedValues), 1 );
$(this).find('input[checked]').removeAttr('checked');
$('input[name="planner_project_type"]').val(checkedValues);
Onyx.log($.inArray($(this).find('input[name="planner_project_type_checkbox"]').val(), checkedValues));
Onyx.log(checkedValues);
} else {
$(this).find('input[name="planner_project_type_checkbox"]').attr('checked', true);
checkedValues.push($(this).find('input[name="planner_project_type_checkbox"]').val());
$('input[name="planner_project_type"]').val(checkedValues.join(", "));
Onyx.log(checkedValues);
Onyx.log($.inArray($(this).find('input[name="planner_project_type_checkbox"]').val(), checkedValues));
}
});
});
var sendingForm = false;
$("form#the-planner-form").bind("submit", function(e) {
e.preventDefault();
// Check every thing is valid
$('form#the-planner-form').find(".validate").each(function() {
sendingForm = 0 != Onyx.plannerValidate($(this));
});
if (sendingForm) {
$(".error-msg").stop().animate({
opacity: 0
}, 300, function () { $(this).hide() });
if ( matchMedia("only screen and (max-height: 1023px)").matches || matchMedia("only screen and (max-width: 600px)").matches ) {
$("html,body").stop().animate({
scrollTop: 0
}, 500);
}
Onyx.plannerShowSpinner();
$.ajax({
type: "POST",
url: window.location + "/send_form.php",
data: $("#the-planner-form").serialize()
}).done(function (status, textStatus, jqXHR) {
Onyx.log("Planner form status: " + status);
Onyx.log("Planner form textStatus: " + textStatus);
Onyx.log(jqXHR);
if ( jqXHR.status == 200 && textStatus == 'success' ) {
Onyx.plannerShowSuccess();
} else {
Onyx.plannerShowSpinner(false);
alert("Something went wrong");
}
});
} else {
$(".error-msg").stop().css({
display: "block",
opacity: 0
}).animate({
opacity: 1
}, 300), false
}
});
},
plannerShowSpinner: function(showSpinner) {
if ("undefined" == typeof showSpinner) var showSpinner = true;
if ( showSpinner ) {
$(".form-controls, .fields-group").stop().animate({
opacity: 0
}, 400, function() {
$(this).hide();
$(".form-spinner").stop().css({
display: "block",
opacity: 0
}).animate({
opacity: 1
}, 300)
});
} else {
$(".form-spinner").stop().animate({
opacity: 1
}, 300, function() {
$(this).hide();
$(".form-controls, .fields-group").stop().css({
display: "block",
opacity: 0
}).animate({
opacity: 1
}, 400)
});
}
},
plannerShowSuccess: function(showSuccess) {
if ("undefined" == typeof showSuccess) var showSuccess = false;
var showThankyou = function() {
$(".form-spinner").stop().animate({
opacity: 0
}, 150, function() {
$(this).hide();
$(".form-thankyou-wrap").stop().css({
display: "block",
opacity: 0
}).animate({
opacity: 1
}, 300)
})
};
showSuccess ? $(".form-controls").stop().animate({
opacity: 0
}, 400, function() {
$(this).hide(), showThankyou()
}) : showThankyou()
},
/**
* Upload button
**/
dropzone_active: false,
updateDropzoneCount: function() {
var uploadedCount = $(".dz-preview.dz-success").length,
finalText = "";
if ( uploadedCount == 1 ) {
finalText = uploadedCount + " Archivo Subido.";
} else if ( uploadedCount == 0 ) {
finalText = "No subiste ningún archivo.";
} else {
finalText = uploadedCount + " Archivos Subidos.";
}
$(".total-uploaded").text(finalText)
},
initDropzone: function(e) {
Dropzone.autoDiscover = false;
Dropzone.options.plannerFilesDropzone = {
paramName: "form_file",
maxFilesize: 10,
maxFiles: 5,
acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf",
url: window.location + "/file-upload.php",
addRemoveLinks: true,
forceFallback: false,
clickable: true,
/**
* The text used before any files are dropped.
*/
dictDefaultMessage: "Drop files here to upload.", // Default: Drop files here to upload
/**
* The text that replaces the default message text it the browser is not supported.
*/
dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.", // Default: Your browser does not support drag'n'drop file uploads.
/**
* If the filesize is too big.
* `{{filesize}}` and `{{maxFilesize}}` will be replaced with the respective configuration values.
*/
dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.", // Default: File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.
/**
* If the file doesn't match the file type.
*/
dictInvalidFileType: "You can't upload files of this type.", // Default: You can't upload files of this type.
/**
* If the server response was invalid.
* `{{statusCode}}` will be replaced with the servers status code.
*/
dictResponseError: "Server responded with {{statusCode}} code.", // Default: Server responded with {{statusCode}} code.
/**
* If `addRemoveLinks` is true, the text to be used for the cancel upload link.
*/
dictCancelUpload: "Cancel upload.", // Default: Cancel upload
/**
* The text that is displayed if an upload was manually canceled
*/
dictUploadCanceled: "Upload canceled.", // Default: Upload canceled.
/**
* If `addRemoveLinks` is true, the text to be used for confirmation when cancelling upload.
*/
dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?", // Default: Are you sure you want to cancel this upload?
/**
* If `addRemoveLinks` is true, the text to be used to remove a file.
*/
dictRemoveFile: "Remove file", // Default: Remove file
/**
* If this is not null, then the user will be prompted before removing a file.
*/
dictRemoveFileConfirmation: null, // Default: null
/**
* Displayed if `maxFiles` is st and exceeded.
* The string `{{maxFiles}}` will be replaced by the configuration value.
*/
dictMaxFilesExceeded: "You can not upload any more files.", // Default: You can not upload any more files.
/**
* Allows you to translate the different units. Starting with `tb` for terabytes and going down to
* `b` for bytes.
*/
dictFileSizeUnits: {tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b"},
init: function() {
Onyx.dropzone_active = true;
$("input[name=form_file]").remove();
this.on("addedfile", function(file) {
$('button[type="submit"]').attr("disabled", "disabled");
Onyx.updateDropzoneCount();
});
this.on("removedfile", function(file) {
Onyx.log('Start removing file!');
$.ajax({
type: "POST",
url: window.location + "/file-upload.php",
data: {
target_file: file.upload_ticket,
delete_file: 1
},
sucess: function(jqXHR, textStatus){},
complete: function(jqXHR, textStatus){
var response = JSON.parse(jqXHR.responseText);
// Handle success
if (response.status === 'success') {
Onyx.log('Success: ' + response.info);
}
// Handle error
else {
Onyx.log('Error: ' + response.info);
}
}
});
var inputField = $("input[name=form_files_list]"),
filesArray = inputField.val().split(","),
fileIndex = $.inArray(file.upload_ticket, filesArray);
fileIndex !== -1 && filesArray.splice(fileIndex, 1);
inputField.val(filesArray.length > 0 ? filesArray.join(",") : "");
Onyx.updateDropzoneCount();
});
this.on("success", function(file, response) {
let parsedResponse = JSON.parse(response);
file.upload_ticket = parsedResponse.file_link;
var inputField = $("input[name=form_files_list]"),
filesArray = [];
Onyx.log(file.upload_ticket);
if ( "" != inputField.val() ) {
filesArray = inputField.val().split(",");
}
filesArray.push(file.upload_ticket);
inputField.val(filesArray.length > 0 ? filesArray.join(",") : "");
// Something to happen when file is uploaded
});
this.on("complete", function(file) {
if ( 0 === this.getUploadingFiles().length && 0 === this.getQueuedFiles().length ) {
$('button[type="submit"]').removeAttr("disabled");
}
Onyx.updateDropzoneCount()
});
this.on("error", function(file, t, a) {
this.removeFile(file);
});
}
};
$("#planner-files-dropzone").dropzone();
$("#planner-files-dropzone .instructions").click(function(e) {
var t = Dropzone.forElement("#planner-files-dropzone");
t.hiddenFileInput.click();
e.preventDefault()
})
},
plannerValidate: function(e) {
if ("" == e.val()) return e.addClass("error"), false;
if (!e.is('[type="email"]')) return e.removeClass("error"), true;
var t = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(e.val());
return t ? void 0 : (e.addClass("error"), false)
}
};
$(function() {
Onyx.init();
});
<?php
$delete_file = 0;
if(isset($_POST['delete_file'])){
$delete_file = $_POST['delete_file'];
}
$targetPath = dirname( __FILE__ ) . '/uploads/';
// Check if it's an upload or delete and if there is a file in the form
if ( !empty($_FILES) && $delete_file == 0 ) {
// Check if the upload folder is exists
if ( file_exists($targetPath) && is_dir($targetPath) ) {
// Check if we can write in the target directory
if ( is_writable($targetPath) ) {
/**
* Start dancing
*/
$tempFile = $_FILES['form_file']['tmp_name'];
$targetFile = $targetPath . $_FILES['form_file']['name'];
// Check if there is any file with the same name
if ( !file_exists($targetFile) ) {
// Upload the file
move_uploaded_file($tempFile, $targetFile);
// Be sure that the file has been uploaded
if ( file_exists($targetFile) ) {
$response = array (
'status' => 'success',
'file_link' => $targetFile
);
} else {
$response = array (
'status' => 'error',
'info' => 'Couldn\'t upload the requested file :(, a mysterious error happend.'
);
}
/*$response = array (
'status' => 'success',
'file_link' => 'Just a test, don\'t take it seriously.'
);*/
} else {
// A file with the same name is already here
$response = array (
'status' => 'error',
'info' => 'A file with the same name is exists.',
'file_link' => $targetFile
);
}
} else {
$response = array (
'status' => 'error',
'info' => 'The specified folder for upload isn\'t writeable.'
);
}
} else {
$response = array (
'status' => 'error',
'info' => 'No folder to upload to :(, Please create one.'
);
}
// Return the response
echo json_encode($response);
exit;
}
// Remove file
if( $delete_file == 1 ){
$file_path = $_POST['target_file'];
// Check if file is exists
if ( file_exists($file_path) ) {
// Delete the file
unlink($file_path);
// Be sure we deleted the file
if ( !file_exists($file_path) ) {
$response = array (
'status' => 'success',
'info' => 'Successfully Deleted.'
);
} else {
// Check the directory's permissions
$response = array (
'status' => 'error',
'info' => 'We screwed up, the file can\'t be deleted.'
);
}
} else {
// Something weird happend and we lost the file
$response = array (
'status' => 'error',
'info' => 'Couldn\'t find the requested file :('
);
}
// Return the response
echo json_encode($response);
exit;
}
?>
<form action="#" method="post" id="the-planner-form" enctype="multipart/form-data">
<div class="text-cotizador">
<h1>COTIZADOR ONLINE</h1>
</div>
<div class="img-cotizador">
<img src="images/barrita-dorada.png" alt="ubicacion" width="35" height="5">
</div>
<div class="text-cotizador">
<p>Envíenos la foto de la joya a cotizar, y un tasador especializado<br>
la analizará y le brindará <b>el mejor precio del mercado.</b>
</p>
</div>
<div class="fields-group clearfix">
<div class="fields-group-controls1">
<div class="form-field half first">
<input type="text" name="planner_name" id="name" class="validate" placeholder="Nombre">
</div>
</div>
<div class="fields-group-controls2">
<div class="form-field half first">
<input type="email" name="planner_email" id="email" class="validate" placeholder="E-mail">
</div>
<div class="form-field half last">
<input type="tel" name="planner_phone" id="phone" class="validate" placeholder="Telefono">
</div>
</div>
<div class="fields-group-controls">
<div class="form-field">
<textarea name="planner_project_description" id="description" class="validate" placeholder="Comentarios"></textarea>
</div>
<div class="form-field">
<div id="files-wrap">
<div id="planner-files-dropzone">
<div class="dropzone-foo">
<div class="instructions is-desktop">ARRASTRA Y SUELTA AQUÍ LOS ARCHIVOS</br>o</div>
<div class="instructions is-touch">Subi los archivos</div>
</div>
<div class="total-uploaded">No se ha seleccionado ningún archivo</div>
</div>
<input type="hidden" value="" name="form_files_list" />
<input type="file" name="form_file" id="pp-file" />
</div>
<div class="text-formatos">
<p>Puede seleccionar hasta 5 imágenes | Tamaño máximo por imagen: 100 MB<br>Formatos admitidos: gif, png, jpg, jpeg
</p>
</div>
</div>
</div>
</div>
<div class="form-spinner-container">
<div class="form-spinner"></div>
</div>
<div class="form-thankyou-wrap">
<div class="form-thankyou-wrap-inner">
<div class="form-thankyou-content">
<h2><em>Gracias!</em> su mensaje ha sido enviado correctamente.</h2>
<p>Te contactaremos en poco tiempo..</p>
Go back to home page
</div>
</div>
</div><!-- .form-thankyou-wrap -->
<div class="form-controls">
<button aria-label="Send" type="submit">Enviar</button>
<div class="error-msg">Debe diligenciar toda la información. ↑</div>
</div>
</form>
Can someone help me to figure out how to remove my row data after an ajax call is successfully done(the data is removed from the data base)?
I have tried different ways to get the row then call the remove function from the row but it is not working.
I would like to find a way to get the row to remove in my deleteDataReportRecords function then pass it to ajax call ajaxRemoveTTvUidsCall, then if the response is successful, I remove from the grid the row passed as a parameter to the function ajaxRemoveTTvUidsCall
Here is the javaScript file:
function createKendoDataReportGrid(){
var year = $("#vehicleReportYearSelector").val();
var country = $("#vehicleReportCountrySelector").val();
var acodeFormatted = country + convertYearsIntoAcodeFormat(year);
$("#vehicleReportGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: String.format('{0}/ajax/myData/records.ajax',
ASC.cfg.getContextPath()),
data: function () {
return {
acodes: JSON.stringify(acodeFormatted)
}
}
}
},
schema: {
parse: function(response) {
if (response.result !== null && response.result!== null&&
response.result.length!==0) {
if($("#isAdminUser").val() === "true"){
$("#deleteRecord").removeAttr('disabled');
}
return response.result;
}
else {
return [];
}
}
},
pageSize: 20
},
groupable: false,
sortable: true,
autoBind: true,
pageable: {
pageSizes: true,
buttonCount: 20
},
columns: [{
field: "colum1",
title: "ID",
width: '60px',
template: function(dataItem){
return '<span class="colum1">' + dataItem.colum1 + '</span>';
}
},
{
field : "",
title : '<input type="button"/>',
width: '55px',
template: function(dataItem){
var currentTtvUid = dataItem.ttvUid;
var deletedRecordId = "deleteRecord"+currentTtvUid;
if((dataItem.fvdUidMatch !==1
|| dataItem.cadaAcodeMatch ===0
|| dataItem.acodeStyleIdDuplicateCount>1
)&& $("#isAdminUser").val() === "true"){
'<div id="vehicleReportGrid" style="display: none;"> </div>'
return '<button id="'+deletedRecordId+'" class="btn" style="display:inline-block;margin: 10px 5px 5px 5px; float:right;" onclick="deleteDataReportRecords(event,this,'+currentTtvUid+')" enabled"/>Delete</button>';
}else{
return '<button id="'+deletedRecordId+'"class="btn" style="display:inline-block;margin: 10px 5px 5px 5px; float:right;" onclick="deleteDataReportRecords(event,this,'+currentTtvUid+')" disabled"/>Delete</button>';
}
},
width : "100px"
}]
});
}
function deleteDataReportRecords(e,variable,currentTtvUid){
var confirmDelete = confirm("Are you sure you want to delete the selected vehicle?");
if (confirmDelete) {
e.stopPropagation();
var ttvUids = [];
ttvUids.push(currentTtvUid);
//vehicleReportGrid.removeRow($(variable).closest("tr"));
var row = $('#vehicleReportGrid').find('tbody tr').has('input:button:enabled');
ajaxRemoveDataCall(row,ttvUids);
}
}
function ajaxRemoveDataCall(row,ttvUidArray){
$.ajax({
type : "POST",
url : String.format('{0}/ajax/delete/data/records.ajax', ASC.cfg.getContextPath()),
dataType: 'json',
data : {
"ttvuids": JSON.stringify(ttvUidArray)
},
success: function(response) {
if (response!==null){
row.remove();
} else {
alert("Error: unable to remove data");
}
},
error : function(e) {
alert("Error: unable to remove data: " + e);
}
});
}
Here is the JSP file:
<layout:master activeNavId="home" title="page.appLinker.title">
<jsp:attribute name="scripts">
<script type="text/javascript">
(function() {
var page = new com.src.appLinker.pages.MainPage();
$(document)
.ready(function() {
page.init();
});
})(window.jQuery);
</script>
</jsp:attribute>
<jsp:body>
<div id="mainContainer" class="appMarginLeft appMarginRight">
<div>
<div id="tabStrip" class="tabStrip">
<ul>
<li>
<label id="vehicleReportLabel" style="cursor: pointer" class="labelFont">
Report & Fix
</label>
</li>
</ul>
<div id="vehicleReportContainer" class="tabContainer" >
<h3 style="display: inline-block; padding: 5px;">Vehicle Report & Fix </h3>
<select id="vehicleReportCountrySelector" name="vehicleReportCountrySelector"
onchange="setYearsOnVehicleReportDropDown()"
style="width:10%; margin-left: 10px">
</select>
<select id="vehicleReportYearSelector" name="vehicleReportYearSelector" style="width:7%; margin-left: 10px" onchange="setSelectedYearOnVehicleReportDropDown()"></select>
<button class="btn" id="searchVehicleReportButton" style="margin-top:-10px" onclick="createKendoDataReportGrid()">Search</button>
<div id="vehicleReportGrid"> </div>
</div>
</div>
</div>
</div>
</jsp:body>
</layout:master>
I am getting a problem when trying to use DayPilot Calendar in angularjs.
https://code.daypilot.org/63034/angularjs-event-calendar-open-source
When I downloaded sources and use it it was not working and throwing error
angular.js:9563 TypeError: Cannot read property 'getTime' of undefined
at loadEvents (daypilot-all.min.js:11)
at update (daypilot-all.min.js:11)
at Object.fn (daypilot-all.min.js:11)
at h.$digest (angular.js:12031)
at h.$apply (angular.js:12279)
at g (angular.js:7991)
at C (angular.js:8196)
at XMLHttpRequest.y.onreadystatechange (angular.js:8137)
Source code of the downloaded code is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DayPilot: AngularJS Event Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<!-- helper libraries -->
<script src="js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="media/layout.css" />
</head>
<body>
<div id="header">
<div class="bg-help">
<div class="inBox">
<hr class="hidden" />
</div>
</div>
</div>
<div class="shadow"></div>
<div class="hideSkipLink">
</div>
<div class="main">
<div ng-app="main" ng-controller="DemoCtrl" >
<div style="float:left; width: 160px">
<daypilot-navigator id="navi" daypilot-config="navigatorConfig" ></daypilot-navigator>
</div>
<div style="margin-left: 160px">
<div class="space">
<button ng-click="showDay()">Day</button>
<button ng-click="showWeek()">Week</button>
</div>
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
</div>
<script>
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.events = [];
$scope.navigatorConfig = {
selectMode: "day",
showMonths: 3,
skipMonths: 3,
onTimeRangeSelected: function(args) {
$scope.weekConfig.startDate = args.day;
$scope.dayConfig.startDate = args.day;
loadEvents();
}
};
$scope.dayConfig = {
viewType: "Day",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.weekConfig = {
visible: false,
viewType: "Week",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.showDay = function() {
$scope.dayConfig.visible = true;
$scope.weekConfig.visible = false;
$scope.navigatorConfig.selectMode = "day";
};
$scope.showWeek = function() {
$scope.dayConfig.visible = false;
$scope.weekConfig.visible = true;
$scope.navigatorConfig.selectMode = "week";
};
loadEvents();
function loadEvents() {
// using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
$timeout(function() {
var params = {
start: $scope.week.visibleStart().toString(),
end: $scope.week.visibleEnd().toString()
}
$http.post("backend_events.php", params).success(function(data) {
$scope.events = data;
});
});
}
});
</script>
</div>
<div class="clear">
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
i am still confused why this problem is occurring again and again
You should check the response returned by "backend_events.php". DayPilot expects an array of events in JSON format. If there is any server-side error in the script the response will return an error message instead.
Most likely, there is a problem with permissions on the server side - the PHP script needs read/write permissions for daypilot.sqlite file which is in the application root.
I am using App Builder from Telerik with Kendo UI trying to build a SPA application. I am very new to using Telerik and Kendo UI, please forgive the code.
There are two things I am trying to accomplish.
Enable swipe to open and hide the login head image until the user is logged in.
When a user is logged out return to the login screen and disable swipe to open and hide the login header image.
I have tried adding: data-swipe-to-open="false" in the layout, using the .hide on the header in the layout. When I use data-swipe-to-open="false" the #appDrawer does not open (which is what I want) but I cannot set the data-swipe-to-open = true. I cannot find any documentation from Telerik.
Any and all feedback is appreciated.
Login screen as of now
Swipe on login
HTML
<!--Login View-->
<div id="tabstrip-login"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel"
data-before-show="app.loginService.beforeShow"
data-after-show="app.loginService.afterShow">
<div style="background-image:url(/xxxx.png); background-position:top; background-repeat:no-repeat; background-size:contain; background-color:white;">
<div style="min-width:325px; min-height:144px;"></div>
</div>
<div data-bind="visible: isLoggedIn">
<div data-bind="visible : isExpired">
Expired Card info
</div>
<div id="dvCardInfoContainer" class="panel panel-default " style="background-color:white;" data-bind="invisible : isExpired">
<div class="panel panel-body" style="background-image:url(img/xyx.png); background-size:cover; background-position:center; background-color:white; ">
<div style="display:flex; flex-flow: row nowrap; align-content:center; justify-content:center; align-items:center;">
<div class="dvVerticalTextContainerLeftSide"><div id="memberStatusTop" data-bind="text :memberStatus" class="dvVerticalTextLeftSide capText bold"></div></div>
<div class="dvCenterVerticalContainer">
<ul>
<li data-bind="text :attCompanyName"></li>
<li data-bind="text :attAircraftTypes"></li>
<li data-bind="text :attAircraftRegNum"></li>
<li class="bold" data-bind="text :attExpirationDate"></li>
<li data-bind="text :calcDateTillExp"></li>
</ul>
</div>
<div class="dvVerticalContainerRightSide"><div class="dvVerticalTextRightSide capText bold" data-bind="text :memberStatus" id="memberStatusBottom"></div></div>
</div>
<div id="goodStanding" class="text-center capText bold"> TEXT </div>
</div>
</div>
</div>
<form data-bind="events: { keyup: checkEnter }">
<ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
<li>
<label>
<div>Username</div>
<input type="text" data-bind="value: username" />
</label>
</li>
<li>
<label>
<div>Password</div>
<input type="password" data-bind="value: password" />
</label>
</li>
</ul>
<input id="login" type="submit" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" value="Login" class="login-button" />
</form>
</div>
Layout
<div data-role="layout" data-id="tabstrip-layout">
<header id="hdr" data-role="header">
<div data-role="navbar" >
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="details"></a>
</div>
</header>
<!-- application views will be rendered here -->
</div>
<div id="appDrawer" data-role="drawer" data-title="Navigation">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul id="navigation-container" data-role="listview">
<li>Membership Card</li>
<li>Card Info</li>
<li><a onclick="app.clearLocalStorage();">Log Out</a> </li>
</ul>
</div>
app.js
(function (global) {
var app = global.app = global.app || {};
app.clearLocalStorage = function () {
localStorage.clear();
app.loginService.viewModel.set("isLoggedIn", false);
}
app.makeUrlAbsolute = function (url) {
var anchorEl = document.createElement("a");
anchorEl.href = url;
return anchorEl.href;
};
document.addEventListener("deviceready", function () {
navigator.splashscreen.hide();
app.changeSkin = function (e) {
var mobileSkin = "";
if (e.sender.element.text() === "Flat") {
e.sender.element.text("Native");
mobileSkin = "flat";
} else {
e.sender.element.text("Flat");
mobileSkin = "";
}
app.application.skin(mobileSkin);
};
var element = document.getElementById('appDrawer');
if (typeof (element) != 'undefined' && element !== null) {
if (window.navigator.msPointerEnabled) {
$('#navigation-container').on('MSPointerDown', 'a', function (event) {
app.keepActiveState($(this));
});
} else {
$('#navigation-container').on('touchstart', 'a', function (event) {
app.keepActiveState($(this));
});
}
}
app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout", skin: 'nova'});
//$("#hdr").hide();
// app.loginService.viewModel.set("isLoggedIn", true);
}, false);
app.removeActiveStatus = function _removeActiveState(item) {
var currentItem = item;
$('#navigation-container li a.active').removeClass('active');
currentItem.addClass('notActive');
}
app.keepActiveState = function _keepActiveState(item) {
var currentItem = item;
$('#navigation-container li a.active').removeClass('active');
currentItem.addClass('active');
};
app.isOnline = function () {
if (!navigator || !navigator.connection) {
return true;
} else {
return navigator.connection.type !== 'none';
}
};
})(window);
Login.js
function loadState() {
var cardData = localStorage.getItem("userAttributeList");
if (cardData) {
var obj = JSON.parse(localStorage.getItem("userAttributeList"));
var companyName = obj[0].attData;
var airCraftTypes = obj[23].attData;
var airCraftRegNum = obj[24].attData;
var memberType = obj[1].attData;
var x = obj[17].attData;//experation date
var daysTillExpire = app.loginService.viewModel.calcDate(x);
var expirationDate = app.loginService.viewModel.formatDate(x);
app.loginService.viewModel.set("attCompanyName", companyName);
app.loginService.viewModel.set("attAircraftTypes", airCraftTypes);
app.loginService.viewModel.set("attAircraftRegNum", airCraftRegNum);
app.loginService.viewModel.set("attExpirationDate", "Expires: " + expirationDate);
app.loginService.viewModel.set("calcDateTillExp", "Days to expiration: " + daysTillExpire);
var strMembershipDecision = "Paid Members";
if (strMembershipDecision == memberType) {
app.loginService.viewModel.set("memberStatus", "Prefered Member");
}
else { app.loginService.viewModel.set("memberStatus", "Trial Member"); }
if (daysTillExpire <= 0) {
app.loginService.viewModel.wipeout();
}
//app.loginService.viewModel.set("data-swipe-to-open", true);
$("#appDrawer").data("kendoMobileDrawer");
}
else { }
}
(function (global) {
var LoginViewModel,
app = global.app = global.app || {};
// default empty credentials
// configure the local-storage adapter
LoginViewModel = kendo.data.ObservableObject.extend({
userDataSoruce: null,
isLoggedIn: false,
isExpired: false,
showExpired: false,
username: "",
password: "",
authUrl: '',
userUrl: '',
groupUrl: '',
token: null,
groupId: "",
orgId: "",
userId: "",
cardData: null,
airCraftTypes: null,
expirationDate: null,
memberGroupStatus: null,
memberType: null,
airCraftRegNum: null,
companyName: null,
daysTillExpire: null,
onLogin: function () {
var that = this,
username = that.get("username").trim(),
password = that.get("password").trim();
if (username === "" || password === "") {
navigator.notification.alert("Both fields are required!",
function () { }, "Login failed", 'OK');
return;
}
this.getAuthToken();
},
onLogout: function () {
var that = this;
that.clearForm();
that.set("isLoggedIn", false);
},
clearForm: function () {
var that = this;
that.set("username", "");
that.set("password", "");
},
checkEnter: function (e) {
var that = this;
if (e.keyCode == 13) {
$(e.target).blur();
that.onLogin();
}
},
checkAuth: function (response) {
var that = this;
if (response) {
that.getCardInfo();
}
else { alert('Not success'); }
},
getAuthToken: function () {
var that = this, dataSource;
var response = false;
dataSource = new jQuery.ajax({
type: "POST",
url: that.authUrl,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: 'apiKey=' + '&username=' + that.username + '&password=' + that.password,
username: that.username,
password: that.password,
success: function (data, status) {
that.token = data.token;
that.groupId = data.groupId;
that.orgId = data.orgId;
that.userId = data.userId;
response = true;
that.checkAuth(response);
localStorage.setItem("usertoken", data.token);
localStorage.setItem("username", that.username);
localStorage.setItem("password", that.password);
localStorage.setItem("groupId", data.groupId);
localStorage.setItem("orgId", data.orgId);
localStorage.setItem("userId", data.userId);
},
error: function (error) {
alert('Error in validing username and password.');
response = false;
that.checkAuth(response);
return false
}
});
},
getCardInfo: function () {
var that = this, datasoruce;
datasoruce = new jQuery.ajax({
type: "GET",
url: '' + that.userId + '/attribute',
contentType: "application/json",
dataType: "json",
headers: { 'Authorization': that.token },
success: function (data, status) {
localStorage.setItem("userAttributeList", JSON.stringify(data.attribute));
that.cardData = JSON.stringify(data.attribute);
that.loadData();
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
},
loadData: function () {
var that = this;
var obj = JSON.parse(that.cardData);
that.companyName = obj[0].attData;
that.airCraftTypes = obj[23].attData;
that.airCraftRegNum = obj[24].attData;
var memberType = obj[1].attData;
var x = obj[17].attData;//experation date
that.daysTillExpire = this.calcDate(x);
that.expirationDate = this.formatDate(x);
that.set("attCompanyName", that.companyName);
that.set("attAircraftTypes", that.airCraftTypes);
that.set("attAircraftRegNum", that.airCraftRegNum);
that.set("attExpirationDate", "Expires: " + that.expirationDate);
that.set("calcDateTillExp", "Days to expiration: " + that.daysTillExpire);
that.set("isLoggedIn", true);
//checking for membership status
var strMembershipDecision = "Paid Members";
if (strMembershipDecision == memberType) {
that.set("memberStatus", "Prefered Member");
}
else { that.set("memberStatus", "Trial Member"); }
if (that.daysTillExpire <= 0) {
this.wipeout();
}
},
checkMembershipStatus: function (memberStatus, numDaysToExp) {
},
wipeout: function () {
var that = this;
that.set("isExpired", true);
that.set("showExpired", true);
},
formatDate: function (expirationDate) {
var date = new Date(); //date of experation
date.setYear(parseInt(expirationDate.substr(0, 4), 10));
date.setMonth(parseInt(expirationDate.substr(4, 2), 10) - 1);
date.setDate(parseInt(expirationDate.substr(6, 2), 10));
date.setHours(parseInt(expirationDate.substr(8, 2), 12)); // 201609290000
date.setMinutes(parseInt(expirationDate.substr(10, 2), 12));
return (date.toLocaleDateString());
},
calcDate: function (expirationDate) {
var date = new Date(); //date of experation
date.setYear(parseInt(expirationDate.substr(0, 4), 10));
date.setMonth(parseInt(expirationDate.substr(4, 2), 10) - 1);
date.setDate(parseInt(expirationDate.substr(6, 2), 10));
date.setHours(parseInt(expirationDate.substr(8, 2), 12)); // 201609290000
date.setMinutes(parseInt(expirationDate.substr(10, 2), 12));
var today = new Date(); //Setting todays date
today.setYear(today.getFullYear());
today.setMonth(today.getMonth());
today.setDate(today.getDate());
var millisecondsPerDay = (1000 * 60 * 60 * 24);
var millsBetween = (date.getTime() - today.getTime());
var numExpDays = Math.floor(millsBetween / millisecondsPerDay);
return (numExpDays);
}
});
app.loginService = {
viewModel: new LoginViewModel(),
afterShow: function () {
},
beforeShow: function () {
loadState();
},
//
// //loadState();
//var x = app.loginService.viewModel.get("companyName")
//alert(x);
// app.loginService.viewModel.isLoggedIn = true;
//logic to determine if user is logged in or not.
onShow: function () {
}
};
})(window);
I created a worked around using this
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="details" data-bind="visible: isLoggedIn"></a>