code-boxx/0-JS-LIB-MANAGER.MD

## 0-JS-LIB-MANAGER.MD

      
    Raw
  

              0-JS-LIB-MANAGER.MD
            
          
    JAVASCRIPT LIBRARY MANAGEMENT

https://code-boxx.com/javascript-library-management-system/
IMAGES


LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-js-lib.html
<!DOCTYPE html>
<html>
  <head>
    <!-- TITLE + CHARSET + DESCRIPTION + VIEWPORT + FAVICON -->
    <title>Library Management System</title>
    <meta charset="utf-8">
    <meta name="description" content="Library Management">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
    <link rel="icon" href="favicon.png" type="image/png">

    <!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="white">
    <link rel="apple-touch-icon" href="icon-512.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Lib Manager">
    <meta name="msapplication-TileImage" content="icon-512.png">
    <meta name="msapplication-TileColor" content="#ffffff">

    <!-- WEB APP MANIFEST -->
    <!-- https://web.dev/add-manifest/ -->
    <link rel="manifest" href="3-manifest.json">

    <!-- SERVICE WORKER -->
    <script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("4-worker.js");
    }
    </script>

    <!-- STYLESHEET + JAVASCRIPT -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="2-js-lib.css">
    <script defer src="2-js-lib.js"></script>
  </head>
  <body>
    <!-- (A) ADD/EDIT MEDIA -->
    <div id="libFormWrap"><form id="libForm" onsubmit="return lib.add()">
      <div id="formClose" class="mi" onclick="lib.toggle(false)">
        close
      </div>
      <input type="hidden" id="formID">
      <label>ISBN/ISSN/Serial Number</label>
      <input type="text" id="formCode" required>
      <label>Title</label>
      <input type="text" id="formTitle" required>
      <label>Author</label>
      <input type="text" id="formAuthor" required>
      <label>Location</label>
      <input type="text" id="formLoc" required>
      <input type="submit" value="Save">
    </form></div>

    <!-- (B) MEDIA LIST -->
    <div id="libListWrap">
      <div id="libListHead">
        <h1>MEDIA LIST</h1>
        <div id="formAdd" class="mi" onclick="lib.toggle(true)">
          add
        </div>
      </div>
      <div id="libList"></div>
    </div>
  </body>
</html>

## 2-js-lib.css
/* (A) WHOLE PAGE */
.mi{font-family:"Material Icons";font-weight:400;font-style:normal;text-decoration:none;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}

/* (B) SHARED */
button, input[type=button], input[type=submit], #formAdd, #formClose {
  border: 1px solid #424eab;
  color: #fff;
  background: #5561bd;
  cursor: pointer;
}
input, button { padding: 10px; }
input.mi, #formAdd, #formClose { padding: 15px; }
#libFormWrap, #libListHead {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (C) ADD/EDIT MEDIA */
/* (C1) FULL PAGE WRAPPER WRAPPER */
#libFormWrap {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
}
#libFormWrap.show {
  opacity: 1; visibility: visible;
}

/* (C2) ADD/EDIT FORM */
#libForm {
  position: relative;
  width: 350px;
  padding: 20px;
  border: 1px solid #ddd;
  background: #f2f2f2;
}
#formClose {
  position: absolute;
  top: 0; right: 0;
  font-weight: 700;
}
#libForm, #libForm input { border-radius: 10px; }
#libForm label, #libForm input {
  display: block;
  width: 100%;
}
#libForm label { margin: 10px 0; }
#libForm input { border: 1px solid #ccc; }
#libForm input[type=submit] { margin-top: 20px; }

/* (D) MEDIA LIST */
/* (D1) LIST WRAPPER */
#libListWrap {
  max-width: 1000px;
  padding: 10px;
  margin: 0 auto;
}

/* (D2) LIST HEADER */
#libListHead {
  display: flex;
  align-items: center;
  justify-content: center;
}
#libListHead h1 { flex-grow: 1; }

/* (D3) LIST ITEMS */
#libList .row {
  display: flex;
  border: 1px solid #eee;
  background: #f2f2f2;
  margin: 10px 0;
}
#libList .bdel {
  padding: 0 20px;
  border: 0;
  color: #fff;
  background: #780000;
}
#libList .binfo {
  padding: 10px;
  flex-grow: 1;
}

## 2-js-lib.js
var lib = {
  // (A) PROPERTIES
  // (A1) INDEXED DB
  iDB : null, iTX : null, iName : "MyLib",

  // (A2) HTML ELEMENTS
  hForm : null, hID : null, hCode : null,
  hTitle : null, hAuthor : null, hLoc : null, hList : null,

  // (B) INIT
  init : () => {
    // (B1) REQUIREMENTS CHECK - INDEXED DB
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    if (!window.indexedDB) {
      alert("Your browser does not support indexed database.");
      return;
    }

    // (B2) REQUIREMENTS CHECK - STORAGE CACHE
    if (!"caches" in window) {
      alert("Your browser does not support cache storage.");
      return;
    }

    // (B3) OPEN IDB
    let req = window.indexedDB.open(lib.iName, 1);

    // (B4) IDB OPEN ERROR
    req.onerror = evt => {
      alert("Indexed DB init error - " + evt.message);
      console.error(evt);
    };

    // (B5) IDB UPGRADE NEEDED
    req.onupgradeneeded = evt => {
      lib.iDB = evt.target.result;

      // (B5-1) IDB UPGRADE ERROR
      lib.iDB.onerror = evt => {
        alert("Indexed DB upgrade error - " + evt.message);
        console.error(evt);
      };

      // (B5-2) IDB VERSION 1
      if (evt.oldVersion < 1) {
        let store = lib.iDB.createObjectStore(lib.iName, {
          keyPath: "id",
          autoIncrement: true
        });
        store.createIndex("code", "code");
        store.createIndex("title", "title");
        store.createIndex("author", "author");
      }
    };

    // (B6) IDB OPEN OK
    req.onsuccess = evt => {
      // (B6-1) IDB OBJECTS
      lib.iDB = evt.target.result;
      lib.iTX = () => {
        return lib.iDB
        .transaction(lib.iName, "readwrite")
        .objectStore(lib.iName);
      };

      // (B6-2) GET HTML ELEMENTS
      lib.hForm = document.getElementById("libFormWrap");
      lib.hID = document.getElementById("formID");
      lib.hCode = document.getElementById("formCode");
      lib.hTitle = document.getElementById("formTitle");
      lib.hAuthor = document.getElementById("formAuthor");
      lib.hLoc = document.getElementById("formLoc");
      lib.hList = document.getElementById("libList");

      // (B6-3) DRAW BOOKS LIST
      lib.draw();
    };
  },

  // (C) TOGGLE ADD/EDIT MEDIA FORM
  toggle : id => {
    // (C1) HIDE FORM
    if (id == false) {
      lib.hID.value = "";
      lib.hCode.value = "";
      lib.hTitle.value = "";
      lib.hAuthor.value = "";
      lib.hLoc.value = "";
      lib.hForm.classList.remove("show");
    }

    // (C2) SHOW FORM
    else {
      // (C2-1) "EDIT" MODE
      if (Number.isInteger(id)) {
        let req = lib.iTX().get(id);
        req.onsuccess = evt => {
          lib.hID.value = id;
          lib.hCode.value = req.result.code;
          lib.hTitle.value = req.result.title;
          lib.hAuthor.value = req.result.author;
          lib.hLoc.value = req.result.location;
        };
      }

      // (C2-2) SHOW FORM
      lib.hForm.classList.add("show");
    }
  },

  // (D) ADD A NEW BOOK
  add : () => {
    // (D1) DATA TO SAVE
    let data = {
      id : lib.hID.value,
      code : lib.hCode.value,
      title : lib.hTitle.value,
      author : lib.hAuthor.value,
      location : lib.hLoc.value
    };

    // (D2) SAVE OR UPDATE
    if (data.id == "") {
      delete data.id;
      lib.iTX().add(data);
    } else {
      data.id = parseInt(data.id);
      lib.iTX().put(data);
    }

    // (D3) DONE
    lib.toggle(false);
    lib.draw();
    return false;
  },

  // (E) DELETE ENTRY
  del : id => { if (confirm(`Delete ${id}?`)) {
    // (E1) DELETE BOOK
    lib.iTX().delete(id);

    // (E2) REDRAW LIST
    lib.draw();
  }},

  // (F) DRAW BOOKS LIST
  draw : () => {
    lib.hList.innerHTML = "";
    lib.iTX().getAll().onsuccess = evt => { for (let book of evt.target.result) {
      let row = document.createElement("div");
      row.className = "row";
      row.innerHTML = `<div class="binfo">
        <div>
          <i class="mi">numbers</i> ${book.id}
          <i class="mi">qr_code_2</i> ${book.code}
        </div>
        <div>
          <i class="mi">menu_book</i> ${book.title}
          <i class="mi">person_outline</i> ${book.author}
        </div>
        <i class="mi">room</i> ${book.location}
      </div>
      <input type="button" class="mi" value="delete" onclick="lib.del(${book.id})">
      <input type="button" class="mi" value="edit" onclick="lib.toggle(${book.id})">`;
      lib.hList.appendChild(row);
    }};
  }
};
window.addEventListener("DOMContentLoaded", lib.init);

