parent
59ad62e2af
commit
86f23ed1a4
8 changed files with 246 additions and 270 deletions
@ -1,33 +0,0 @@ |
||||
import React from 'react'; |
||||
import Router, { RouteHandler } from 'react-router'; |
||||
|
||||
class App extends React.Component { |
||||
constructor( props, context ) { |
||||
super(); |
||||
this.publishRouter( context.router ); |
||||
} |
||||
render() { |
||||
let params = this.context.router.getCurrentParams(); |
||||
return ( |
||||
<RouteHandler {...params} /> |
||||
); |
||||
} |
||||
publishRouter( router ){ |
||||
var routes = {}; |
||||
|
||||
// Use route names as constants
|
||||
router.routes[0].childRoutes.forEach( function( r ){ |
||||
routes[ r.name ] = r.path; |
||||
}); |
||||
|
||||
// Render the router accessible without contexts
|
||||
Router.currentRouter = router; |
||||
Router.routes = routes; |
||||
} |
||||
} |
||||
|
||||
App.contextTypes = { |
||||
router: React.PropTypes.func |
||||
}; |
||||
|
||||
export default App; |
||||
@ -1,10 +1,9 @@ |
||||
import React from 'react'; |
||||
import Router from 'react-router'; |
||||
import routes from './routes'; |
||||
import React from 'react' |
||||
import { Router, Route, browserHistory } from 'react-router' |
||||
import Site from './ui/Site'; |
||||
|
||||
Router.run( routes, Router.HistoryLocation, function( Handler ){ |
||||
React.render( |
||||
React.createElement( Handler ), |
||||
document.getElementById('root') |
||||
); |
||||
}); |
||||
React.render(( |
||||
<Router history={browserHistory}> |
||||
<Route path="/*" component={Site} /> |
||||
</Router> |
||||
), document.getElementById('root')) |
||||
|
||||
@ -1,13 +0,0 @@ |
||||
'use strict'; |
||||
import React from 'react'; |
||||
import Router, {Route, NotFoundRoute, DefaultRoute} from 'react-router'; |
||||
import App from './App'; |
||||
import Site from './ui/Site'; |
||||
|
||||
var routes = ( |
||||
<Route name="app" path="/*" handler={ App } > |
||||
<DefaultRoute name="site" handler={ Site } /> |
||||
</Route> |
||||
); |
||||
|
||||
export default routes; |
||||
@ -1,189 +0,0 @@ |
||||
'use strict'; |
||||
import React from 'react'; |
||||
import io from 'socket.io-client'; |
||||
import { Router, Route, Link } from 'react-router'; |
||||
import QRCode from 'qrcode.react'; |
||||
|
||||
export default class NotifPage extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
supported: false, |
||||
registration: null, |
||||
haveperm: false, |
||||
connected: false, |
||||
socket: io.connect() |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.connect(); |
||||
this.checksupport(); |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
this.setState({socket: this.state.socket.removeAllListeners()}); |
||||
} |
||||
|
||||
connect() { |
||||
let socket = this.state.socket; |
||||
|
||||
let room = this.props.urlid; |
||||
|
||||
socket.on('connect', () => { |
||||
socket.emit('room', room); |
||||
this.setState({connected: true}); |
||||
|
||||
socket.on('disconnect', () => { |
||||
this.setState({connected: false}); |
||||
}); |
||||
}); |
||||
|
||||
socket.on('message', (data) => { |
||||
console.log("Notification: " + data); |
||||
this.sendNotification(data); |
||||
}); |
||||
} |
||||
|
||||
sendNotification(data) { |
||||
let title = data || 'Received a notification!'; |
||||
|
||||
let options = { |
||||
body: 'Notification from Notica', |
||||
icon: 'img/icon.png', |
||||
iconUrl: 'img/icon.png', |
||||
vibrate: [200, 100, 200] |
||||
}; |
||||
|
||||
if (this.state.registration) { |
||||
console.log(this.state.registration.showNotification(title, options)); |
||||
} else { |
||||
console.log(new Notification(title, options)); |
||||
} |
||||
} |
||||
|
||||
checksupport() { |
||||
let supported = ('Notification' in window); |
||||
this.setState({supported: supported}); |
||||
|
||||
if (supported) { |
||||
Notification.requestPermission(permission => { |
||||
this.checkperm(permission); |
||||
|
||||
try { |
||||
navigator.serviceWorker.register('/js/sw.js').then((reg) => { |
||||
this.setState({registration: reg}); |
||||
}); |
||||
} catch (e) { // If we are on a browser without serviceWorker
|
||||
this.setState({registration: false}); |
||||
} |
||||
}.bind(this)); |
||||
} |
||||
} |
||||
|
||||
checkperm(permission) { |
||||
if (permission === 'granted') { |
||||
this.setState({haveperm: true}); |
||||
} |
||||
else { |
||||
this.setState({haveperm: false}); |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
let supported = this.state.supported; |
||||
let haveperm = this.state.haveperm; |
||||
let connected = this.state.connected; |
||||
let urlid = this.props.urlid; |
||||
|
||||
return ( |
||||
<div className="container"> |
||||
<div className="row"> |
||||
<div className="twelve columns"> |
||||
<h4>Notification Page</h4> |
||||
{ supported || <div className="error"><p> |
||||
<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications. |
||||
</p></div>} |
||||
{ !haveperm && supported && <div> |
||||
<p> |
||||
Please give this site permission to display notifications. |
||||
<br /> |
||||
<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}> |
||||
Check Again |
||||
</a> |
||||
</p> |
||||
</div>} |
||||
{ !connected && supported && <div className="error"> |
||||
<p> |
||||
<i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server. |
||||
<br /> |
||||
Attempting to reconnect... |
||||
</p> |
||||
</div>} |
||||
{ haveperm && connected && supported && <p> |
||||
<i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications. |
||||
</p>} |
||||
</div> |
||||
</div> |
||||
<div className="row"> |
||||
<div className="six columns"> |
||||
<h4>Examples</h4> |
||||
<p>Here are some different ways to use Notica:</p> |
||||
<p> |
||||
Just run it from your terminal: <br /> |
||||
<code> |
||||
$ notica |
||||
</code> |
||||
</p> |
||||
<p> |
||||
Add a custom message: <br /> |
||||
<code> |
||||
$ notica Hello world! |
||||
</code> |
||||
</p> |
||||
<p> |
||||
Get an alert when a command finishes: <br /> |
||||
<code> |
||||
$ sudo apt-get update; notica Done! |
||||
</code> |
||||
</p> |
||||
<p> |
||||
Get an alert when a command succeeds: <br /> |
||||
<code> |
||||
$ make all && notica Success! |
||||
</code> |
||||
</p> |
||||
<p> |
||||
Get an alert when a command fails: <br /> |
||||
<code> |
||||
$ make all || notica Failed! |
||||
</code> |
||||
</p> |
||||
</div> |
||||
<div className="six columns"> |
||||
<h4>Tips</h4> |
||||
<p>Bookmark this page! It is unique to the function in your <code className="smallcode">.bashrc</code> file. |
||||
Notifications will be sent to all open pages with the same ID code in the URL.</p> |
||||
<p> |
||||
Use quotes on messages with special characters: <br /> |
||||
<code> |
||||
$ notica "This is awesome :)" |
||||
</code> |
||||
</p> |
||||
<p> |
||||
Need to set Notica up again? <br /> |
||||
<Link to={'/home/' + urlid}> |
||||
Click here to go back to the instructions. |
||||
</Link> |
||||
</p> |
||||
<p> |
||||
Open this page on your phone: |
||||
<center><QRCode value={'https://notica.us/' + urlid} /></center> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue