Skip to content

Commit

Permalink
feat(dashboard): Add copy to clipboard button
Browse files Browse the repository at this point in the history
Add button to copy id values to clipboard

closes #288
  • Loading branch information
mpfeil committed Mar 6, 2019
1 parent 60a89b9 commit 284203e
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 9 deletions.
55 changes: 55 additions & 0 deletions app/components/clipboard.directive.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
(function () {
'use strict';

angular.module('openSenseMapApp').directive('osemClipboard', OsemClipboard);

OsemClipboard.$inject = ['$window'];
function OsemClipboard ($window) {
// Usage:
//
// Creates:
//
var directive = {
link: link,
restrict: 'A',
scope: {
text: '='
}
};

return directive;

function link (scope, element) {
element.on('click', function (event) {
// event.stopPropagation();
// event.preventDefault();

var textField = $window.document.createElement('textarea');
// Place in top-left corner of screen regardless of scroll position.
textField.style.position = 'fixed';
textField.style.top = '0';
textField.style.left = '0';
textField.style.width = '2em';
textField.style.height = '2em';
textField.style.padding = '0';
textField.style.border = 'none';
textField.style.outline = 'none';
textField.style.boxShadow = 'none';
textField.style.background = 'transparent';
textField.innerText = scope.text;
$window.document.body.appendChild(textField);

var range, selection;
range = $window.document.createRange();
range.selectNodeContents(textField);
selection = $window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textField.setSelectionRange(0, 999999);

$window.document.execCommand('copy');
$window.document.body.removeChild(textField);
});
}
}
})();
1 change: 1 addition & 0 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,7 @@
<script src="components/charts.directive.js"></script>
<script src="components/badge.directive.js"></script>
<script src="components/loader.directive.js"></script>
<script src="components/clipboard.directive.js"></script>
<script src="scripts/directives/autofocus.js"></script>
<script src="scripts/controllers/info.js"></script>
<script src="scripts/controllers/register.js"></script>
Expand Down
19 changes: 18 additions & 1 deletion app/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -1748,5 +1748,22 @@ svg .dot {

nav > a.active {
background: white;
color: rgba(0, 0, 0, .5)
color: rgba(0, 0, 0, 0.5);
}

.btn-toClipboard {
border: 0;
top: 0.5rem;
right: 0.5rem;
border-radius: 0.25rem;
background-color: transparent;
cursor: pointer;
color: #818a91;
padding: 0.25rem 0.5rem;
margin-left: 0.5rem;
}

.btn-toClipboard:hover {
color: #fff;
background-color: #4eaf47;
}
13 changes: 7 additions & 6 deletions app/views/account.box.edit.sensors.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ <h2 style="margin-top: 0px; margin-bottom: 0px">{{'EDIT_CHANGESENSORS'|translate
<div class="row">
<span class="sensor-details" ng-hide="sensor.editing || sensor.measurementsediting">
<strong style="display: block;">{{'CONFIG_PHENOMENON'|translate}}: {{ sensor.title }}</strong>
<strong>ID: </strong><code>{{sensor._id}}</code>
<strong>ID: </strong><code>{{sensor._id}}<button osem-clipboard class="btn-toClipboard" title="Copy to Clipboard" text="sensor._id">
<i class="fa fa-clipboard"></i></button></code>
<strong style="display: block;">{{'CONFIG_UNIT'|translate}}: {{sensor.unit}}</strong>
<strong style="display: block;">{{'CONFIG_TYPE'|translate}}: {{sensor.sensorType}}</strong>
</span>
Expand All @@ -63,7 +64,7 @@ <h2 style="margin-top: 0px; margin-bottom: 0px">{{'EDIT_CHANGESENSORS'|translate
</uib-tab-heading>
<div class="row">
<div class="col-lg-11 col-md-11" style="margin-top: 25px;">
<div uib-alert class="alert-warning">
<div uib-alert class="alert-warning">
{{"SENSOR_DELETE_TIMEFRAME_DESCRIPTION"|translate}}
</div>
</div>
Expand Down Expand Up @@ -134,7 +135,7 @@ <h3 class="panel-title">{{"SENSOR_DELETE_ALL_MEASUREMENTS"|translate}}</h3>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<span class="sensor-details" style="height: 90px;" ng-hide="sensor.editing || sensor.measurementsediting">

<span style="background-color:#d9534f;color:white" ng-show="sensor.deleted">{{'EDIT_CHANGESENSORS_DELETE_SENSOR'|translate}}</span>

<button type="button" class="btn btn-xs btn-primary" style="display: block;" ng-click="sensors.undo(sensor)" ng-show="sensor.deleted">
Expand All @@ -144,16 +145,16 @@ <h3 class="panel-title">{{"SENSOR_DELETE_ALL_MEASUREMENTS"|translate}}</h3>
<button type="button" class="btn btn-xs btn-primary" style="display: block;" ng-click="sensors.editSensor(sensor)" ng-hide="sensor.editing || sensor.measurementsediting || sensor.deleted">
<span class="glyphicon glyphicon-edit"></span> {{'EDIT'|translate}}
</button>

<button type="button" class="btn btn-xs btn-success" style="display: block;" ng-click="sensors.editMeasurements(sensor)" ng-hide="sensor.editing || sensor.measurementsediting || sensor.deleted">
<span class="glyphicon glyphicon-trash"></span> {{"MEASUREMENTS"|translate}}
</button>

<button type="button" class="btn btn-xs btn-danger" style="display: block;" ng-click="sensors.deleteSensor(sensor)" ng-hide="sensor.editing || sensor.measurementsediting || sensor.deleted">
<span class="glyphicon glyphicon-trash"></span> {{'DELETE'|translate}}
</button>
</button>
</span>

<span class="sensor-details" style="height: 222px;" ng-show="sensor.editing">
<span style="background-color:#d9534f;color:white" ng-show="sensorSettings.$invalid">{{'FORM_INVALID'|translate}}</span>
<button type="button" class="btn btn-xs btn-primary" style="display: block;" ng-click="sensors.saveSensor(sensor)" ng-disabled="sensorSettings.$invalid">
Expand Down
5 changes: 3 additions & 2 deletions app/views/account.dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h3 translate="REGISTERED_BOXES" translate-values="{count: dashboard.boxes.lengt
<div class="model"><span>{{'BOX_EXPOSURE' | translate}} - {{box.exposure}}</span></div>
<div class="model">{{'BOX_MODEL' | translate}} - {{box.model}}</div>
<br>
<div class="model">senseBox ID - <code>{{box._id}}</code></div>
<div class="model">senseBox ID - <code>{{box._id}} <button osem-clipboard class="btn-toClipboard" text="box._id" title="Copy to Clipboard"><i class="fa fa-clipboard"></i></button></code></div>
<div class="model" ng-if="box.model == 'hackair_home_v2'">access token - <code>{{box.access_token}}</code></div>
</div>

Expand Down Expand Up @@ -101,7 +101,8 @@ <h1>Support</h1>
<div class="dashboard-list-item dashboard-list-item-circle" ng-style="{ 'background': box.markerOptions.color.hex }"></div>
<h4 class="list-group-item-heading name dashboard-list-item">{{'BOX_NAME' | translate}}: {{box.name}}</h4>
<p class="list-group-item-text model dashboard-list-item">{{'BOX_EXPOSURE' | translate}}: {{box.exposure}},
{{'BOX_MODEL' | translate}}: {{box.model}}, senseBox ID - <code>{{box._id}}</code><span ng-if="box.model == 'hackair_home_v2'">,
{{'BOX_MODEL' | translate}}: {{box.model}}, senseBox ID - <code>{{box._id}} <button osem-clipboard class="btn-toClipboard" text="box._id" title="Copy to Clipboard"><i
class="fa fa-clipboard"></i></button></code><span ng-if="box.model == 'hackair_home_v2'">,
access token - <code>{{box.access_token}}</code></span></p>
<div class="btn-group dashboard-list-item pull-right" role="group" aria-label="...">
<button type="button" class="btn btn-default" ui-sref="explore.map.sidebar.boxdetails({id: box._id})">
Expand Down

0 comments on commit 284203e

Please sign in to comment.