## 3-manifest.json
{
  "short_name": "Lib",
  "name": "Lib Manager",
  "icons": [{
    "src": "favicon.png",
    "sizes": "64x64",
    "type": "image/png"
  }, {
    "src": "icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "1-js-lib.html",
  "scope": "/",
  "background_color": "white",
  "theme_color": "white",
  "display": "standalone"
}

## 4-worker.js
// (A) CREATE/INSTALL CACHE
self.addEventListener("install", evt => {
  self.skipWaiting();
  evt.waitUntil(
    caches.open("JSLibMgr")
    .then(cache => cache.addAll([
      "favicon.png",
      "icon-512.png",
      "maticon.woff2",
      "1-js-lib.html",
      "2-js-lib.js",
      "2-js-lib.css"
    ]))
    .catch(err => console.error(err))
  );
});

// (B) CLAIM CONTROL INSTANTLY
self.addEventListener("activate", evt => self.clients.claim());

// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
self.addEventListener("fetch", evt => evt.respondWith(
  caches.match(evt.request).then(res => res || fetch(evt.request))
));
	<!DOCTYPE html>
	<html>
	<head>
	<!-- TITLE + CHARSET + DESCRIPTION + VIEWPORT + FAVICON -->
	<title>Library Management System</title>
	<meta charset="utf-8">
	<meta name="description" content="Library Management">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
	<link rel="icon" href="favicon.png" type="image/png">

	<!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="theme-color" content="white">
	<link rel="apple-touch-icon" href="icon-512.png">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="Lib Manager">
	<meta name="msapplication-TileImage" content="icon-512.png">
	<meta name="msapplication-TileColor" content="#ffffff">

	<!-- WEB APP MANIFEST -->
	<!-- https://web.dev/add-manifest/ -->
	<link rel="manifest" href="3-manifest.json">

	<!-- SERVICE WORKER -->
	<script>
	if ("serviceWorker" in navigator) {
	navigator.serviceWorker.register("4-worker.js");
	}
	</script>

	<!-- STYLESHEET + JAVASCRIPT -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="2-js-lib.css">
	<script defer src="2-js-lib.js"></script>
	</head>
	<body>
	<!-- (A) ADD/EDIT MEDIA -->
	<div id="libFormWrap"><form id="libForm" onsubmit="return lib.add()">
	<div id="formClose" class="mi" onclick="lib.toggle(false)">
	close
	</div>
	<input type="hidden" id="formID">
	<label>ISBN/ISSN/Serial Number</label>
	<input type="text" id="formCode" required>
	<label>Title</label>
	<input type="text" id="formTitle" required>
	<label>Author</label>
	<input type="text" id="formAuthor" required>
	<label>Location</label>
	<input type="text" id="formLoc" required>
	<input type="submit" value="Save">
	</form></div>

	<!-- (B) MEDIA LIST -->
	<div id="libListWrap">
	<div id="libListHead">
	<h1>MEDIA LIST</h1>
	<div id="formAdd" class="mi" onclick="lib.toggle(true)">
	add
	</div>
	</div>
	<div id="libList"></div>
	</div>
	</body>
	</html>
	/* (A) WHOLE PAGE */
	.mi{font-family:"Material Icons";font-weight:400;font-style:normal;text-decoration:none;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
	* {
	font-family: arial, sans-serif;
	box-sizing: border-box;
	}
	body {
	padding: 0;
	margin: 0;
	}

	/* (B) SHARED */
	button, input[type=button], input[type=submit], #formAdd, #formClose {
	border: 1px solid #424eab;
	color: #fff;
	background: #5561bd;
	cursor: pointer;
	}
	input, button { padding: 10px; }
	input.mi, #formAdd, #formClose { padding: 15px; }
	#libFormWrap, #libListHead {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	/* (C) ADD/EDIT MEDIA */
	/* (C1) FULL PAGE WRAPPER WRAPPER */
	#libFormWrap {
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s;
	}
	#libFormWrap.show {
	opacity: 1; visibility: visible;
	}

	/* (C2) ADD/EDIT FORM */
	#libForm {
	position: relative;
	width: 350px;
	padding: 20px;
	border: 1px solid #ddd;
	background: #f2f2f2;
	}
	#formClose {
	position: absolute;
	top: 0; right: 0;
	font-weight: 700;
	}
	#libForm, #libForm input { border-radius: 10px; }
	#libForm label, #libForm input {
	display: block;
	width: 100%;
	}
	#libForm label { margin: 10px 0; }
	#libForm input { border: 1px solid #ccc; }
	#libForm input[type=submit] { margin-top: 20px; }

	/* (D) MEDIA LIST */
	/* (D1) LIST WRAPPER */
	#libListWrap {
	max-width: 1000px;
	padding: 10px;
	margin: 0 auto;
	}

	/* (D2) LIST HEADER */
	#libListHead {
	display: flex;
	align-items: center;
	justify-content: center;
	}
	#libListHead h1 { flex-grow: 1; }

	/* (D3) LIST ITEMS */
	#libList .row {
	display: flex;
	border: 1px solid #eee;
	background: #f2f2f2;
	margin: 10px 0;
	}
	#libList .bdel {
	padding: 0 20px;
	border: 0;
	color: #fff;
	background: #780000;
	}
	#libList .binfo {
	padding: 10px;
	flex-grow: 1;
	}
	var lib = {
	// (A) PROPERTIES
	// (A1) INDEXED DB
	iDB : null, iTX : null, iName : "MyLib",

	// (A2) HTML ELEMENTS
	hForm : null, hID : null, hCode : null,
	hTitle : null, hAuthor : null, hLoc : null, hList : null,

	// (B) INIT
	init : () => {
	// (B1) REQUIREMENTS CHECK - INDEXED DB
	window.indexedDB = window.indexedDB \|\| window.mozIndexedDB \|\| window.webkitIndexedDB \|\| window.msIndexedDB;
	if (!window.indexedDB) {
	alert("Your browser does not support indexed database.");
	return;
	}

	// (B2) REQUIREMENTS CHECK - STORAGE CACHE
	if (!"caches" in window) {
	alert("Your browser does not support cache storage.");
	return;
	}

	// (B3) OPEN IDB
	let req = window.indexedDB.open(lib.iName, 1);

	// (B4) IDB OPEN ERROR
	req.onerror = evt => {
	alert("Indexed DB init error - " + evt.message);
	console.error(evt);
	};

	// (B5) IDB UPGRADE NEEDED
	req.onupgradeneeded = evt => {
	lib.iDB = evt.target.result;

	// (B5-1) IDB UPGRADE ERROR
	lib.iDB.onerror = evt => {
	alert("Indexed DB upgrade error - " + evt.message);
	console.error(evt);
	};

	// (B5-2) IDB VERSION 1
	if (evt.oldVersion < 1) {
	let store = lib.iDB.createObjectStore(lib.iName, {
	keyPath: "id",
	autoIncrement: true
	});
	store.createIndex("code", "code");
	store.createIndex("title", "title");
	store.createIndex("author", "author");
	}
	};

	// (B6) IDB OPEN OK
	req.onsuccess = evt => {
	// (B6-1) IDB OBJECTS
	lib.iDB = evt.target.result;
	lib.iTX = () => {
	return lib.iDB
	.transaction(lib.iName, "readwrite")
	.objectStore(lib.iName);
	};

	// (B6-2) GET HTML ELEMENTS
	lib.hForm = document.getElementById("libFormWrap");
	lib.hID = document.getElementById("formID");
	lib.hCode = document.getElementById("formCode");
	lib.hTitle = document.getElementById("formTitle");
	lib.hAuthor = document.getElementById("formAuthor");
	lib.hLoc = document.getElementById("formLoc");
	lib.hList = document.getElementById("libList");

	// (B6-3) DRAW BOOKS LIST
	lib.draw();
	};
	},

	// (C) TOGGLE ADD/EDIT MEDIA FORM
	toggle : id => {
	// (C1) HIDE FORM
	if (id == false) {
	lib.hID.value = "";
	lib.hCode.value = "";
	lib.hTitle.value = "";
	lib.hAuthor.value = "";
	lib.hLoc.value = "";
	lib.hForm.classList.remove("show");
	}

	// (C2) SHOW FORM
	else {
	// (C2-1) "EDIT" MODE
	if (Number.isInteger(id)) {
	let req = lib.iTX().get(id);
	req.onsuccess = evt => {
	lib.hID.value = id;
	lib.hCode.value = req.result.code;
	lib.hTitle.value = req.result.title;
	lib.hAuthor.value = req.result.author;
	lib.hLoc.value = req.result.location;
	};
	}

	// (C2-2) SHOW FORM
	lib.hForm.classList.add("show");
	}
	},

	// (D) ADD A NEW BOOK
	add : () => {
	// (D1) DATA TO SAVE
	let data = {
	id : lib.hID.value,
	code : lib.hCode.value,
	title : lib.hTitle.value,
	author : lib.hAuthor.value,
	location : lib.hLoc.value
	};

	// (D2) SAVE OR UPDATE
	if (data.id == "") {
	delete data.id;
	lib.iTX().add(data);
	} else {
	data.id = parseInt(data.id);
	lib.iTX().put(data);
	}

	// (D3) DONE
	lib.toggle(false);
	lib.draw();
	return false;
	},

	// (E) DELETE ENTRY
	del : id => { if (confirm(`Delete ${id}?`)) {
	// (E1) DELETE BOOK
	lib.iTX().delete(id);

	// (E2) REDRAW LIST
	lib.draw();
	}},

	// (F) DRAW BOOKS LIST
	draw : () => {
	lib.hList.innerHTML = "";
	lib.iTX().getAll().onsuccess = evt => { for (let book of evt.target.result) {
	let row = document.createElement("div");
	row.className = "row";
	row.innerHTML = `<div class="binfo">
	<div>
	<i class="mi">numbers</i> ${book.id}
	<i class="mi">qr_code_2</i> ${book.code}
	</div>
	<div>
	<i class="mi">menu_book</i> ${book.title}
	<i class="mi">person_outline</i> ${book.author}
	</div>
	<i class="mi">room</i> ${book.location}
	</div>
	<input type="button" class="mi" value="delete" onclick="lib.del(${book.id})">
	<input type="button" class="mi" value="edit" onclick="lib.toggle(${book.id})">`;
	lib.hList.appendChild(row);
	}};
	}
	};
	window.addEventListener("DOMContentLoaded", lib.init);
	{
	"short_name": "Lib",
	"name": "Lib Manager",
	"icons": [{
	"src": "favicon.png",
	"sizes": "64x64",
	"type": "image/png"
	}, {
	"src": "icon-512.png",
	"sizes": "512x512",
	"type": "image/png"
	}],
	"start_url": "1-js-lib.html",
	"scope": "/",
	"background_color": "white",
	"theme_color": "white",
	"display": "standalone"
	}
	// (A) CREATE/INSTALL CACHE
	self.addEventListener("install", evt => {
	self.skipWaiting();
	evt.waitUntil(
	caches.open("JSLibMgr")
	.then(cache => cache.addAll([
	"favicon.png",
	"icon-512.png",
	"maticon.woff2",
	"1-js-lib.html",
	"2-js-lib.js",
	"2-js-lib.css"
	]))
	.catch(err => console.error(err))
	);
	});

	// (B) CLAIM CONTROL INSTANTLY
	self.addEventListener("activate", evt => self.clients.claim());

	// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
	self.addEventListener("fetch", evt => evt.respondWith(
	caches.match(evt.request).then(res => res \|\| fetch(evt.request))
	));