helgasoft/dxdel.html

## dxdel.html
<!DOCTYPE html>
<html>
<head>
	<title>Dexie.js Table Delete Demo</title>
	<meta name="description" content="Add and delete storage tables in IndexedDB thru Dexie.js">
	<meta name="author" content="helgasoft.com">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://unpkg.com/dexie/dist/dexie.min.js" type="text/javascript"></script>
<!--
	related to https://github.com/dfahlander/Dexie.js/issues/684
-->
</head>

<body style='font-family: Verdana;'>
<h3>Demo: <a href=https://github.com/dfahlander/Dexie.js>Dexie.js</a> table add/delete</h3>
Table list:
<div id='container' style='margin-left:12px;'></div>
<input type='button' id='go' value='Delete' onclick='delOne();'/>
<p><strong><span id='msg'>hint: press F12 to open Inspector, watch tab <i>Application</i>(Chrome) or <i>Storage</i>(FF)</span></strong></p>

<script>
const dbname = 'dxee';
var db = new Dexie(dbname);
var diversion = 0;
var currSchema = {};

// replace db schema
async function extendSchema(db, extendedSchema) {
	db.close();  //Cannot add version when database is open
	db.version(diversion).stores(currSchema);
	diversion++;
	db.version(Math.round(diversion)).stores(extendedSchema);
	await db.open();
}

function Ask2CreateTables() {
	if (window.confirm("Create 3 test tables in database '" + dbname + "'?")) {
		// create samples
		newSchema = { Algeria: 'key', France: 'key', Morocco: 'key' }
		extendSchema(db, newSchema);

		var tmp = [];
		for (var i = 0; i < 100; i++) {
			tmp.push({ key: 'Oran'+i, value: 'city in Algeria '+i});
		}
		db.Algeria.bulkAdd(tmp);
		tmp = [];
		for (var i = 0; i < 2000; i++) {
			tmp.push({ key: 'Dijon'+i, value: 'city in France '+i});
		}
		db.France.bulkAdd(tmp);
		db.Morocco.put({ key: 'Casablanca', value: 'the white city'});

		showTables();
	}
}

db.open().then(function (dab) {
	console.log ("Found database: " + dab.name + " version: " + dab.verno);
	diversion = dab.verno;
	if (dab.tables.length == 0) {
		Ask2CreateTables();
	} else {
		showTables();
	}
}).catch('NoSuchDatabaseError', function(e) {
	// Database with that name did not exist
	console.log ("Database not found");
	// create empty db
	if (window.confirm('Create a new database "'+dbname+'" in your IndexedDB ?')) {
		extendSchema(db, {}).then(() => {
			Ask2CreateTables();
		}).catch(err => console.log(err));
	}
}).catch(function (e) {
    console.log ("Oh uh: " + e);
});

function showTables() {
	mlst = [];
	db.tables.forEach(function (table) {
		mlst.push(table.name); });
	console.log(dbname + ' v.' + db.verno + ' tables: ' + mlst.join(' ') );
	document.getElementById('container').innerHTML = '';

	for (var i = 0; i < mlst.length; i++) {
		lab = document.createElement("label");
		x = document.createElement("input");
		x.setAttribute("type", "radio");
		x.setAttribute("name", "mona");
		x.value = mlst[i];
		x.checked = false;
		y = document.createElement("span");
		y.innerHTML = mlst[i];
		lab.appendChild(x);
		lab.appendChild(y);
		document.getElementById('container').appendChild(lab);
		z = document.createElement("BR");
		document.getElementById('container').appendChild(z);
	}
	document.getElementById('msg').innerHTML = (mlst.length==0) ? 'restart by reloading page' : '';
}

function delOne() {
	// delete selected table
	sel = document.querySelector('input[name=mona]:checked');
	if (!sel) sel = document.querySelector('input[name=mona]')
	if (!sel) return;
	if (window.confirm('Delete table "' + sel.value + '" ?')) {
		document.getElementById('go').value = 'processing...';
		console.log('dropping: '+ sel.value);

		currSchema = db.tables.reduce(function(obj, v) { obj[v.name] = 'key'; return obj; }, {})
		extendSchema(db, { [sel.value]: null }).then(() => {
			console.log('dropped: '+ this.sel.value);
			showTables();
			document.getElementById('go').value = 'Delete';
		}).catch(err => console.log(err));
	}
}

