Skip to content
Browse files

Add a JS file for embedding a datapoint into another website

  • Loading branch information...
1 parent 631164c commit 41693231903862c1ff96d53e8c16c8f888fb4eb3 @lukec lukec committed
Showing with 26 additions and 1 deletion.
  1. +9 −0 vhsapi/lib/VHSAPI.pm
  2. +8 −0 vhsapi/views/data-widget.tt
  3. +9 −1 vhsapi/views/data.tt
View
9 vhsapi/lib/VHSAPI.pm
@@ -44,6 +44,15 @@ get '/s/:spacename/data/:dataname/update' => sub {
return { status => 'OK', result => $dp->to_hash };
};
+get '/s/:spacename/data/:dataname.js' => sub {
+ my $space = vars->{space} or redirect '/';
+ content_type 'application/javascript';
+ template 'data-widget', {
+ space => $space,
+ datapoint => $space->datapoint(params->{dataname}),
+ }, {layout => undef };
+};
+
get '/s/:spacename/data/:dataname' => sub {
my $space = vars->{space} or redirect '/';
template 'data', { datapoint => $space->datapoint(params->{dataname}) };
View
8 vhsapi/views/data-widget.tt
@@ -0,0 +1,8 @@
+$(function() {
+ $("#[% space.name %]-[% datapoint.name %]").append(
+ '<span class="datavalue">[% datapoint.value %]</span>'
+ + ' <span class="updatetime">last updated: '
+ + '<abbr class="timeago" title="[% datapoint.datetime.iso8601 %]">'
+ + '[% datapoint.datetime %]</abbr></span>'
+ );
+});
View
10 vhsapi/views/data.tt
@@ -1,7 +1,7 @@
<div class="row">
<h1>Hackspace.ca API</h1>
[% IF datapoint %]
- <h2>[% space.title %] - [% datapoint.name %]<h2>
+ <h2>[% space.title %] - [% datapoint.name %]</h2>
<div class="well">
<h3>Current value: [% datapoint.value %]
<small>
@@ -9,6 +9,14 @@
</small>
</h3>
<p class="lead">You can also fetch this value as <a href="[%datapoint.uri %].json">JSON</a> or <a href="[% datapoint.uri %].txt">text</a>.</p>
+ <p>To dynamically embed the value of this datapoint in your site, include the following code snippet:
+<pre>
+ &lt;div id="[% space.name %]-[% datapoint.name %]">&lt;/div>
+ &lt;script src="http://api.hackspace.ca/s/[% space.name %]/data/[% datapoint.name %].js" >&lt;/script>
+</pre>
+ <em>(You will need jQuery loaded on the including page. You could also consider using <a href="http://timeago.yarp.com/">Timeago.js</a> to improve the formatting of the date.)</em>
+</p>
+
</div>
[% ELSE %]
<div class="alert-warning">

0 comments on commit 4169323

Please sign in to comment.
Something went wrong with that request. Please try again.