diff --git a/components/21-atoms/openinghours/README.md b/components/21-atoms/openinghours/README.md
new file mode 100644
index 0000000..cb62055
--- /dev/null
+++ b/components/21-atoms/openinghours/README.md
@@ -0,0 +1 @@
+Currently in Alpha since Openinghours isn't in production yet.
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours--month.twig b/components/21-atoms/openinghours/openinghours--month.twig
new file mode 100644
index 0000000..e26c505
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours--month.twig
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours--week.twig b/components/21-atoms/openinghours/openinghours--week.twig
new file mode 100644
index 0000000..d951b12
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours--week.twig
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours.config.json b/components/21-atoms/openinghours/openinghours.config.json
new file mode 100644
index 0000000..326bea3
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.config.json
@@ -0,0 +1,21 @@
+{
+ "title": "Openinghours",
+ "name": "openinghours",
+ "status": "alpha",
+ "handle": "openinghours",
+ "default": "open-now",
+ "variants": [
+ {
+ "name": "open-now",
+ "title": "Open now"
+ },
+ {
+ "name": "week",
+ "title": "Open now"
+ },
+ {
+ "name": "month",
+ "title": "Open now"
+ }
+ ]
+}
diff --git a/components/21-atoms/openinghours/openinghours.js b/components/21-atoms/openinghours/openinghours.js
new file mode 100644
index 0000000..254dbe8
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.js
@@ -0,0 +1,98 @@
+window.openingHours = (function () {
+ 'use strict';
+
+ var defaults = {
+ endpoint: 'https://openingsuren.gentgrp.gent.be'
+ };
+
+ function OpeningHours(items, options) {
+ this.s = Object.assign({}, defaults, options);
+ this.items = items;
+
+ for (var i = 0; i < items.length; i++) {
+ this._current = items[i];
+ this.init(items[i]);
+ }
+
+ return this;
+ }
+
+ OpeningHours.prototype.init = function () {
+ if (isNaN(this._current.dataset.service) || isNaN(this._current.dataset.channel)) {
+ this._current.innerHTML = 'Error: Please provide a service and channel.';
+ return false;
+ }
+
+ if (typeof this._current.dataset.date === 'string' && this._current.dataset.type === 'open-now') {
+ this._current.innerHTML = 'Error: Date is not supported in the "open now" widget.';
+ return false;
+ }
+
+ if (typeof this._current.dataset.date === 'undefined') {
+ this._current.dataset.date = new Date().toUTCString();
+ }
+
+ var url = this.constructRequest();
+ this.request(url, this.print);
+ };
+
+ OpeningHours.prototype.formattedDate = function (d) {
+ var date;
+ if (!d) {
+ date = new Date();
+ }
+ else {
+ date = new Date(d);
+ }
+
+ return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+ };
+
+ OpeningHours.prototype.constructRequest = function () {
+ switch (this._current.dataset.type) {
+ case 'open-now':
+ return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/open-now';
+ case 'month':
+ return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/openinghours/month?date=' + this.formattedDate(this._current.dataset.date);
+ default:
+ var until = new Date(this._current.dataset.date);
+ until.setDate(until.getDate() + 6);
+ return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/openinghours?from=' + this.formattedDate(this._current.dataset.date) + '&until=' + this.formattedDate(until);
+ }
+ };
+
+ OpeningHours.prototype.request = function (url, callback) {
+ var xmlhttp;
+ xmlhttp = new XMLHttpRequest();
+ xmlhttp.element = this._current;
+ xmlhttp.onreadystatechange = function () {
+ if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+ callback(xmlhttp.element, xmlhttp.responseText);
+ }
+ };
+ xmlhttp.open('GET', url, true);
+ xmlhttp.setRequestHeader('Accept', 'text/html');
+ xmlhttp.send();
+ };
+
+ OpeningHours.prototype.print = function (element, data) {
+ element.innerHTML = data;
+ };
+
+ var openinghours = {
+ load: function (options) {
+ var items = document.querySelectorAll('.openinghours');
+ new OpeningHours(items, options);
+ }
+ };
+
+ return openinghours;
+}());
+
+document.onreadystatechange = function () {
+ 'use strict';
+
+ if (document.readyState === 'interactive') {
+ window.openingHours.load();
+ }
+};
diff --git a/components/21-atoms/openinghours/openinghours.twig b/components/21-atoms/openinghours/openinghours.twig
new file mode 100644
index 0000000..98e9ea5
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.twig
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/_preview.twig b/components/_preview.twig
index eb5a244..a3130a9 100644
--- a/components/_preview.twig
+++ b/components/_preview.twig
@@ -2,52 +2,53 @@
-
- {% block title %}Preview Layout{% endblock %}
+
+ {% block title %}Preview Layout{% endblock %}
-
-
-
-
-
+
+
+
+
+
-
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
diff --git a/gulpfile.js b/gulpfile.js
index e2985c0..37bc515 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -37,6 +37,11 @@ fractal.components.set('statuses', {
description: "Deprecated.",
color: "#dd5e01"
},
+ alpha: {
+ label: "alpha",
+ description: "Alpha software can be unstable and could cause crashes or data loss.",
+ color: "#551A8B"
+ },
beta: {
label: "beta",
description: "Work in progress. Implement with caution.",