added export to ics

Le0Michine · Feb 14, 2017 · 783d49e · 783d49e
1 parent f2a6cf1
commit 783d49e
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "history": "^4.4.0",
     "material-design-icons": "^3.0.1",
     "moment": "^2.17.1",
-    "moment-duration-format": "^1.3.0",
     "moment-timezone": "^0.5.11",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
@@ -33,7 +32,6 @@
   },
   "devDependencies": {
     "@types/chrome": "0.0.39",
-    "@types/moment-duration-format": "^1.3.1",
     "@types/moment-timezone": "^0.2.34",
     "@types/react": "^15.0.7",
     "@types/react-dom": "^0.14.23",

diff --git a/src/app.common/models/CalendarEvent.ts b/src/app.common/models/CalendarEvent.ts
@@ -0,0 +1,30 @@
+import * as moment from "moment";
+import "moment-timezone";
+
+import { TimeSpanInfo } from "./TimeSpanInfo";
+
+export class CalendarEvent {
+  static toCalendarEvent(timeSpan: TimeSpanInfo) {
+    const startTime = moment().hours(timeSpan.startHour).minutes(timeSpan.startMinute);
+    const endTime = moment().hours(timeSpan.endHour).minutes(timeSpan.endMinute);
+    const location = moment().tz();
+    const mail = "me@gmail.com";
+    var icsMSG =
+      `BEGIN:VCALENDAR` +
+      `VERSION:2.0\n` +
+      `PRODID:-//Worldtime//NONSGML v1.0//EN` +
+      `BEGIN:VEVENT` +
+      `UID:${mail}` +
+      `DTSTAMP:${moment().format()}` +
+      `ATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:${mail}` +
+      `ORGANIZER;CN=Me:MAILTO::${mail}` +
+      `DTSTART:${startTime.format()}` +
+      `DTEND:${endTime.format()}` +
+      `LOCATION:${location}` +
+      `SUMMARY:Our Meeting Office` +
+      `END:VEVENT` +
+      `END:VCALENDAR`;
+
+     window.open(`data:text/calendar;charset=utf8,${encodeURI(icsMSG)}`);
+  }
+}
diff --git a/src/app.common/models/index.ts b/src/app.common/models/index.ts
@@ -1,3 +1,4 @@
 export * from "./TimeSpanInfo";
 export * from "./TimeZoneInfo";
-export * from "./DisplaySettingsInfo";
+export * from "./DisplaySettingsInfo";
+export * from "./CalendarEvent";
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 import { connect, ActionCreator } from "react-redux";
 import * as moment from "moment";
-import "moment-duration-format";
 
 import { TimeLine, Clock, Range, Input, TimeSelector } from "../../app.common/components";
 import { changeSelectedTimeSpan } from "../../app.common/actions";
-import { TimeZoneInfo, getOffset, getRelativeOffset, getHoursWithOffset, DisplaySettingsInfo, TimeSpanInfo } from "../../app.common/models";
+import { TimeZoneInfo, getOffset, getRelativeOffset, getHoursWithOffset, DisplaySettingsInfo, TimeSpanInfo, CalendarEvent } from "../../app.common/models";
 import { AppState } from "../../app.common/store";
 const style = require("./Layout.css");
 
@@ -39,7 +38,8 @@ export class Layout extends React.Component<LayoutProps, any> {
     if (selectedTimeSpan.endHour === 24) {
       endTime.add({ days: 1 })
     }
-    const duration = moment.duration((selectedTimeSpan.endHour - selectedTimeSpan.startHour) * 60 + (selectedTimeSpan.endMinute - selectedTimeSpan.startMinute), "minutes") as any;
+    const duration = moment.duration((selectedTimeSpan.endHour - selectedTimeSpan.startHour) * 60 + (selectedTimeSpan.endMinute - selectedTimeSpan.startMinute), "minutes");
+    const buttonDisabled = false;
     return (
       <div>
         <div className={style.app}>
@@ -61,7 +61,7 @@ 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.format("HH:mm")})</span>
+            <span>{startTime.format("HH:mm")} - {endTime.format("HH:mm")} ({duration.as("hours")})</span>
             {/*<div className={style.timeSpanSelectorInput}>
               <Input placeholder="hh" />
             </div><span> : </span>
@@ -74,6 +74,12 @@ export class Layout extends React.Component<LayoutProps, any> {
             <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)}
+              >Export ot .ics</button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Worldtime",
     "description": "All time zones in one click",
-    "version": "0.1.279",
+    "version": "0.1.282",
     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
     "options_page": "options.html",
     "browser_action": {

diff --git a/src/material.css b/src/material.css
@@ -127,4 +127,164 @@
 .input-container.input-container-invalid .input-invalid-error-message {
     visibility: visible;
     color: rgb(221,44,0);
-}
+}
+
+.btn-material {
+    margin: 14px 0;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    border-radius: 0;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    min-height: 36px;
+    min-width: 88px;
+    line-height: 36px;
+    vertical-align: middle;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    text-align: center;
+    border-radius: 2px;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    border: 0;
+    padding: 0 6px;
+    background: transparent;
+    background-color: rgb(16,108,200);
+    color: currentColor;
+    color: white;
+    white-space: nowrap;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 14px;
+    font-style: inherit;
+    font-variant: inherit;
+    font-family: inherit;
+    text-decoration: none;
+    overflow: hidden;
+    -webkit-transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+}
+
+.btn-material-edit {
+    background-color: rgb(255,87,34);
+}
+
+.btn-material.disabled {
+    background-color: rgba(0,0,0,0.12);
+    color: rgba(0,0,0,0.38);
+    cursor: default;
+    pointer-events: none;
+}
+
+.btn-material:hover {
+    background-color: rgba(0,0,0,0.12) !important;
+    color: black;
+}
+
+.btn-icon {
+    color: rgb(16,108,200);
+    color: black;
+    background: transparent;
+    border: none;
+    outline: none;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+}
+
+.btn-icon:hover {
+    background-color: rgba(0,0,0,0.12) !important;
+    border-radius: 50%;
+}
+
+.btn-group {
+    transition: all .2s ;
+    opacity: 1;
+    margin-left: 10px;
+}
+
+.btn-group .disabled {
+    pointer-events: none;
+    color: rgba(0,0,0,0.12);
+}
+
+.btn-group-hidden {
+    /*visibility: hidden;*/
+    opacity: 0;
+    transition: opacity .1s ease-out;
+}
+
+.checkbox-material-container {
+    box-sizing: border-box;
+    display: inline-block;
+    margin-bottom: 16px;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: relative;
+    min-width: 20px;
+    min-height: 20px;
+    margin-left: 0;
+    margin-right: 16px;
+}
+
+.checkbox-material {
+    color: rgba(255,82,82,0.87);
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    box-sizing: border-box;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    left: 0;
+    right: auto;
+}
+
+.checkbox-material-icon {
+    border-color: rgba(0,0,0,0.54);
+    box-sizing: border-box;
+    -webkit-transition: .24s;
+    transition: .24s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 2px;
+}
+
+.checkbox-material-checked .checkbox-material-icon {
+    background-color: rgba(255,82,82,0.87);
+    border-color: rgba(255,82,82,0.87);
+}
+
+.checkbox-material-checked .checkbox-material-icon:after {
+    box-sizing: border-box;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    position: absolute;
+    left: 4.66667px;
+    top: .22222px;
+    display: table;
+    width: 6.66667px;
+    height: 13.33333px;
+    border-width: 2px;
+    border-style: solid;
+    border-top: 0;
+    border-left: 0;
+    content: "";
+    border-color: rgba(255,255,255,0.87);
+}