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 React from 'react' |
||||||
import Router from 'react-router'; |
import { Router, Route, browserHistory } from 'react-router' |
||||||
import routes from './routes'; |
import Site from './ui/Site'; |
||||||
|
|
||||||
Router.run( routes, Router.HistoryLocation, function( Handler ){ |
React.render(( |
||||||
React.render( |
<Router history={browserHistory}> |
||||||
React.createElement( Handler ), |
<Route path="/*" component={Site} /> |
||||||
document.getElementById('root') |
</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