|
|
|
'use strict';
|
|
|
|
import React from 'react';
|
|
|
|
import io from 'socket.io-client';
|
|
|
|
import QRCode from 'qrcode.react';
|
|
|
|
|
|
|
|
export default class Home 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.id;
|
|
|
|
|
|
|
|
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});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
checkperm(permission) {
|
|
|
|
if (permission === 'granted') {
|
|
|
|
this.setState({haveperm: true});
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.setState({haveperm: false});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render(){
|
|
|
|
let id = this.props.id;
|
|
|
|
let storSupport = this.props.storSupport;
|
|
|
|
let supported = this.state.supported;
|
|
|
|
let haveperm = this.state.haveperm;
|
|
|
|
let connected = this.state.connected;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="container">
|
|
|
|
<div className="row">
|
|
|
|
<div className="twelve columns">
|
|
|
|
{ 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="javascript:void(0)" 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="twelve columns">
|
|
|
|
<h4>Usage</h4>
|
|
|
|
<p>
|
|
|
|
Notica is a Bash function / alias that sends a notification to a tab in your browser when it's ran:
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
|
|
|
<div className="six columns">
|
|
|
|
<p><code>$ long-running-command; notica Finished!</code></p>
|
|
|
|
<p>
|
|
|
|
This will wait until the first command completes before running Notica. That way you can go do other things while your long task runs. Then you will recieve a notification on any devices that have the Notica website open with your unique ID.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="six columns">
|
|
|
|
<p><img className="u-max-full-width" src="/img/example.gif" /></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
|
|
|
<div className="twelve columns">
|
|
|
|
<h4>Quick Setup</h4>
|
|
|
|
<p>
|
|
|
|
Run this command: <br />
|
|
|
|
<code>
|
|
|
|
$ echo 'notica() { curl --data "d:$*" https://notica.us/{id} ; }' >> ~/.bashrc && source ~/.bashrc
|
|
|
|
</code>
|
|
|
|
</p>
|
|
|
|
<p>Now open this page on any devices you want to receive the notifications on: <a href={'https://notica.us/' + id}>{'https://notica.us/' + id}</a></p>
|
|
|
|
|
|
|
|
<h4>Setup</h4>
|
|
|
|
<p>Curl is required to use Notica.</p>
|
|
|
|
<p>
|
|
|
|
Add this line to your <code className="smallcode">.bashrc</code> file:<br />
|
|
|
|
<code>
|
|
|
|
notica() { curl --data "d:$*" https://notica.us/{id} ; }
|
|
|
|
</code>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Source your <code className="smallcode">.bashrc</code> file to apply the changes:<br />
|
|
|
|
<code>$ source .bashrc</code>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
All done! Now open this page on any devices you want to receive the notifications on: <a href={'https://notica.us/' + id}>{'https://notica.us/' + id}</a><br />
|
|
|
|
</p>
|
|
|
|
{ storSupport && <div className="storSupport"><p>
|
|
|
|
<i className="fa fa-info-circle" aria-hidden="true"></i> Notica uses Local Storage to keep track of your unique ID. If you would like to generate a new random ID, <a href="/clear">click here</a>.
|
|
|
|
</p></div>}
|
|
|
|
</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>
|
|
|
|
Open this page on your phone:
|
|
|
|
<center><QRCode value={'https://notica.us/' + id} /></center>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
|
|
|
<div className="twelve columns">
|
|
|
|
<h4>About</h4>
|
|
|
|
<p>
|
|
|
|
Notica was written by <a href="http://tannercollin.com" target="_blank">Tanner Collin</a> after he got tired of checking if his commands were done running.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Notica is free and open-source software: <a href="https://github.com/tannercollin/Notica" target="_blank">https://github.com/tannercollin/Notica</a>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Thanks to exdevlin for thinking of the name. Thanks to all the devs behind Node.js, React, webpack, and socket.io.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|