PD00000420-10000111 - Add initial version of the component

puredat · Jun 30, 2019 · 5772ed7 · 5772ed7
1 parent 7221218
commit 5772ed7
Show file tree

Hide file tree

Showing 7 changed files with 400 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
diff --git a/README.md b/README.md
@@ -1 +1,38 @@
-# puredat-timestamp-many
+# \<puredat-timestamp-many\>
+
+
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
+
+## Viewing Your Application
+
+```
+$ polymer serve
+```
+
+## Building Your Application
+
+```
+$ polymer build
+```
+
+This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
+containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
+CSS, and JS optimizers.
+
+You can serve the built versions by giving `polymer serve` a folder to serve
+from:
+
+```
+$ polymer serve build/bundled
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,16 @@
+{
+  "name": "puredat-timestamp-many",
+  "main": "puredat-timestamp-many.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "moment": "^2.20.1"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "puredat-timestamp": "puredat/puredat-timestamp",
+    "puredat-paper-input-autocomplete-chips": "puredat/puredat-paper-input-autocomplete-chips"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <title>puredat-timestamp-many demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../puredat-timestamp-many.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
+  </head>
+  <body>
+
+    <div class="vertical-section-container centered">
+      <h3>Basic puredat-timestamp-many Demo</h3>
+      <puredat-timestamp-many value="2019-06-17 15:49:41" name="test" label="test"></puredat-date-many>
+    </div>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head>
+		<title>puredat-timestamp-many</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+		<link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
+	</head>
+	<body>
+		<iron-component-page src="./puredat-timestamp-many.html"></iron-component-page>
+	</body>
+</html>
diff --git a/puredat-timestamp-many.html b/puredat-timestamp-many.html
@@ -0,0 +1,211 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/puredat-timestamp/puredat-timestamp.html">
+<link rel="import" href="bower_components/puredat-paper-input-autocomplete-chips/paper-input-autocomplete-chips.html">
+<!--
+	`puredat-timestamp-many` "STRING" type, "MANY" cardinality widget.
+	
+	@demo demo/index.html 
+-->
+<dom-module id="puredat-timestamp-many">
+	<template>
+		<style>
+			paper-input-autocomplete-chips {
+				float:left;
+				--paper-input-container: {
+					padding-right: 10px;
+				}
+			}
+
+			puredat-timestamp{
+				--paper-input-container: {
+					display: none;
+				}
+			}
+
+			iron-icon {
+				float: left;
+				margin-top: 20px;
+			}
+
+			puredat-timestamp {
+				clear:both;
+			}
+		</style>
+
+		<paper-input-autocomplete-chips
+						tabindex="-1"
+						no-chip-image
+						no-label-float
+						type="text"
+						maxlength="[[maxLength]]"
+						max-selected-items="100"
+						label="[[label]]"
+						readonly$="[[readOnly]]"
+						error-message="[[errorMessage]]"
+						invalid="[[_isInvalid(errorMessage)]]"
+						allowed-pattern="[[pattern]]"
+						allow-select-unknown-token
+						on-selected-objects-changed="_selectedChanged"
+						data-lng$="{{item}}">
+		</paper-input-autocomplete-chips>
+		<paper-icon-button 
+			icon="event"
+			disabled$="[[readOnly]]"
+			on-click="_openDateTimePicker"></paper-icon-button>
+		<puredat-timestamp store-date-format="[[storeDateFormat]]" store-timezone="[[storeTimezone]]" value="{{activeValue}}"></puredat-timestamp>
+	</template>
+
+	<script>
+		Polymer({
+			is: 'puredat-timestamp-many',
+
+			properties: {
+		        /** Name. */
+				name: {
+					type: String
+				},
+
+				/** Descriptive label. */
+				label: {
+					type: String
+				},
+
+				/** Value. */
+				value: {
+					type: Array,
+					observer: '_valueChanged',
+					value: function(){
+						return [];
+					}
+				},
+
+				/** Error message. */
+				errorMessage: {
+					type: String
+				},
+
+				/** Number of columns in a row of 10 columns. */
+				cols: {
+					type: Number,
+					value: 5
+				},
+
+				/** Read only. */
+				readOnly: {
+					type: Boolean,
+					value: false
+				},
+
+				/** Allowed pattern. For example: [a-zA-Z]. */
+				pattern: {
+					type: String
+				},
+
+				storeDateFormat: {
+					type: String,
+					value: "YYYY-MM-DD HH:mm:ss.SSSZZ"
+				},
+
+				displayDateFormat: {
+					type: String,
+					value: "DD/MM/YYYY HH:mm:ss.SSSZZ"
+				},
+
+				dateTimePicker: {
+					type: Object,
+					value: function(){
+						return {};
+					}
+				},
+
+				activeValue: {
+					type: String,
+					observer: '_activeValueChanged'
+				},
+
+				selecting: {
+					type: Boolean,
+					value: false
+				}
+		    },
+
+		    ready(){
+		    	this.dateTimePicker = this.querySelector("puredat-timestamp");
+		    	this.chipElement = this.querySelector("paper-input-autocomplete-chips");
+		    	this.activeValue = this._getDefaultValue();
+		    },
+
+		    _getDefaultValue: function(){
+		    	var tmp = new Date();
+		    	var year = tmp.getFullYear();
+		    	var month = (tmp.getMonth()+1 < 10 ? "0"+(tmp.getMonth()+1) : tmp.getMonth()+1);
+		    	var day = (tmp.getDate() < 10 ? "0"+tmp.getDate() : tmp.getDate());
+		    	var hours = (tmp.getHours() < 10 ? "0"+tmp.getHours() : tmp.getHours());
+		    	var minutes = (tmp.getMinutes() < 10 ? "0"+tmp.getMinutes() : tmp.getMinutes());
+		    	var seconds = (tmp.getSeconds() < 10 ? "0"+tmp.getSeconds() : tmp.getSeconds());
+
+		    	return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+		    },
+
+		     /**
+			 * Returns if the field is valid.
+			 * @param {String} errorMessage The error message.
+			 * @return {Boolean} If the input field is valid.
+			 */
+			_isInvalid: function(errorMessage) {
+				return errorMessage != null
+						&& errorMessage != "";
+			},
+
+			_openDateTimePicker: function(){
+				this.dateTimePicker.$.dialog.toggle();
+			},
+
+			_activeValueChanged: function(value){
+				if(this.selecting) return;
+
+				if(this.chipElement && value){
+					this.selecting = true;
+
+					var newValue = [];
+					this.chipElement.appendSelectedObject({text:value});
+					for(var i = 0;i < this.value.length;i++) newValue.push(this.value[i]);
+					newValue.push(value);
+					this.set("value",newValue);
+					this.activeValue = "";
+
+					this.selecting = false;
+				}
+			},
+
+			_selectedChanged: function(event){
+				if(this.selecting) return;
+
+				if(event.srcElement || event.target){
+					var src = event.srcElement || event.target;
+					if(src.selectedObjects){
+						this.selecting = true;
+						var newValue = [];
+						for(var i = 0;i < src.selectedObjects.length;i++){
+							newValue.push(src.selectedObjects[i].text);
+						}
+						this.set("value",newValue);
+						this.selecting = false;
+					}
+				}
+			},
+
+			_valueChanged: function(value){
+				if(this.selecting) return;
+
+				if(value && value.length > 0 && this.chipElement){
+					this.selecting = true;
+					this.chipElement.selectedObjects = [];
+					for(var i = 0;i < value.length;i++) this.chipElement.appendSelectedObject({text:value[i]});
+					this.selecting = false;
+				}
+			}
+
+		});
+	</script>
+</dom-module>