public/the_bridge_templates/static/v2.html
<div class="v2">
<div class="container">
<div class="header">
<br><br>
<p class="lead">
Our contributors are hard at work on the new <b>"jobs"</b> engine.
Have a look at what we're building...
it's a complete upgrade of our automatic data integration platform.
</p>
<p class="lead">
Think of <strong>OpenFn</strong> as your own personal robot whose
job it is to:
</p>
<p class="lead">
(1) constantly fetch data from your connected
technologies,
</p>
<p class="lead">
(2) instantly process those data however you like,
</p>
<p class="lead">
(3) and send them to people or other systems
<em>without ever making a mistake</em>.
</p>
<p class="lead">
When crucial information flows quickly in your organization,
you can make better decisions, faster.
After you check out the new jobs engine below,
click here to look at out how we generate change:
<strong><a href="/impact">our impact model</a></strong>.
</p>
<br><br>
</div>
<div class="jumbotron">
<h2>1. Choose an origin and destination.</h2>
<p class="lead">We'll watch for new activity from an origin, process it accoring to your instructions, and load it into a destination at approximately 3*10^8 m/s. (That's really fast.)</p>
<div class="col-xs-5 center">
<div class="form-group">
<label class="control-label">Origin</label>
<div class="controls">
<select class="form-control">
<option>CommCare</option>
<option>ODK</option>
<option>Salesforce</option>
<option>Telerivet</option>
<option>SurveyCTO</option>
</select>
</div>
</div>
</div>
<div class="col-xs-2 center"><i class="fa fa-arrow-right fa-2x"></i></div>
<div class="col-xs-5 center">
<div class="form-group">
<label class="control-label">Destination</label>
<div class="controls">
<select class="form-control">
<option>DHIS2</option>
<option>OpenMRS</option>
<option>Salesforce</option>
<option>Tableau</option>
<option>CartoDB</option>
</select>
</div>
</div>
</div>
<br><br>
</div>
<div class="jumbotron">
<h2>2. Select an event.</h2>
<p class="lead">Which event should we watch for in CommCare?</p>
<div class="form-group">
<label class="control-label">Origin Event</label>
<div class="controls">
<select class="form-control">
<option>New Patient Registration</option>
<option>Staff Checkin</option>
<option>New Visit</option>
<option>Lab Result</option>
</select>
</div>
</div>
<br>
<p class="lead">Are there any special <strong>conditions</strong> that must be met?</p>
<p>If you don't want all submissions from "Lab Results" to trigger this job, define your filters below:</p>
<textarea class="form-control" placeholder="{ 'formtype' : 'data' } && { 'fancy filters for the inbound JSON' : 'at your fingertips!'' }"></textarea>
</div>
<div class="jumbotron">
<h2>3. Define some actions.</h2>
<p class="lead">What do you want your robot to do? We're looking for <em>verbs</em> and <em>nouns</em> here.</p>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">verb</label>
<select class="form-control">
<option>create</option>
<option>update</option>
<option>upsert</option>
<option>(probably not delete)</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">noun</label>
<select class="form-control">
<option>lab results</option>
<option>visits</option>
<option>patients</option>
<option>(every standard or custom table in your schema)</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<select class="form-control">
<option>update</option>
<option>create</option>
<option>upsert</option>
<option>(probably not delete)</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control">
<option>patients</option>
<option>visits</option>
<option>lab results</option>
<option>(every standard or custom table in your schema)</option>
</select>
</div>
</div>
<br>
<p class="lead">Anything else?</p>
<div class="row">
<div class="col-xs-6">
<select class="form-control" disabled>
<option>verb</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" disabled>
<option>noun</option>
</select>
</div>
</div>
</div>
<div class="jumbotron">
<h2>4. Teach your bot the job.</h2>
<p class="lead">You do this one by hand, we'll take care of the next million. Show us how you want to create lab results and update patients in DHIS2 using data from CommCare.</p>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>In the future</strong>, your robot will review all the object and field names and types in both your source and destination. Based on this information, it will be able to suggest a complete job for you, with levels of certainty for each suggested "field pairing". You simply review and approve our predictions.
</div>
<div class="card card-block create">
<p>Create new lab results</p>
<div class="form-group">
<label class="control-label" style="color: red;">
Date (required)
</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="datetime" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Patient ID</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="text (255)" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Test</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="text (255)" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Value</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="number (10,2)" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card card-block update">
<p>Update existing patients</p>
<div class="form-group">
<label class="control-label" style="color: red;">Patient ID (required)</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="text (255)" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Last Attending Physician</label>
<div class="controls">
<div class="input-group">
<input type="text" placeholder="reference (id)" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Current Status</label>
<div class="controls">
<div class="input-group">
<select class="form-control">
<option>200 OK!</option>
<option>401</option>
<option>500</option>
<option>(That's a little humor for you.)</option>
</select>
<div class="input-group-btn">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="hidden-sm-down">
<i class="fa fa-plus-circle"></i>
data from commcare
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Patient: Name (text)</a></li>
<li><a href="#">Patient: DoB (date)</a></li>
<li><a href="#">Patient: Gender (select1)</a></li>
<li><a href="#">Patient: Phone (text)</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Lab Result: Patient ID (text)</a></li>
<li><a href="#">Lab Result: Test (text)</a></li>
<li><a href="#">Lab Result: Value (text)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<h2>5. Test it out.</h2>
<p class="lead">Look at these sample data we found in CommCare. Review what we'll do in DHIS2. If everything checks out, click "Test!" and see the result.</p>
<div class="card card-block create">
<p><strong>Source data</strong> from CommCare: {name: "Anna", age: 14}</p>
<p><strong>Planned action</strong> in DHIS2: insert {lab_result__c: {name: "blah-007", patient: "this_one", value: 79}</p>
<a class="btn btn-danger">Test!</a>
</div>
<div class="card card-block create">
<p><strong>Result</strong>: Passed</p>
<p><strong>Response from DHIS2</strong>: 200 OK!</p>
</div>
</div>
<div class="jumbotron">
<h2>6. Set it and forget it.</h2>
<p class="lead">You gave this puppy wings, now give it a name and let it fly!</p>
<input type="text" class="form-control" placeholder="name of your job">
<br>
<div class="btn-group">
<a class="btn btn-default">off</a>
<a class="btn btn-primary" disabled>on</a>
</div>
</div>
<p class="lead">Thanks for your time, please let us know what you think of the new design here: <strong><a href="https://docs.google.com/forms/d/1Y0o2uzBT-Kj47l_90wT8C63PAoPbyvSMwMw0taUP2J4/viewform?usp=send_form">a <em>very</em> short form</a></strong>.</p>
</div>
</div>
</div>