client/app/views/main.html
<div class="container">
<div id="wrapper">
<div id="page-content-wrapper">
<div ng-init="initDashboard()">
<!-- Start search -->
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<div class="input-group" id="search">
<form ng-submit="search(keyword)">
<input type="text" class="form-control" ng-model="keyword" placeholder="Search brand name or drug (example: motrin)">
<button class="btn btn-dre search-btn" id="search-btn" type="submit">Search</button>
</form>
</div>
</div>
</div>
<!-- End search -->
<div ng-hide="noResults">
<div class="row">
<div class="col-md-12">
<h2 ng-show="!showFilter">Reactions</h2>
<h2 ng-show="showFilter"><span class="accent-color text-uppercase">{{ searchTerm }}</span> related reactions</h2>
<p>Click on the reaction below to see definitions in plain English</p>
</div>
<!-- <div class="col-md-6 text-right">
<h2>Translate <input type="checkbox" name="my-checkbox" unchecked></h2>
</div> -->
</div>
<div class="row">
<div class="col-md-4" ng-repeat="symptom in allSymptoms | limitTo: 6">
<div class="mc flip">
<div class="card" ng-class="{'flipped':isFlipped1}">
<div class="face front" ng-click="isFlipped1=!isFlipped1">
<div class="mc mc-default flex-center mc-text">
<p>
{{ symptom.term }}
</p>
<p class="term-percentage">
({{ symptom.percentage }})
</p>
</div>
</div>
<div class="face back">
<div class="mc mc-default mc-text-back">
<div class="term-container">
{{ symptom.term }} ({{ symptom.percentage }})
<div class="back-add-reaction" ng-click="openConfirm('{{ symptom.term }}', $index)">
<i class="fa fa-plus accent-color"></i>
</div>
</div>
<div class="def-container flex-center">
<div class="def-content">
<div class="def" ng-show="definitions[$index].length == 0" ng-mouseenter="show = true" ng-mouseleave="show = false">
NO DEFINITION FOUND
</div>
<div class="def" ng-repeat="definition in definitions[$index]" ng-mouseenter="show = true" ng-mouseleave="show = false">
{{ $index + 1 }} - {{ definition.definition }}
<div class="secondary-text def-info-container">
<span ng-repeat="(key, value) in definition.votes">
{{ value }}
<i ng-show="key=='ups'" class="fa fa-thumbs-o-up" ng-click="vote('{{ symptom.term }}', 'up', $parent.$index, $parent.$parent.$index)"
ng-class="{ 'voter': hover }" ng-mouseenter="hover = true" ng-mouseleave="hover = false"></i>
<i ng-show="key=='downs'" class="fa fa-thumbs-o-down" ng-click="vote('{{ symptom.term }}', 'down', $parent.$index, $parent.$parent.$index)"
ng-class="{ 'voter': hover }" ng-mouseenter="hover = true" ng-mouseleave="hover = false"></i>
</span>
<span class="pull-right source-text">Source: {{ definition.source }}</span>
</div>
</div>
</div>
</div>
<div class="back-flip-icon">
<i class="fa fa-repeat" ng-click="isFlipped1=!isFlipped1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- add space to bottom -->
<br>
</div>
</div>
<!-- Start analytics row 1 -->
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Reports by Brand Name for <span class="text-uppercase">{{searchTerm}}</span> Related Reactions</div>
<div class="panel-body">
<table class="table table-striped table-hover ">
<thead>
<tr>
<th class="col-sm-9">Brand Names</th>
<th class="col-sm-3">Reaction Reports</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="brand in allBrands | limitTo:10">
<td><a href ng-click="search('{{ brand.term }}')">{{ brand.term }}</a></td>
<td>{{ brand.count | number }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Reports by Manufacturer for <span class="text-uppercase">{{searchTerm}}</span> Related Reactions</div>
<div class="panel-body text-center">
<canvas id="doughnut" class="chart chart-doughnut" data="manufacturerCounts" labels="manufacturerNames" legend="true" height="162px"></canvas>
</div>
</div>
</div>
</div>
<!-- End analytics row 1-->
<!-- Start analytics row 2-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Report Frequency for <span class="text-uppercase">{{searchTerm}}</span> Related Reactions</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line" data="eventCounts" labels="eventDates" height="90%">
</canvas>
</div>
</div>
</div>
</div>
<!-- End analytics row 2-->
<!-- Start analytics row 3-->
<div class="row ">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Reactions Reported By Gender</div>
<div class="panel-body text-center">
<div class="row" ng-repeat="gender in allGenderCount">
<div class="col-md-12 gender-font" ng-class="{ 'female-color': gender.description == 'Female' , 'male-color': gender.description == 'Male' }">
<i class="fa fa-female" ng-hide="gender.description != 'Female'"></i>
<i class="fa fa-question-circle" ng-hide="gender.description != 'Unknown'"></i>
<i class="fa fa-male" ng-hide="gender.description != 'Male'"></i> {{ gender.count | number }}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Reactions Reported By Country</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="country in allCountries | limitTo:10">
<span class="badge">{{ country.count | number }}</span> <span class="text-flag-align">{{ country.term }}</span><img ng-src="../images/flags/{{ country.term | lowercase}}.png" alt="{{country.term}}"></li>
</ul>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Serious vs. Non Serious Reactions</div>
<div class="panel-body text-center">
<div ng-repeat="severity in allSeverityCount">
<p class="severity-count" ng-class="{ 'severity-serious': severity.description == 'Serious' , 'severity-non-serious': severity.description == 'Non-Serious' }">{{ severity.count | number }}</p>
<p class="severity-term">{{ severity.description }} adverse events</p>
</div>
</div>
</div>
</div>
</div>
<!-- End analytics row 3-->
</div>
<br/>
<div ng-show="noResults">
<div class="col-md-12">
<div class="alert alert-danger" role="alert">
<strong><i class="fa fa-exclamation-triangle"></i> No Results!</strong> Your search for "{{ searchTerm }}" returned no results. Please search again.
</div>
</div>
</div>
</div>
</div>
<!-- End page content wrapper -->
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Too many requests!</h3>
</div>
<div class="modal-body">
<p>openFDA only allows 240 calls per minute to their API. Please wait while we try to reconnect.</p>
<p class="text-center"><i class="fa fa-5x fa-spinner fa-pulse"></i></p>
<br>
<p>For more information about the API limits, visit <a href="https://open.fda.gov/api/reference/#authentication">here</a>. </p>
</div>
</script>
<script type="text/ng-template" id="definitionModalDialog">
<div class="ngdialog-message">
<h3>Add new definition for {{ selectedDefinition }}</h3>
<p><textarea class="full" ng-model="newDefinition" /></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button btn-dre" ng-click="confirm(newDefinition)">Add</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
</div>
</script>
<!-- End wrapper -->
</div>