arielferdman/database.js

## database.js
const remote = require('electron');
const sqlite3 = require('sqlite3');
const knex = require('knex');
const path = require('path');

const {app} = remote;

const database = knex({
    client: 'sqlite3',
    connection: {
        filename: path.join(app.getPath('userData'), 'db.sqlite')
    },
    useNullAsDefault: true
});

database.schema.hasTable('clients').then(exists => {
    if (!exists) {
        const colWidth = 200;
        const commentsColWidth = 10000;
        const documentsColWidth = 2000;
        return database.schema.createTable('clients', t => {
            t.increments('id').primary();
            t.string('fname', colWidth);
            t.string('lname', colWidth);
            t.string('address', colWidth);
            t.string('passport', colWidth);
            t.string('nid', colWidth);
            t.string('employer1', colWidth);
            t.string('employer2', colWidth);
            t.string('comments', commentsColWidth);
            t.string('documents', documentsColWidth);
        });
    }
});

export default database;

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>SimpleCM</h1>
<form action="">
    <div class="wrap">
      <label for="fname" class="1i">שם פרטי</label><input name="fname" id="fname" type="text" class="1i" />
    </div>
    <div class="wrap">
      <label for="lname" class="2i">שם משפחה</label><input name="lname" id="lname" type="text" class="2i" />
    </div>
    <div class="wrap">
      <label for="address" class="3i">כתובת</label><input name="address" id="address" type="text" class="3i" />
    </div>
    <div class="wrap">
      <label for="passport" class="4i">דרכון</label><input name="passport" id="passport" type="text" class="4i" />
    </div>
    <div class="wrap">
      <label for="id" class="5i">תז</label><input name="id" id="id" type="text" class="5i" />
    </div>
    <div class="wrap">
      <label for="employee1" class="6i">מעסיק 1</label><input name="employer1" id="employee1" type="text" class="6i" />
    </div>
    <div class="wrap">
      <label for="employee2" class="7i">מעסיק 2</label><input name="employer2" id="employee2" type="text" class="7i" />
    </div>
    <div class="wrap">
      <label for="comments" class="8i">הערות</label><textarea name="comments" id="comments" type="text" class="8i"></textarea>
    </div>
    <div class="wrap">
      <label for="documents" class="9i">מסמכים</label><input name="documents" id="documents" type="file" class="9i" multiple />
    </div>
    <div class="wrap">
      <label for="submit" class="10i"></label><button name="submit" id="submit" class="createCustomer" type="submit">צרי לקוח</button>
    </div>
</form>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 900,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  mainWindow.webContents.openDevTools();

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 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()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
const {ipcMain} = require('electron');
import database from './database.js';
// const sqlite3 = require('sqlite3');

// function init_db() {
//   const db = new sqlite3.Database('simplecm');
//   let stmt = `CREATE TABLE IF NOT EXISTS clients (
//     id INTEGER PRIMARY KEY AUTOINCREMENT,
//     fname TEXT,
//     lname TEXT,
//     address, TEXT,
//     passport, TEXT,
//     nid TEXT,
//     employer1 TEXT,
//     employer2 TEXT,
//     comments TEXT,
//     documents TEXT);`;

//     db.serialize(() => {
//       db.run(stmt);
//       db.finalize();
//     });

//     return db;
// }

ipcMain.handle('invoke-handle-message', (event, arg) => {
    console.log(arg)
    return 'pong';
});

ipcMain.handle('formSubmit', async (evt, args) => {
  console.log(args);
  let data = JSON.parse(args);
  let res = 'ok';

  console.log(typeof(database));
  console.log(database);

  database.insert(data).then( res => console.log(res));

  // let db = init_db();

  // db.serialize(() => {
  //   let stmt = db.prepare('insert into clients values(?)');
  //   stmt.run(data);
  //   stmt.finalize();
  // });

  return res;
});