</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dexie.js Table Delete Demo</title>
	<meta name="description" content="Add and delete storage tables in IndexedDB thru Dexie.js">
	<meta name="author" content="helgasoft.com">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://unpkg.com/dexie/dist/dexie.min.js" type="text/javascript"></script>
	<!--
	related to https://github.com/dfahlander/Dexie.js/issues/684
	-->
	</head>

	<body style='font-family: Verdana;'>
	<h3>Demo: <a href=https://github.com/dfahlander/Dexie.js>Dexie.js</a> table add/delete</h3>
	Table list:
	<div id='container' style='margin-left:12px;'></div>
	<input type='button' id='go' value='Delete' onclick='delOne();'/>
	<p><strong><span id='msg'>hint: press F12 to open Inspector, watch tab <i>Application</i>(Chrome) or <i>Storage</i>(FF)</span></strong></p>

	<script>
	const dbname = 'dxee';
	var db = new Dexie(dbname);
	var diversion = 0;
	var currSchema = {};

	// replace db schema
	async function extendSchema(db, extendedSchema) {
	db.close(); //Cannot add version when database is open
	db.version(diversion).stores(currSchema);
	diversion++;
	db.version(Math.round(diversion)).stores(extendedSchema);
	await db.open();
	}

	function Ask2CreateTables() {
	if (window.confirm("Create 3 test tables in database '" + dbname + "'?")) {
	// create samples
	newSchema = { Algeria: 'key', France: 'key', Morocco: 'key' }
	extendSchema(db, newSchema);

	var tmp = [];
	for (var i = 0; i < 100; i++) {
	tmp.push({ key: 'Oran'+i, value: 'city in Algeria '+i});
	}
	db.Algeria.bulkAdd(tmp);
	tmp = [];
	for (var i = 0; i < 2000; i++) {
	tmp.push({ key: 'Dijon'+i, value: 'city in France '+i});
	}
	db.France.bulkAdd(tmp);
	db.Morocco.put({ key: 'Casablanca', value: 'the white city'});

	showTables();
	}
	}

	db.open().then(function (dab) {
	console.log ("Found database: " + dab.name + " version: " + dab.verno);
	diversion = dab.verno;
	if (dab.tables.length == 0) {
	Ask2CreateTables();
	} else {
	showTables();
	}
	}).catch('NoSuchDatabaseError', function(e) {
	// Database with that name did not exist
	console.log ("Database not found");
	// create empty db
	if (window.confirm('Create a new database "'+dbname+'" in your IndexedDB ?')) {
	extendSchema(db, {}).then(() => {
	Ask2CreateTables();
	}).catch(err => console.log(err));
	}
	}).catch(function (e) {
	console.log ("Oh uh: " + e);
	});

	function showTables() {
	mlst = [];
	db.tables.forEach(function (table) {
	mlst.push(table.name); });
	console.log(dbname + ' v.' + db.verno + ' tables: ' + mlst.join(' ') );
	document.getElementById('container').innerHTML = '';

	for (var i = 0; i < mlst.length; i++) {
	lab = document.createElement("label");
	x = document.createElement("input");
	x.setAttribute("type", "radio");
	x.setAttribute("name", "mona");
	x.value = mlst[i];
	x.checked = false;
	y = document.createElement("span");
	y.innerHTML = mlst[i];
	lab.appendChild(x);
	lab.appendChild(y);
	document.getElementById('container').appendChild(lab);
	z = document.createElement("BR");
	document.getElementById('container').appendChild(z);
	}
	document.getElementById('msg').innerHTML = (mlst.length==0) ? 'restart by reloading page' : '';
	}

	function delOne() {
	// delete selected table
	sel = document.querySelector('input[name=mona]:checked');
	if (!sel) sel = document.querySelector('input[name=mona]')
	if (!sel) return;
	if (window.confirm('Delete table "' + sel.value + '" ?')) {
	document.getElementById('go').value = 'processing...';
	console.log('dropping: '+ sel.value);

	currSchema = db.tables.reduce(function(obj, v) { obj[v.name] = 'key'; return obj; }, {})
	extendSchema(db, { [sel.value]: null }).then(() => {
	console.log('dropped: '+ this.sel.value);
	showTables();
	document.getElementById('go').value = 'Delete';
	}).catch(err => console.log(err));
	}
	}

	</script>
	</body>

	</html>