<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../../../polymer/polymer.html">
	<link rel="import" href="../../sortable-table.html">
	<link rel="import" href="../../indexeddb-ajax.html">
	<link rel="import" href="../json-stringify.html">
	<link rel="import" href="../project-docs.html">
	<link rel="stylesheet" href="../../css/extjs4.css" shim-shadowdom>
	<style shim-shadowdom>
		.paramType { color: #526E9C }
		sortable-table.extjs4::shadow tbody td { line-height: 1.2em; }
		sortable-table.extjs4::shadow td.column-name { width: 30%; }
		sortable-table.extjs4::shadow td.column-energy,
		sortable-table.extjs4::shadow td.column-protein,
		sortable-table.extjs4::shadow td.column-fat,
		sortable-table.extjs4::shadow td.column-carbohydrates { width: 15%; text-align: right; }
	</style>
</head>
<body unresolved is="project-docs">

	<h1>IndexedDB</h1>

	The is an implementation of HTML5 <a href="http://www.w3.org/TR/IndexedDB/" target="_blank" alt="IndexedDB on W3C">
	IndexedDB</a>, using an XHR request to load a versioned JSON file.

	<p>

	While queries run in the client's browser, data is not processed as part of the document or UI thread.<br>
	This puts it into a middle ground as an alternative to server-side processing.<br>
	The benefits are low-latency, offline browsing support, reduced server load, and it maintains high performance as data is stored/processed outside of the document DOM.<br>

	<p>

	This is a working sample that should be adapted to individual need.<br>
	<em style="color:red">Firefox on Mac OS seems to take issue with IndexedDB</em>

	<p>

	<pre>
	&lt;sortable-table pageSize="10"&gt;
		&lt;indexeddb-ajax role="datasource" url="<a href="./fruits.json">./fruits.json</a>" dbVersion="48"&gt;&lt;/indexeddb-ajax&gt;
	&lt;/sortable-table&gt;
	</pre>

	<template is="auto-binding">

		<div class="x-panel x-grid" style="width:715px">
			<div class="x-panel-header-default-framed-top">Measure per 100 grams; raw</div>
			<sortable-table
				class="extjs4"
				footerTemplate="defaultPager"
				pageSize="10"
				loading="{{loading}}"
			>
				<sortable-column name="name">Fruit</sortable-column>
				<sortable-column name="energy">Energy (kcal)</sortable-column>
				<sortable-column name="protein">Protein (g)</sortable-column>
				<sortable-column name="fat">Fat, total (g)</sortable-column>
				<sortable-column name="carbohydrates">Carbohydrate (g)</sortable-column>

				<indexeddb-ajax role="datasource" url="./fruits.json" dbVersion="48"></indexeddb-ajax>
			</sortable-table>
		</div>

		<p>

		Data is loading = {{loading}}
	</template>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h2>Basic Use</h2>

	<pre>
	<strong>&lt;indexeddb-ajax</strong>
		url=<span class="paramType">[string]</span>
		dbName=<span class="paramType">[optional string]</span>
		dbStoreName=<span class="paramType">[optional string]</span>
		dbVersion=<span class="paramType">[string]</span>
		start=<span class="paramType">[int]</span>
		length=<span class="paramType">[int]</span>
		sortColumn=<span class="paramType">[string]</span>
		sortDescending=<span class="paramType">[boolean]</span>
		columns='[
			{"name":"name"},
			{"name":"energy"},
			{"name":"protein"},
			{"name":"fat"},
			{"name":"carbohydrates"}
		]'
	<strong>&gt;&lt;/indexeddb-ajax&gt;</strong>
	</pre>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<p>

	<h2>Demo</h2>

	<p>

	<template is="auto-binding">
		<table>
			<tr>
				<td>Start</td>
				<td><input type="number" min="0" max="47" value="{{start}}" style="text-align:right"></td>
				<td><input type="range" min="0" max="47" value="{{start}}"></td>
				<td>Paging first record indicator. This is the start point in the current data set (0 index based - i.e. 0 is the first record).</td>
			</tr>
			<tr>
				<td>Length</td>
				<td><input type="number" min="-1" max="47" value="{{length}}" style="text-align:right"></td>
				<td><input type="range" min="-1" max="47" value="{{length}}"></td>
				<td>Number of records that the table can display in the current draw. It is expected that the number of records returned will be equal to this number, unless the server has fewer records to return. Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)</td>
			</tr>
			<tr>
				<td style="white-space: nowrap;">Sort Column</td>
				<td>
					<select value="{{sortColumn}}">
						<option value="">-</option>
						<option value="name">Fruit</option>
						<option value="energy">Energy (kcal)</option>
						<option value="protein">Protein (g)</option>
						<option value="fat">Fat, total (g)</option>
						<option value="carbohydrates">Carbohydrate (g)</option>
					</select>
				</td>
				<td><input type="checkbox" checked="{{sortDescending}}">Descending</td>
				<td>Column by which to sort the records.</td>
			</tr>
		</table>

		<indexeddb-ajax
			url="./fruits.json"
			dbVersion="48"
			data="{{data}}"
			dataSize="{{dataSize}}"
			loading="{{loading}}"
			start="{{start}}"
			length="{{length}}"
			sortColumn="{{sortColumn}}"
			sortDescending="{{sortDescending}}"
			columns='[
				{"name":"name"},
				{"name":"energy"},
				{"name":"protein"},
				{"name":"fat"},
				{"name":"carbohydrates"}
			]'
		></indexeddb-ajax>

		<p>

		<strong>
			<template if="{{!loading}}">Waiting for Query<br></template>
			<template if="{{loading}}">Loading<br></template>
			{{dataSize}} Total Records<br>
			{{data.length}} Records Returned<br>
		</strong>

		<json-stringify
			data="{{data}}"
			style="overflow-y:auto;display:block;border:1px solid #333;"
		></json-stringify>
	</template>

</body>
</html>