## package.json
{
  "name": "SimpleCm",
  "productName": "SimpleCm",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "ariel",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "16.0.2"
  }
}

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
// https://gist.github.com/arielferdman/5eedfb3cc50dd6ca7aab8806d791f2a2

const { ipcRenderer } = require('electron');

ipcRenderer
  .invoke('invoke-handle-message', 'ping')
  .then((reply) => console.log(reply));


window.addEventListener('DOMContentLoaded', () => {

});

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  fillForm();

  let formElem = document.querySelector('form');

  formElem.addEventListener('submit', (e) => {
      e.preventDefault();

      new FormData(formElem);
  });

  formElem.addEventListener('formdata', (f) => {
      var data = f.formData;
      let a = JSON.stringify(Array.from(data.entries()));
      ipcRenderer.invoke('formSubmit', a).then(res => {
          console.log(res);
      });
  });

});

function fillForm() {
    let inputs = document.querySelectorAll('input');
    let textArea = document.querySelector('textArea');

    inputs[0].value = 'אריאל';
    inputs[1].value = 'פרדמן';
    inputs[2].value = 'אחד העם 1 ב';
    inputs[3].value = '31865545';
    inputs[4].value = '066423872';
    inputs[5].value = 'ליזה';
    inputs[6].value = 'כוח אדם';
    textArea.value = 'סוכם שיעביר 12 תלושים';
}
;

## styles.css
/* styles.css */

/* Add styles here to customize the appearance of your app */

h1 {
    margin-bottom: 25px;
    margin-left: 45%;
}

.form {
    direction: rtl;
}

.button {
    display: flex;
    float: right;
}

