Difference between revisions of "Widget:SpaceAPI"

From Hackerspace ACKspace
Jump to: navigation, search
m (made widget visible)
(created first draft XMLHttpRequest spacestate)
Line 9: Line 9:
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
|url=https://ackspace.nl/spaceAPI
 
|url=https://ackspace.nl/spaceAPI
−
|width=300
+
|width=260
−
|height=250
+
|height=20
 
|interval=20
 
|interval=20
 
}}</nowiki>
 
}}</nowiki>
Line 17: Line 17:
 
{{#widget:{{PAGENAME}}
 
{{#widget:{{PAGENAME}}
 
|url=https://ackspace.nl/spaceAPI
 
|url=https://ackspace.nl/spaceAPI
−
|width=156
+
|width=260
−
|height=175
+
|height=20
 
}}<br/>
 
}}<br/>
 
Note that '''url''' is mandatory, the rest is optional (leave out interval to make the data static)
 
Note that '''url''' is mandatory, the rest is optional (leave out interval to make the data static)
Line 30: Line 30:
 
     "use strict";
 
     "use strict";
  
−
     // TODO: implement SpaceAPI widget
+
     if ( typeof SpaceState === "undefined" )
 +
    {
 +
        window.SpaceState = function( _width, _height, _url, _interval )
 +
        {
 +
            this._width = _width;
 +
            this._height = _height;
 +
            this._url = _url;
 +
            this._interval = _interval;
 +
        }
  
−
     // "src" : "<!--{$url|validate:url}-->"
+
        SpaceState.prototype._width          = null;
−
     // width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->"
+
        SpaceState.prototype._height        = null;
 +
        SpaceState.prototype._url            = null;
 +
        SpaceState.prototype._interval      = null;
 +
        SpaceState.prototype._intervalId     = null;
 +
        SpaceState.prototype._node          = null;
 +
        SpaceState.prototype._msgLoading    = "Loading..";
 +
        SpaceState.prototype._msgError      = "Error";
 +
        SpaceState.prototype._msgParserError = "Failed to parse space state information";
 +
        SpaceState.prototype._msgOpen        = "Open";
 +
        SpaceState.prototype._msgClosed      = "Closed";
 +
        SpaceState.prototype._msgUnknown     = "Unknown";
 +
        SpaceState.prototype._colorOpen      = "#0f0";
 +
        SpaceState.prototype._colorClosed    = "#f00";
 +
        SpaceState.prototype._colorUnknown  = "#f70";
  
−
    // Use interval timer id as image id
+
        SpaceState.prototype.start = function( )
−
    var interval = 1000 * <!--{$interval|validate:int|default:0}-->;
+
        {
 +
            // Use interval timer id as image id
 +
            this._intervalId = 0;
 +
            if ( this._interval > 0 )
 +
                this._intervalId = setInterval( this._fetchSpaceState.bind( this ), this._interval );
  
−
    document.write( 'TODO: Widget:SpaceAPI' );
+
            var style = "width:" + this._width + ";height:" + this._height + ";padding:8;text-align:center;-moz-box-shadow: 3px 3px 4px #000;-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);box-shadow: 3px 3px 4px rgba(0,0,0,0.2);";
−
}( ));
+
            document.write( '<div id="spaceAPI' + this.intervalId + '" style="' + style + '">' + this._msgLoading + '</div>' );
 +
 
 +
            this._node = document.getElementById( "spaceAPI" + this.intervalId );
 +
            this._node.style
 +
 
 +
            // Update the spacestate immediately
 +
            setTimeout( this._fetchSpaceState.bind( this ), 1 );
 +
        };
 +
 
 +
        SpaceState.prototype._fetchSpaceState = function( )
 +
        {
 +
            this._node.innerText += ".";
 +
            var xhr = new XMLHttpRequest( );
 +
            if ( !!( "onload" in xhr ) )
 +
            {
 +
                xhr.onreadystatechange = function( _event )
 +
                {
 +
                    if ( _event.target.readyState !== 4 )
 +
                        return;
 +
                    if ( _event.target.status === 200 )
 +
                        this._xhr_onload.apply( this, arguments );
 +
                    else
 +
                        this._xhr_onerror.apply( this, arguments );
 +
                }.bind( this );
 +
            }
 +
            else
 +
            {
 +
                // Modern xhr
 +
                xhr.onload = this._xhr_onload.bind( this );
 +
                xhr.onerror = this._xhr_onerror.bind( this );
 +
            }
 +
 
 +
            xhr.open( "GET", this._url, true );
 +
 
 +
            // Tells server that this call is made for ajax purposes.
 +
            // Most libraries like jQuery/Prototype/Dojo do this
 +
            xhr.setRequestHeader( "X-Requested-With", "XMLHttpRequest" );
 +
 
 +
            // No data needs to be sent along with the request.
 +
            xhr.send( null );
 +
        };
 +
 
 +
        SpaceState.prototype._updateSpaceState = function( _message, _color )
 +
        {
 +
            this._node.innerText = _message;
 +
            this._node.style.backgroundColor = _color;
 +
        };
 +
 
 +
        SpaceState.prototype._xhr_onload = function( _event )
 +
        {
 +
            var spaceState;
 +
            var open = null;
 +
            var message = null;
 +
 
 +
            try
 +
            {
 +
                spaceState = JSON.parse( _event.target.responseText );
 +
                open = spaceState.state.open;
 +
                message = spaceState.state.message;
 +
            }
 +
            catch( _e )
 +
            {
 +
                message = this._msgParserError;
 +
            }
 +
 
 +
            if ( spaceState.state.open )
 +
                this._updateSpaceState( spaceState.state.message || this._msgOpen, this._colorOpen );
 +
            else if ( spaceState.state.open === false )
 +
                this._updateSpaceState( spaceState.state.message || this._msgClosed, this._colorClosed );
 +
            else
 +
                this._updateSpaceState( spaceState.state.message || this._msgUnknown, this._colorUnknown );
 +
        };
 +
 
 +
        SpaceState.prototype._xhr_onerror = function( )
 +
        {
 +
            // Something has failed, show the error
 +
            this._updateSpaceState( this._msgError, this._colorUnknown );
 +
        }
 +
    }
 +
 
 +
/*
 +
        "w"          : "<!--{$width|escape:html|default:auto}-->",
 +
        "h"          : "<!--{$height|escape:html|default:auto}-->",
 +
        "interval"    : 1000 * 0 <!--{$interval|validate:int|default:0}-->,
 +
        "src"        : "<!--{$url|validate:url}-->",
 +
*/
 +
 
 +
    var state = new SpaceState( 260, 20, "http://ackspace.nl/spaceAPI/", 5000 );
 +
    state.start();
 
</script>
 
</script>
 
</includeonly>
 
</includeonly>

Revision as of 10:36, 8 August 2015

This widget allows you to display the Space API data (provided as JSON)

Created by Xopr

Using this widget

To insert this widget, use the following code: 

{{#widget:SpaceAPI
|url=https://ackspace.nl/spaceAPI
|width=260
|height=20
|interval=20
}}

This will give the following result:

Note that url is mandatory, the rest is optional (leave out interval to make the data static)


Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:SpaceAPI article.

Retrieved from "https://ackspace.nl/w/index.php?title=Widget:SpaceAPI&oldid=4798"