release 0.9.3

DamandeepS · May 14, 2018 · 7b995c3 · 7b995c3
1 parent 1eb8dc7
commit 7b995c3
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,59 @@
 # \<timeslot-picker\>
 
+## NOT YET PRODUCTION READY
 A polymer element for choosing timeslots. Timeslots can be variable.
 
-## Install the Polymer-CLI
-
-First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
-
-## Viewing Your Element
-
-```
-$ polymer serve
+The element can be used to display a slider with timeslots at 30 minutes interval. User can select a slot (Max 6 units).
+An overlay is shown as slider to select slots
+
+## Properties
+
+
+|Property|type|required|reflected|notify|description|
+|----|---|--|--|--|--|
+|occupency|Array|yes|false|false|Set of slots already booked |
+|chosen-start-time|String|no|true|true|Starting time slot value|
+|chosen-end-time|String|no|true|true|Ending time slot value|
+|chosen-units|Number|no|true|true|Number of slots chosen|
+
+
+
+### Occupency property must be an Array of meetings
+
+```javascript  
+    occupency: [{
+            meetingName: 'Sai\'s Meeting',
+            meetingId: 'bbcks',
+            meetingStartTime: '3:00 PM',
+            units: 4
+          },
+          {
+            meetingName: 'Ranveer\'s Meeting',
+            meetingId: 'wqqps',
+            meetingStartTime: '7:00 PM',
+            units: 2
+          },
+          {
+            meetingName: 'Daman\'s Meeting',
+            meetingId: 'kisoe',
+            meetingStartTime: '8:00 PM',
+            units: 1
+          }
+        ]
 ```
 
-## Running Tests
+## Styling
 
-```
-$ polymer test
-```
+|CSS variable|description|default|
+|-|-|-|
+|`--timeslot-unit-height`|Timeslot unit height|50px|
+|`--timeslot-unit-width`|Timeslot unit width|50px|
+|`--timeslot-available-bg`|Timeslot Available background color| #fff|
+|`--timeslot-unavailable-bg`|Timeslot Unvailable background color| #666|
+|`--timeslot-font-size`|Timeslot indicators and slots text size| 10px|
+
+Please note: Property with `notify: true` fires a _property_-changed event when the value is changed.
+    Example: *PropertyName* fires `property-name-changed` event on value change
 
-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.
+[npm]('https://www.npmjs.com/package/timeslot-picker')
+[github]('https://github.com/DamandeepS/timeslot-picker')
diff --git a/demo/index.html b/demo/index.html
@@ -17,6 +17,7 @@
         timeslot-picker {
           --timeslot-unit-width: 60px;
           --timeslot-unit-height: 60px;
+          --timeslot-font-size: 12px;
         }
       </style>
     </custom-style>

diff --git a/package.json b/package.json
@@ -2,12 +2,19 @@
   "name": "timeslot-picker",
   "description": "A polymer element for choosing timeslots. Timeslots can be variable.",
   "main": "timeslot-picker.js",
+  "version": "0.9.3",
   "dependencies": {
     "@polymer/polymer": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/iron-demo-helpers": "^3.0.0-pre.12",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.0"
+  },
+  "license" : "SEE LICENSE IN 'LICENSE'",
+  "author": "Damandeep Singh <mail@damandeepsingh.com> (https://github.com/DamandeepS)",
+  "repository" : {
+    "type" : "git",
+    "url" : "https://github.com/DamandeepS/timeslot-picker.git"
   }
 }
diff --git a/timeslot-overlay.js b/timeslot-overlay.js
@@ -19,6 +19,7 @@ class TimeslotOverlay extends PolymerElement {
           white-space: nowrap;
           position: relative;
           height: var(--timeslot-unit-height, 50px);
+          background: #fff5;
         }
 
         #units {
@@ -45,7 +46,7 @@ class TimeslotOverlay extends PolymerElement {
           text-align: center;
           line-height: var(--timeslot-unit-height, 50px);
           width: var(--timeslot-unit-width, 50px);
-          font-size: 10px;
+          font-size: var(--timeslot-font-size, 10px);
         }
 
         #min-time {
@@ -91,7 +92,7 @@ class TimeslotOverlay extends PolymerElement {
           top: calc( (var(--timeslot-unit-height, 50px) / 2) - 0.5px);
           position: absolute;
           bottom: calc( (var(--timeslot-unit-height, 50px) / 2) - 0.5px);
-          background: #666;
+          background: var(--timeslot-unavailable-bg, #666);
         }
 
         #range::-webkit-slider-thumb {
@@ -102,6 +103,7 @@ class TimeslotOverlay extends PolymerElement {
           border-radius: 50%;
           background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUyIDUyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MiA1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0yNiwwQzExLjY2NCwwLDAsMTEuNjYzLDAsMjZzMTEuNjY0LDI2LDI2LDI2czI2LTExLjY2MywyNi0yNlM0MC4zMzYsMCwyNiwweiBNMzguNSwyOEgyOHYxMWMwLDEuMTA0LTAuODk2LDItMiwycy0yLTAuODk2LTItMlYyOEgxMy41Yy0xLjEwNCwwLTItMC44OTYtMi0yczAuODk2LTIsMi0ySDI0VjE0YzAtMS4xMDQsMC44OTYtMiwyLTJzMiwwLjg5NiwyLDJ2MTBoMTAuNWMxLjEwNCwwLDIsMC44OTYsMiwyUzM5LjYwNCwyOCwzOC41LDI4eiIvPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==), #ffff;
           cursor: pointer;
+          fill: var(--timeslot-unavailable-bg, #666);
           -webkit-appearance: none;
           margin-top: 3px;
           position: relative;

diff --git a/timeslot-picker.js b/timeslot-picker.js
@@ -23,7 +23,7 @@ class TimeslotPicker extends PolymerElement {
         }
 
         #container {
-          width: calc(100% - var(--timeslot-unit-width, 50px) + 4px);
+          width: calc(100% - var(--timeslot-unit-width, 50px) - 4px);
           margin-left: calc(var(--timeslot-unit-width, 50px) / 2 + 2px);
           overflow-x: auto;
           white-space: nowrap;
@@ -59,6 +59,8 @@ class TimeslotPicker extends PolymerElement {
           border: 1px solid #999;
           position: absolute;
           text-align: center;
+          background: var(--timeslot-available-bg, #fff);
+          z-index: 2;
           cursor: pointer;
         }
 
@@ -67,7 +69,7 @@ class TimeslotPicker extends PolymerElement {
         }
 
         .scroll-btn.right {
-          right:0
+          right:0;
         }
       </style>
             <div class="scroll-btn left" on-click='scrollLeft'>&lt;</div>

diff --git a/timeslot-unit.js b/timeslot-unit.js
@@ -19,7 +19,7 @@ class TimeslotUnit extends PolymerElement {
           flex: 1 1;
           align-items: center;
           height: var(--timeslot-unit-height, 50px);
-          background: var(--available-bg, #fff);
+          background: var(--timeslot-available-bg, #fff);
           margin: 0 1px 0 0;
           align-self: flex-start;
           border: 1px solid #999;
@@ -28,7 +28,7 @@ class TimeslotUnit extends PolymerElement {
         }
 
         :host([booking-id]:not([booking-id=''])) {
-          background: var(--unavailable-bg, #666);
+          background: var(--timeslot-unavailable-bg, #666);
           color: #fff;
           cursor: default;
         }
@@ -44,7 +44,7 @@ class TimeslotUnit extends PolymerElement {
         }
 
         .container p.time {
-          font-size: 10px;
+          font-size: var(--timeslot-font-size, 10px);
           word-wrap: break-word;
           word-break: break-all;
         }