parent
dd1e32ba0b
commit
8a6d3c0f11
9 changed files with 191 additions and 13 deletions
@ -0,0 +1,27 @@ |
|||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.hero { |
||||||
|
background: #84DCCF; |
||||||
|
text-align: center; |
||||||
|
box-shadow: 0 0 7px #555; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
padding-top: 2.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.tagline { |
||||||
|
padding-bottom: 2.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
margin: auto; |
||||||
|
max-width: 800px; |
||||||
|
} |
||||||
|
|
||||||
|
.error { |
||||||
|
color: #cc0000; |
||||||
|
font-size: 2rem; |
||||||
|
} |
@ -0,0 +1,12 @@ |
|||||||
|
'use strict'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
export default class Error extends React.Component { |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
Error page. |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,52 @@ |
|||||||
|
'use strict'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
export default class NotifPage extends React.Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
|
||||||
|
this.state = { |
||||||
|
haveperm: false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
checkperm(permission) { |
||||||
|
if (permission === 'granted') { |
||||||
|
this.setState({haveperm: true}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render(){ |
||||||
|
let supported = ("Notification" in window); |
||||||
|
|
||||||
|
if (supported) { |
||||||
|
Notification.requestPermission(permission => { |
||||||
|
this.checkperm(permission); |
||||||
|
}.bind(this)); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<div className="row"> |
||||||
|
<div className="twelve columns"> |
||||||
|
<h4>Notification Page</h4> |
||||||
|
{ supported || <div className="error"><p> |
||||||
|
Error: This browser does not support desktop notifications :( |
||||||
|
</p></div>} |
||||||
|
{ !this.state.haveperm && supported && <div> |
||||||
|
<p> |
||||||
|
Please give this site permission to display notifications. |
||||||
|
</p> |
||||||
|
<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}> |
||||||
|
Check Again |
||||||
|
</a> |
||||||
|
</div>} |
||||||
|
{ this.state.haveperm && supported && <p> |
||||||
|
This page is now monitoring for notifications. |
||||||
|
</p>} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,37 @@ |
|||||||
|
'use strict'; |
||||||
|
import React from 'react'; |
||||||
|
import Home from './Home'; |
||||||
|
import NotifPage from './NotifPage'; |
||||||
|
import Error from './Error'; |
||||||
|
import Shortid from 'shortid'; |
||||||
|
|
||||||
|
export default class Site extends React.Component { |
||||||
|
render(){ |
||||||
|
let urlid = this.props.splat; |
||||||
|
let page = null; |
||||||
|
|
||||||
|
if (urlid == '') { |
||||||
|
page = <Home />; |
||||||
|
} |
||||||
|
else if (Shortid.isValid(urlid)) { |
||||||
|
page = <NotifPage urlid={urlid} />; |
||||||
|
} |
||||||
|
else { |
||||||
|
page = <Error />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className="hero"> |
||||||
|
<div className="title"> |
||||||
|
<h1>Notify</h1> |
||||||
|
</div> |
||||||
|
<div className="tagline"> |
||||||
|
Send a browser notification from your terminal. No installation. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{page} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue