From 0aa10d86cd3634c0adb37d65eba61afd9adc078b Mon Sep 17 00:00:00 2001
From: FreneticScribbler <aj@aronajones.com>
Date: Sun, 15 Nov 2020 16:53:11 +0000
Subject: [PATCH] Improvements to profile detail page

---
 RIGS/static/js/clipboard.min.js     |  7 +++
 gulpfile.js                         |  1 +
 package.json                        |  1 +
 users/templates/profile_detail.html | 66 +++++++++++++++++------------
 users/views.py                      |  5 +++
 5 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 RIGS/static/js/clipboard.min.js

diff --git a/RIGS/static/js/clipboard.min.js b/RIGS/static/js/clipboard.min.js
new file mode 100644
index 00000000..2d408a01
--- /dev/null
+++ b/RIGS/static/js/clipboard.min.js
@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v2.0.6
+ * https://clipboardjs.com/
+ * 
+ * Licensed MIT © Zeno Rocha
+ */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,(function(){return n={},t.m=e=[function(t,e){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),r=document.createRange();r.selectNodeContents(t),o.removeAllRanges(),o.addRange(r),e=o.toString()}return e}},function(t,e){function n(){}n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)}return r._=e,this.on(t,r,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;o<r;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,a=o.length;i<a;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},t.exports=n,t.exports.TinyEmitter=n},function(t,e,n){var o=n(3),r=n(4);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!o.string(e))throw new TypeError("Second argument must be a String");if(!o.fn(n))throw new TypeError("Third argument must be a Function");if(o.node(t))return d=e,h=n,(f=t).addEventListener(d,h),{destroy:function(){f.removeEventListener(d,h)}};if(o.nodeList(t))return l=t,u=e,s=n,Array.prototype.forEach.call(l,(function(t){t.addEventListener(u,s)})),{destroy:function(){Array.prototype.forEach.call(l,(function(t){t.removeEventListener(u,s)}))}};if(o.string(t))return i=t,a=e,c=n,r(document.body,i,a,c);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");var i,a,c,l,u,s,f,d,h}},function(t,e){e.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},e.nodeList=function(t){var n=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===n||"[object HTMLCollection]"===n)&&"length"in t&&(0===t.length||e.node(t[0]))},e.string=function(t){return"string"==typeof t||t instanceof String},e.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},function(t,e,n){var o=n(5);function r(t,e,n,r,i){var a=function(t,e,n,r){return function(n){n.delegateTarget=o(n.target,e),n.delegateTarget&&r.call(t,n)}}.apply(this,arguments);return t.addEventListener(n,a,i),{destroy:function(){t.removeEventListener(n,a,i)}}}t.exports=function(t,e,n,o,i){return"function"==typeof t.addEventListener?r.apply(null,arguments):"function"==typeof n?r.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,(function(t){return r(t,e,n,o,i)})))}},function(t,e){if("undefined"!=typeof Element&&!Element.prototype.matches){var n=Element.prototype;n.matches=n.matchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector||n.webkitMatchesSelector}t.exports=function(t,e){for(;t&&9!==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}},function(t,e,n){"use strict";n.r(e);var o=n(0),r=n.n(o),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};function a(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),this.resolveOptions(t),this.initSelection()}var l=(function(t,e,n){e&&a(t.prototype,e)}(c,[{key:"resolveOptions",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};this.action=e.action,this.container=e.container,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=r()(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=r()(this.target),this.copyText()}},{key:"copyText",value:function(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(t){var e=0<arguments.length&&void 0!==t?t:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":i(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),c),u=n(1),s=n.n(u),f=n(2),d=n.n(f),h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};function p(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var y=(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(m,s.a),function(t,e,n){e&&p(t.prototype,e),n&&p(t,n)}(m,[{key:"resolveOptions",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===h(e.container)?e.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=d()(t,"click",(function(t){return e.onClick(t)}))}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l({action:this.action(e),target:this.target(e),text:this.text(e),container:this.container,trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return v("action",t)}},{key:"defaultTarget",value:function(t){var e=v("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return v("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(t){var e=0<arguments.length&&void 0!==t?t:["copy","cut"],n="string"==typeof e?[e]:e,o=!!document.queryCommandSupported;return n.forEach((function(t){o=o&&!!document.queryCommandSupported(t)})),o}}]),m);function m(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,m);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(m.__proto__||Object.getPrototypeOf(m)).call(this));return n.resolveOptions(e),n.listenClick(t),n}function v(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}e.default=y}],t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(t){return e[t]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t.p="",t(t.s=6).default;function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e,n}));
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 8e2c907e..a999df60 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -48,6 +48,7 @@ function scripts() {
                     'node_modules/bootstrap/js/dist/modal.js',
                     'node_modules/bootstrap/js/dist/alert.js',
 
+                    'node_modules/clipboard/dist/clipboard.min.js',
                     'node_modules/flatpickr/dist/flatpickr.min.js',
                     'node_modules/@fortawesome/fontawesome-free/js/all.js',
                     'node_modules/moment/moment.js',
diff --git a/package.json b/package.json
index 05ec1826..643bb125 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "autoprefixer": "^9.8.0",
     "bootstrap": "^4.5.2",
     "bootstrap-select": "^1.13.17",
+    "clipboard": "^2.0.6",
     "dark-mode-switch": "^1.0.0",
     "flatpickr": "^4.6.6",
     "fullcalendar": "^5.3.2",
diff --git a/users/templates/profile_detail.html b/users/templates/profile_detail.html
index 2cf4de0a..c091641f 100644
--- a/users/templates/profile_detail.html
+++ b/users/templates/profile_detail.html
@@ -1,8 +1,12 @@
 {% extends request.is_ajax|yesno:"base_ajax.html,base_rigs.html" %}
 
-{% block title %}RIGS Profile {{object.pk}}{% endblock %}
+{% load static %}
+{% load linkornone from filters %}
 
 {% block js %}
+    <script src="{% static 'js/tooltip.js' %}"></script>
+    <script src="{% static 'js/popover.js' %}"></script>
+    <script src="{% static 'js/clipboard.min.js' %}"></script>
     <script>
         $(document).ready(function() {
         	$('#urlParamForm').change(function(){
@@ -25,18 +29,23 @@
 
 			$('#urlParamForm').change(); //Do the initial setting
      	});
- 	</script>
 
+        var clipboard = new ClipboardJS('.btn');
+
+        clipboard.on('success', function(e) {
+            $(e.trigger).popover('show');
+            window.setTimeout(function () {$(e.trigger).popover('hide')}, 3000);
+            e.clearSelection();
+        });
+ 	</script>
 {% endblock %}
 
 {% block content %}
-<h3>Profile: {{object.name}}</h3>
-{% if not request.is_ajax %}
+{% if not request.is_ajax and object.pk == user.pk %}
 <div class="row py-3">
-	{% if object.pk == user.pk %}
-	<div>
+	<div class="col text-right">
 	    <div class="btn-group">
-	        <a href="{% url 'profile_update_self' %}" class="btn btn-light">
+	        <a href="{% url 'profile_update_self' %}" class="btn btn-warning">
 				Edit Profile <i class="fas fa-edit"></i>
 			</a>
 			<a href="{% url 'password_change' %}" class="btn btn-light">
@@ -44,11 +53,10 @@
 			</a>
 	    </div>
 	</div>
-	{% endif %}
 </div>
 {% endif %}
 <div class="row">
-    <div class="col">
+    <div class="col-12">
         <div class="card">
             <div class="row no-gutters">
                 <div class="col-md-3">
@@ -76,7 +84,7 @@
 	                        <dd class="col-7">{{object.initials}}</dd>
 
 	                        <dt class="col-5">Phone</dt>
-	                        <dd class="col-7">{% if object.phone %}}<a href="tel:{{ object.phone }}">{% endif %}{{object.phone}}{% if object.phone %}}</a>{% endif %}</dd>
+	                        <dd class="col-7">{{object.phone|linkornone:'tel'}}</dd>
                         </dl>
                     </div>
                 </div>
@@ -84,44 +92,44 @@
         </div>
     </div>
     {% if not request.is_ajax and object.pk == user.pk %}
-    <div class="col">
+    <div class="col-12 my-2">
         <div class="card">
+            <div class="card-header">Personal iCal Details</div>
             <div class="card-body">
-		        <h4>Personal iCal Details</h4>
 		        <dl class="row">
 			        <dt class="col-4">API Key</dt>
-			        <dd class="col-5">
+			        <dd class="col-8">
 				        {% if user.api_key %}
-					        {{user.api_key}}
+					        <code id="api-key">{{user.api_key}}</code>
+                            <button class="btn btn-secondary align-middle" data-clipboard-target="#api-key" data-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
 				        {% else %}
 					        No API Key Generated
 				        {% endif %}
-			        </dd>
-                    <a href="{% url 'reset_api_key' %}" class="btn btn-secondary col-3">
+                        <a href="{% url 'reset_api_key' %}" class="btn btn-secondary align-middle">
 				        {% if user.api_key %}Reset API Key{% else %}Generate API Key{% endif %}
 				        <span class="fas fa-redo"></span>
-			        </a>
-
-			        <dt class="col-4">Calendar Options</dt>
+			            </a>
+			        </dd>
+   			        <dt class="col-4">Calendar Options</dt>
 			        <dd class="col-8">
 				        <form id="urlParamForm">
-					        <div class="form-group d-flex flex-wrap">
-						        <label class="checkbox-inline mr-3">
+					        <div class="form-group d-flex flex-column flex-lg-row">
+						        <label class="checkbox-inline mr-lg-2">
 						          <input type="checkbox" value="rig" data-default="true" checked> Rigs
 						        </label>
-						        <label class="checkbox-inline mx-3">
+						        <label class="checkbox-inline mx-lg-2">
 						          <input type="checkbox" value="non-rig" data-default="true" checked> Non-Rigs
 						        </label>
-						        <label class="checkbox-inline mx-3">
+						        <label class="checkbox-inline mx-lg-2">
 						          <input type="checkbox" value="dry-hire" data-default="true" checked> Dry-Hires
 						        </label>
-						        <label class="checkbox-inline mx-3">
+						        <label class="checkbox-inline mx-lg-2">
 						          <input type="checkbox" value="cancelled" data-default="false" > Cancelled
 						        </label>
-						        <label class="checkbox-inline mx-3">
+						        <label class="checkbox-inline mx-lg-2">
 						          <input type="checkbox" value="provisional" data-default="true" checked> Provisional
 						        </label>
-						        <label class="checkbox-inline mx-3">
+						        <label class="checkbox-inline ml-lg-2">
 						          <input type="checkbox" value="confirmed" data-default="true" checked> Confirmed/Booked
 						        </label>
 					        </div>
@@ -130,9 +138,11 @@
 			        <dt class="col-4">Calendar URL</dt>
 			        <dd class="col-8">
 				        {% if user.api_key %}
-					        <pre id="cal-url" data-url="http{{ request.is_secure|yesno:"s,"}}://{{ request.get_host }}{% url 'ics_calendar' api_pk=user.pk api_key=user.api_key %}"></pre>
+					        <code id="cal-url" data-url="http{{ request.is_secure|yesno:"s,"}}://{{ request.get_host }}{% url 'ics_calendar' api_pk=user.pk api_key=user.api_key %}"></code>
+                            <button class="btn btn-secondary align-middle" data-clipboard-target="#cal-url" data-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
+                            <br>
 					        <small><a id="gcal-link" data-url="https://support.google.com/calendar/answer/37100" href="">Click here</a> for instructions on adding to google calendar.<br/>
-					        To sync from google calendar to mobile device, visit <a href="https://www.google.com/calendar/syncselect" target="_blank">this page</a> on your device and tick "RIGS Calendar".</small>
+					        To sync from Google Calendar to mobile device, visit <a href="https://www.google.com/calendar/syncselect" target="_blank">this page</a> on your device and tick "RIGS Calendar".</small>
 				        {% else %}
 					        <pre>No API Key Generated</pre>
 				        {% endif %}
diff --git a/users/views.py b/users/views.py
index 067ab594..724b7ba7 100644
--- a/users/views.py
+++ b/users/views.py
@@ -53,6 +53,11 @@ class ProfileDetail(generic.DetailView):
 
         return self.model.objects.filter(pk=pk)
 
+    def get_context_data(self, **kwargs):
+        context = super(ProfileDetail, self).get_context_data(**kwargs)
+        context['page_title'] = "Profile: {}".format(self.object)
+        return context
+
 
 class ProfileUpdateSelf(generic.UpdateView):
     template_name = "profile_form.html"