From 39fa0df39a8966b63b503cf0e1f7edcdf3e94780 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Sat, 25 Jun 2022 18:42:15 +0200
Subject: [PATCH] feat: personnalisation badge Cushion

---
 index.html         |   2 +-
 js/availability.js | 268 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 js/availability.js

diff --git a/index.html b/index.html
index 622192a..e3b8958 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,7 @@
         </footer>
 
         <link href="//static.cushionapp.com/availability.css" rel="stylesheet">
-        <script src="//static.cushionapp.com/availability.js" data-user="a7b562d5-a046-45c3-a399-3e832cfdfad9"></script>
+        <script src="js/availability.js" data-user="a7b562d5-a046-45c3-a399-3e832cfdfad9"></script>
         <!-- Begin Google Analytics -->
         <script>
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/js/availability.js b/js/availability.js
new file mode 100644
index 0000000..4a681d7
--- /dev/null
+++ b/js/availability.js
@@ -0,0 +1,268 @@
+// From https://github.com/cushion/availability.js/blob/master/availability.js
+
+"use strict";
+
+
+// Constants
+// ===============================================
+
+var MONTH = 2628000000 // as seconds
+var BASE_URL = 'https://my.cushionapp.com'
+var AVAILABLE = 'available'
+var UNAVAILABLE = 'unavailable'
+var SOON = 'soon'
+var PRIVATE = 'private'
+
+
+
+// Availability object
+// ===============================================
+
+var Availability = function () {
+  this.user = {}
+  this.date = null
+  this.hours = 0
+  this.availability = UNAVAILABLE
+}
+
+Availability.prototype.isAvailable = function () { return AVAILABLE === this.availability }
+Availability.prototype.isUnavailable = function () { return UNAVAILABLE === this.availability }
+Availability.prototype.isSoon = function () { return SOON === this.availability }
+Availability.prototype.isPrivate = function () { return PRIVATE === this.availability }
+
+Availability.prototype.monthShort = function () {
+  if (!this.date) return
+  switch (this.date.getMonth()) {
+    case 0:  return 'Jan'
+    case 1:  return 'Fév'
+    case 2:  return 'Mars'
+    case 3:  return 'Avril'
+    case 4:  return 'Mai'
+    case 5:  return 'Juin'
+    case 6:  return 'Juil'
+    case 7:  return 'Août'
+    case 8:  return 'Sept'
+    case 9:  return 'Oct'
+    case 10: return 'Nov'
+    case 11: return 'Déc'
+  }
+}
+
+Availability.prototype.month = function () {
+  if (!this.date) return
+  switch (this.date.getMonth()) {
+    case 0:  return 'January'
+    case 1:  return 'February'
+    case 2:  return 'March'
+    case 3:  return 'April'
+    case 4:  return 'May'
+    case 5:  return 'June'
+    case 6:  return 'July'
+    case 7:  return 'August'
+    case 8:  return 'September'
+    case 9:  return 'October'
+    case 10: return 'November'
+    case 11: return 'December'
+  }
+}
+
+Availability.prototype.referralUrl = function () {
+  if (this.user && this.user.referral_code) {
+    return 'http://get.cushionapp.com/' + this.user.referral_code
+  }
+}
+
+
+
+// Main display function
+// ===============================================
+
+function display (options) {
+  if (!options.user) return console.error('Must specify a user')
+  if (!options.render) return console.error('Must specify a render function')
+
+  var availability = new Availability()
+
+  // AJAX Request
+  var xhr = new XMLHttpRequest()
+  xhr.addEventListener('load', onLoad(availability, options.render))
+  xhr.open('GET', BASE_URL + '/api/v1/users/' + options.user + '/availability')
+  xhr.send()
+
+  return availability
+}
+
+function onLoad (availability, render) {
+  return function () {
+    switch (this.status) {
+      default: return console.error('Cushion API Error', this.status)
+      case 404: return console.error('That user ID wasnt found')
+      case 401:
+        console.error('Enable the Availability Badge: ' + BASE_URL + '/add-ons/availability-badge')
+        availability.availability = PRIVATE
+        break
+      case 200:
+        var data = JSON.parse(this.response)
+        if (data.user) availability.user = data.user
+        if (data.availability) {
+          availability.date = parseDate(data.availability.available_on)
+          availability.hours = data.availability.hours_per_week
+          availability.availability = determineAvailability(availability.date)
+        }
+        break
+    }
+    return render.call(availability)
+  }
+}
+
+
+// Helpers
+// ===============================================
+
+function parseDate (date) {
+  date = date.split('-')
+
+  var year = parseInt(date[0])
+  var month = parseInt(date[1]) - 1
+  var day = parseInt(date[2])
+
+  return new Date(year, month, day)
+}
+
+function determineAvailability (date) {
+  var diff = date - Date.now()
+  if (date && diff < MONTH) return AVAILABLE
+  if (date && diff < (10 * MONTH)) return SOON
+  return UNAVAILABLE
+}
+
+function element (tag) {
+  var attrs = Array.prototype.slice.call(arguments, 1)
+  var element = document.createElement(tag)
+  if (attrs.length > 0) {
+    attrs.unshift(element)
+    setAttributes.apply(this, attrs)
+  }
+  return element
+}
+
+function append (parent, child) {
+  parent.appendChild(child)
+  return parent
+}
+
+function setAttributes (el) {
+  var attrs = Array.apply(null, arguments).slice(1)
+  for (var i = attrs.length - 1; i >= 0; i--) {
+    if (attrs[i].length === 3) {
+      el.setAttributeNS.apply(el, attrs[i])
+    } else {
+      el.setAttribute.apply(el, attrs[i])
+    }
+  }
+  return el
+}
+
+
+
+// Ribbon display
+// ===============================================
+
+function ribbon (options) {
+  var container = options.container || document.body
+  var href = options.href
+
+  function relative () {
+    switch (this.availability) {
+      case AVAILABLE: return 'Disponible'
+      case SOON: return 'Disponible dans ' + this.monthShort()
+      case UNAVAILABLE: return 'Actuellement en mission'
+      case PRIVATE: return 'Erreur'
+    }
+  }
+
+  function render () {
+    if (href === undefined) href = '#'
+
+    var wrapper = element('div',
+      ['class', 'availability-ribbon ' + this.availability]
+    )
+
+    var banner = element(href ? 'a' : 'div',
+      ['href', href],
+      ['target', '_blank'],
+      ['class', 'availability-ribbon__banner']
+    )
+    append(wrapper, banner)
+
+    var availability = element('span', ['class', 'availability-ribbon__text'])
+    availability.textContent = relative.call(this)
+    append(banner, availability)
+
+    var powered = element('div', ['class', 'availability-ribbon__power'])
+    powered.textContent = 'powered by Cushion'
+    append(wrapper, powered)
+
+    append(container, wrapper)
+  }
+
+  options.render = render
+
+  return display(options)
+}
+
+
+// Contextual Badge display
+// ===============================================
+
+function badge (options) {
+  var container = options.container
+  var href = options.href
+
+  function relative () {
+    switch (this.availability) {
+      case AVAILABLE: return 'available'
+      case SOON: return 'booked until ' + this.month()
+      case UNAVAILABLE: return 'unavailable'
+      case PRIVATE: return 'error'
+    }
+  }
+
+  options.render = function () {
+    if (href === undefined) href = this.referralUrl()
+
+    var badge = element(href ? 'a' : 'span',
+      ['class', 'availability-badge ' + this.availability]
+    )
+
+    if (href) {
+      badge.href = href
+      badge.target = '_blank'
+    }
+    badge.textContent = relative.call(this)
+
+    append(container, badge)
+  }
+
+  return display(options)
+}
+
+
+
+// Exports
+// ===============================================
+
+if (typeof window !== 'undefined') {
+  // If we're running in the browser set up automatically
+  document.addEventListener('DOMContentLoaded', function () {
+    var el = document.querySelector('script[data-user]')
+    if (!el) return
+    var user = el.getAttribute('data-user')
+    var badgeEl = document.querySelector('[data-availability-badge]')
+    if (badgeEl) {
+      badge({ user: user, container: badgeEl })
+    } else {
+      ribbon({ user: user })
+    }
+  })
+}