From ca1ae8e96c70dbbae6b034dac391809c744c770a Mon Sep 17 00:00:00 2001
From: Leo <leomichine@gmail.com>
Date: Tue, 14 Feb 2017 09:58:02 +0100
Subject: [PATCH] added copy to clipboard

---
 src/app.common/models/CalendarEvent.ts | 13 +++++++-
 src/app/components/Layout.tsx          | 44 +++++++++++++++-----------
 src/index.css                          |  6 ++++
 src/manifest.json                      |  3 +-
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/app.common/models/CalendarEvent.ts b/src/app.common/models/CalendarEvent.ts
index 9720b99..ffc0e44 100644
--- a/src/app.common/models/CalendarEvent.ts
+++ b/src/app.common/models/CalendarEvent.ts
@@ -4,7 +4,7 @@ import "moment-timezone";
 import { TimeSpanInfo } from "./TimeSpanInfo";
 
 export class CalendarEvent {
-  static toCalendarEvent(timeSpan: TimeSpanInfo, location: string) {
+  static exportToICS(timeSpan: TimeSpanInfo, location: string) {
     const startTime = moment().hours(timeSpan.startHour).minutes(timeSpan.startMinute).seconds(0);
     const endTime = moment().hours(timeSpan.endHour).minutes(timeSpan.endMinute).seconds(0);
     const mail = "me@gmail.com";
@@ -33,4 +33,15 @@ export class CalendarEvent {
 
      window.open(`data:text/calendar;charset=utf8,${encodeURI(icsMSG)}`);
   }
+
+  static copyToClipboard(timeSpan: TimeSpanInfo, location: string) {
+    let copyFrom = document.createElement("textarea");
+    copyFrom.textContent = "copy content";
+    document.body.appendChild(copyFrom);
+    copyFrom.focus();
+    document.execCommand('SelectAll');
+    document.execCommand('Copy');
+    document.execCommand("copy");
+    document.body.removeChild(copyFrom);
+  }
 }
\ No newline at end of file
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
index 5791025..3d61e47 100644
--- a/src/app/components/Layout.tsx
+++ b/src/app/components/Layout.tsx
@@ -61,24 +61,32 @@ export class Layout extends React.Component<LayoutProps, any> {
             <Range rangeSize={48} valueMin={valueMin} valueMax={valueMax} onChange={({valueMin, valueMax}) => changeSelectedTimeSpan(valueMin, valueMax)} />
           </div>
           <div className={style.timeSpanSelector}>
-            <span>{startTime.format("HH:mm")} - {endTime.format("HH:mm")} ({duration.as("hours")})</span>
-            {/*<div className={style.timeSpanSelectorInput}>
-              <Input placeholder="hh" />
-            </div><span> : </span>
-            <div className={style.timeSpanSelectorInput}>
-              <Input placeholder="mm" />
-            </div><span> - </span>
-            <div className={style.timeSpanSelectorInput}>
-              <Input placeholder="hh" />
-            </div><span> : </span>
-            <div className={style.timeSpanSelectorInput}>
-              <Input placeholder="mm" />
-            </div>*/}
-            <div className="pull-right">
-              <button
-                className={`btn btn-default btn-material ${ buttonDisabled ? "disabled" : ""}`}
-                onClick={() => CalendarEvent.toCalendarEvent(selectedTimeSpan, timeLines[0].timeZoneId)}
-              >Export ot .ics</button>
+            <div className="bottom-panel-container">
+              <div className="">
+                <span>{startTime.format("HH:mm")} - {endTime.format("HH:mm")} ({duration.as("hours")})</span>
+              </div>
+              {/*<div className={style.timeSpanSelectorInput}>
+                <Input placeholder="hh" />
+              </div><span> : </span>
+              <div className={style.timeSpanSelectorInput}>
+                <Input placeholder="mm" />
+              </div><span> - </span>
+              <div className={style.timeSpanSelectorInput}>
+                <Input placeholder="hh" />
+              </div><span> : </span>
+              <div className={style.timeSpanSelectorInput}>
+                <Input placeholder="mm" />
+              </div>*/}
+              <div className="">
+                <button
+                  className={`btn btn-default btn-material ${ buttonDisabled ? "disabled" : ""}`}
+                  onClick={() => CalendarEvent.copyToClipboard(selectedTimeSpan, timeLines[0].timeZoneId)}
+                >Copy</button>
+                <button
+                  className={`btn btn-default btn-material ${ buttonDisabled ? "disabled" : ""}`}
+                  onClick={() => CalendarEvent.exportToICS(selectedTimeSpan, timeLines[0].timeZoneId)}
+                >Export ot .ics</button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/index.css b/src/index.css
index d7dc996..9c8baa8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,4 +26,10 @@ div#app.app-options {
     width: 850px;
     background-color: #fff;
     border: 1px solid #ccc;
+}
+
+.bottom-panel-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 8cd241d..b3738a8 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -20,6 +20,7 @@
         "storage",
         "management",
         "notifications",
-        "contextMenus"
+        "contextMenus",
+        "clipboardWrite"
     ]
 }
\ No newline at end of file