.wrap {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
}
	const remote = require('electron');
	const sqlite3 = require('sqlite3');
	const knex = require('knex');
	const path = require('path');

	const {app} = remote;

	const database = knex({
	client: 'sqlite3',
	connection: {
	filename: path.join(app.getPath('userData'), 'db.sqlite')
	},
	useNullAsDefault: true
	});

	database.schema.hasTable('clients').then(exists => {
	if (!exists) {
	const colWidth = 200;
	const commentsColWidth = 10000;
	const documentsColWidth = 2000;
	return database.schema.createTable('clients', t => {
	t.increments('id').primary();
	t.string('fname', colWidth);
	t.string('lname', colWidth);
	t.string('address', colWidth);
	t.string('passport', colWidth);
	t.string('nid', colWidth);
	t.string('employer1', colWidth);
	t.string('employer2', colWidth);
	t.string('comments', commentsColWidth);
	t.string('documents', documentsColWidth);
	});
	}
	});

	export default database;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<link href="./styles.css" rel="stylesheet">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>SimpleCM</h1>
	<form action="">
	<div class="wrap">
	<label for="fname" class="1i">שם פרטי</label><input name="fname" id="fname" type="text" class="1i" />
	</div>
	<div class="wrap">
	<label for="lname" class="2i">שם משפחה</label><input name="lname" id="lname" type="text" class="2i" />
	</div>
	<div class="wrap">
	<label for="address" class="3i">כתובת</label><input name="address" id="address" type="text" class="3i" />
	</div>
	<div class="wrap">
	<label for="passport" class="4i">דרכון</label><input name="passport" id="passport" type="text" class="4i" />
	</div>
	<div class="wrap">
	<label for="id" class="5i">תז</label><input name="id" id="id" type="text" class="5i" />
	</div>
	<div class="wrap">
	<label for="employee1" class="6i">מעסיק 1</label><input name="employer1" id="employee1" type="text" class="6i" />
	</div>
	<div class="wrap">
	<label for="employee2" class="7i">מעסיק 2</label><input name="employer2" id="employee2" type="text" class="7i" />
	</div>
	<div class="wrap">
	<label for="comments" class="8i">הערות</label><textarea name="comments" id="comments" type="text" class="8i"></textarea>
	</div>
	<div class="wrap">
	<label for="documents" class="9i">מסמכים</label><input name="documents" id="documents" type="file" class="9i" multiple />
	</div>
	<div class="wrap">
	<label for="submit" class="10i"></label><button name="submit" id="submit" class="createCustomer" type="submit">צרי לקוח</button>
	</div>
	</form>

	<!-- You can also require other files to run in this process -->
	<script src="./renderer.js"></script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')
	const path = require('path')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 1200,
	height: 900,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js'),
	nodeIntegration: true,
	contextIsolation: false,
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	mainWindow.webContents.openDevTools();

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// 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()

	app.on('activate', function () {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

	// Quit when all windows are closed, except on macOS. There, it's common
	// for applications and their menu bar to stay active until the user quits
	// explicitly with Cmd + Q.
	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	const {ipcMain} = require('electron');
	import database from './database.js';
	// const sqlite3 = require('sqlite3');

	// function init_db() {
	// const db = new sqlite3.Database('simplecm');
	// let stmt = `CREATE TABLE IF NOT EXISTS clients (
	// id INTEGER PRIMARY KEY AUTOINCREMENT,
	// fname TEXT,
	// lname TEXT,
	// address, TEXT,
	// passport, TEXT,
	// nid TEXT,
	// employer1 TEXT,
	// employer2 TEXT,
	// comments TEXT,
	// documents TEXT);`;

	// db.serialize(() => {
	// db.run(stmt);
	// db.finalize();
	// });

	// return db;
	// }

	ipcMain.handle('invoke-handle-message', (event, arg) => {
	console.log(arg)
	return 'pong';
	});

	ipcMain.handle('formSubmit', async (evt, args) => {
	console.log(args);
	let data = JSON.parse(args);
	let res = 'ok';

	console.log(typeof(database));
	console.log(database);

	database.insert(data).then( res => console.log(res));

	// let db = init_db();

	// db.serialize(() => {
	// let stmt = db.prepare('insert into clients values(?)');
	// stmt.run(data);
	// stmt.finalize();
	// });

	return res;
	});
	{
	"name": "SimpleCm",
	"productName": "SimpleCm",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "ariel",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "16.0.2"
	}
	}
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	// https://gist.github.com/arielferdman/5eedfb3cc50dd6ca7aab8806d791f2a2

	const { ipcRenderer } = require('electron');

	ipcRenderer
	.invoke('invoke-handle-message', 'ping')
	.then((reply) => console.log(reply));


	window.addEventListener('DOMContentLoaded', () => {

	});
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.
	const { ipcRenderer } = require('electron');

	window.addEventListener('DOMContentLoaded', () => {
	fillForm();

	let formElem = document.querySelector('form');

	formElem.addEventListener('submit', (e) => {
	e.preventDefault();

	new FormData(formElem);
	});

	formElem.addEventListener('formdata', (f) => {
	var data = f.formData;
	let a = JSON.stringify(Array.from(data.entries()));
	ipcRenderer.invoke('formSubmit', a).then(res => {
	console.log(res);
	});
	});

	});

	function fillForm() {
	let inputs = document.querySelectorAll('input');
	let textArea = document.querySelector('textArea');

	inputs[0].value = 'אריאל';
	inputs[1].value = 'פרדמן';
	inputs[2].value = 'אחד העם 1 ב';
	inputs[3].value = '31865545';
	inputs[4].value = '066423872';
	inputs[5].value = 'ליזה';
	inputs[6].value = 'כוח אדם';
	textArea.value = 'סוכם שיעביר 12 תלושים';
	}
	;
	/* styles.css */

	/* Add styles here to customize the appearance of your app */

	h1 {
	margin-bottom: 25px;
	margin-left: 45%;
	}

	.form {
	direction: rtl;
	}

	.button {
	display: flex;
	float: right;
	}

	.wrap {
	display: flex;
	flex-direction: row-reverse;
	margin-top: 20px;
	}