Blade file in laravel with angular js
Submitted by Darshan Malani - 7 years ago
Angular js With laravel blade file
@extends('layout.master')
@section('title')
Your BP & Pulse Diary
@endsection
@section('custom-css')
<style type="text/css">
@media(min-width: 320px) and (max-width: 480px)
{
.responsive_systolic{
margin-left: 10px !important;
}
}
@media(min-width: 768px) and (max-width: 1024px)
{
.responsive_systolic{
margin-left: 10px !important;
}
}
@media only screen and (max-width: 480px){
.sleep_goals{
margin-bottom: 10px;
float: left;
width: 18px;
}
}
.weight_mesaure_redlabel_red
{
color: #E5232D;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
}
.weight_mesaure_greenlabel_red
{
color: #006600;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
}
.weight_mesaure_greenlabel_red
{
color: #006600;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
}
.weight_mesaure_redlabel_second
{
font-size: 14px!important;
margin-left: 7px;
color: #E5232D;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
font-family: "roboto_condensedregular";
left: 5px;
position: relative;
}
.weight_mesaure_redlabel_second_uniq
{
font-size: 14px!important;
margin-left: 7px;
color: #E5232D;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
left: 5px;
position: relative;
}
.weight_mesaure_greenlabel_second_uniq
{
font-size: 14px!important;
margin-left: 7px;
color: #006600;
font-weight: bold;
font-size: 16px;
text-align: center;
vertical-align: middle !important;
left: 5px;
position: relative;
}
ul.datepicker_ul li label.data_label_second {
position: relative;
top: 0px;
padding: 5px;
}
#bp-pulse-calendar .fc-prev-button.fc-button.fc-state-default.fc-corner-left,
#bp-pulse-calendar .fc-next-button.fc-button.fc-state-default.fc-corner-right
{
background: transparent;
box-shadow: none;
border: none;
color: #0073BC;
}
#bp-pulse-calendar .fc-center > h2
{
font-size: 18px;
}
#bp-pulse-calendar .fc-prev-button.fc-button.fc-state-default.fc-corner-left
{
position: absolute;
left: 40%;
}
#bp-pulse-calendar .fc-next-button.fc-button.fc-state-default.fc-corner-right
{
position: absolute;
right: 38.5%;
}
.calendar_portion_total
{
padding-left: 0px;
}
#bp-pulse-calendar.fc td, .fc th
{
border-color: #b3dfff;
}
#bp-pulse-calendar .fc-view-container table thead tr th
{
background:#e0f2ff none repeat scroll 0 0;
color: #0073bc;
vertical-align: middle;
padding-top: 10px;
padding-bottom: 10px;
}
.calendar_portion_total_pbpulse
{
padding-left: 0px;
position: relative;
top:48px;
}
#bp-pulse-calendar .fc-toolbar
{
position: relative;
left: 9%;
}
#bp-pulse-calendar .fc-scroller.fc-day-grid-container
{
overflow: hidden !important;
height: auto !important;
}
#bp-pulse-calendar .fc-row.fc-week.fc-widget-content
{
height: 180px !important;
}
.text-excess{
color: #FF1A1A !important;
}
.text-deficit{
color: #33CC33 !important;
}
.text-neutral{
color: #000000 !important;
}
/*responsive table for bp_pulse table*/
@media(max-width: 800px) {
#bppulse_new_reptable table,
#bppulse_new_reptable thead,
#bppulse_new_reptable tbody,
#bppulse_new_reptable th,
#bppulse_new_reptable td,
#bppulse_new_reptable tr
{
display: block;
}
#bppulse_new_reptable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#bppulse_new_reptable tr { border: 1px solid #ccc; }
#bppulse_new_reptable td {
/* Behave like a "row" */
border: none !important;
/*border-bottom: 1px solid #eee;*/
position: relative;
padding-left: 45%;
white-space: normal;
text-align:left;
}
#bppulse_new_reptable table tbody tr td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 40%;
padding-right: 10px;
white-space: normal;
text-align:left;
font-weight: bold;
padding-top: 15px;
color: #0073BC;
text-align: right;
}
#bppulse_new_reptable td:before { content: attr(data-title); }
}
.date_font_size
{
font-size: 13px;
}
/*end of responsive table for bp_pulse table*/
.left_align{
text-align: left!important;
}
.no-padd-right
{
padding-right: 0px !important;
}
.change_button_right{
margin-right: 16px;
}
.weight_mesaure_greenlabel
{
color: #006600;
font-weight: bold;
font-size: 14px;
text-align: center;
vertical-align: middle !important;
}
</style>
@endsection
@section('content')
<!-- Start Bp and Pulse -->
<section class="section-panel">
<section ng-controller="BpPulseController as bppulse" ng-init="bppulse.userId='{{$user_id}}';
bppulse.loggedBpPulse();" class="section-panel">
<!-- header title -->
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="text-center text-primary">YOUR BP <span class="title_head_line_pulse_bp">& PUL</span>SE DIARY</h2>
</div>
</div>
<div class="saperator"></div>
<div class="row" ng-show="bppulse.show_hide">
<h4 class="col-sm-12 sub_head_blue">BP & PULSE GOALS</h4>
<div class="col-sm-12">
<div id="bppulse_new_reptable">
<table class="table new_sleepbox box_border_noradius">
<thead class="box_head_background">
<tr>
<th>Goals</th>
<th>Last Reading <span class="date_font_size">@{{bppulse.last_log_date | date:'MMM-dd-yy'}}</span></th>
<th>Last 7 days</th>
<th>Last 30 days</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="GOAL"><p class="text-primary">Systolic</p></td>
<td data-title="LAST READING">
<p><span class="green"><b>@{{bppulse.systolic_last_reading}}% </b></span> of goal achieved</p>
</td>
<td data-title="THIS WEEK">
<p><span class="green"><b>@{{bppulse.systolic_last_seven_day}}</b></span> of <span class="text-primary"><b>7</b></span> times goal achieved.</p>
</td>
<td data-title="THIS MONTH">
<p><span class="green"><b>@{{bppulse.systolic_last_thirty_days}}</b></span> of <span class="text-primary"><b>30</b></span> times goal achieved</p>
</td>
</tr>
<tr>
<td data-title="GOAL"><p class="text-primary">Diastolic</p></td>
<td data-title="LAST READING">
<p><span class="green"><b>@{{bppulse.diastolic_last_reading}}% </b></span> of goal achieved</p>
</td>
<td data-title="THIS WEEK">
<p><span class="green"><b>@{{bppulse.diastolic_last_seven_day}}</b></span> of <span class="text-primary"><b>7</b></span> times goal achieved.</p>
</td>
<td data-title="THIS MONTH">
<p><span class="green"><b>@{{bppulse.diastolic_last_thirty_days}}</b></span> of <span class="text-primary"><b>30</b></span> times goal achieved</p>
</td>
</tr>
<tr>
<td data-title="GOAL"><p class="text-primary">Heart rate</p></td>
<td data-title="LAST READING">
<p><span class="green"><b>@{{bppulse.pulse_last_reading}}% </b></span> of goal achieved</p>
</td>
<td data-title="THIS WEEK">
<p><span class="green"><b>@{{bppulse.pulse_last_seven_day}}</b></span> of <span class="text-primary"><b>7</b></span> times goal achieved.</p>
</td>
<td data-title="THIS MONTH">
<p><span class="green"><b>@{{bppulse.pulse_last_thirty_days}}</b></span> of <span class="text-primary"><b>30</b></span> times goal achieved</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="saperator"></div>
<div class="row">
<div class="col-xs-12">
<span class="text-light-blue">Last Log Date: @{{bppulse.last_log_date | date:'MMM-dd-yy'}} </span>
<button class="btn btn-primary btndesign"><i class="fa fa-refresh"></i> Sync with device</button>
</div>
</div>
<!-- End of main header title -->
<!-- Start Bp and Pulse tables row -->
<div class="row tab_chart_row">
<!-- Bp and Pulse portion -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 wight_body_portion">
<div class="panel panel-primary weight_body_panel weight_diary_panel_size">
<div class="panel-heading text-center panel_head_background">BP & PULSE</div>
<div class="panel-body panel-container">
<div class="row weight_body_fat_row">
<div class="col-xs-8 col-sm-3 col-md-3 col-lg-3 datebox weight_body_part1">
<form name="BpPulseForm" novalidate="novalidate" class="animation-fadeInQuick">
<table class="table body_weight_goal_table w_goal_m_othertable">
<tbody>
<tr>
<th>
<p class="text-primary">DATE:</p>
<div class="form-group">
<div class="input-group date sleepboxdatepicker">
<input type="text"
class="form-control"
uib-datepicker-popup = "@{{bppulse.format}}"
ng-model="bppulse.log_date"
is-open="bppulse.bp_pulse_date_popup.opened"
datepicker-options="bppulse.dateOptions"
ng-required="true"
show-button-bar=false
close-text="Close" />
<span class="input-group-addon caledar_custom" ng-click="bppulse.bp_pulse_date_open()">
<i aria-hidden="true" class="fa fa-calendar"></i>
</span>
</div>
</div>
<div class="saperator">
</div>
<div class="input-group date datepicker_new_design">
<input type="text" number-validation="number-validation" maxlength="6" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-model="bppulse.systolic" name="systolic" id="systolic" class="form-control" placeholder="Systolic" required>
<span class="input-group-addon">mmHg</span>
</div>
<div class="saperator"></div>
<div class="input-group date datepicker_new_design">
<input type="text" number-validation="number-validation" maxlength="6" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-model="bppulse.diastolic" name="diastolic" id="diastolic" class="form-control" placeholder="Diastolic" required>
<span class="input-group-addon">mmHg</span>
</div>
<div class="saperator"></div>
<div class="input-group date datepicker_new_design">
<input type="text" number-validation="number-validation" maxlength="6" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-model="bppulse.pulse" name="pulse" id="pulse" class="form-control" placeholder="Pulse" required>
<span class="input-group-addon">BPM </span>
</div>
<div class="saperator"></div>
</th>
</tr>
<tr>
<td class="last_btnbottom"><button class="btn btn-primary btn-block btndesign1" ng-disabled="BpPulseForm.$invalid || bppulse.log_BpPulse_error" ng-click="bppulse.logBpPulse();">Log</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3 weight_body_part2">
<table class="table body_weight_goal_table">
<tbody>
<tr>
<th>
<p class="text-primary">GOAL DATE:</p>
<p>@{{bppulse.bp_pulse_goal | date:'MM-dd-yy'}}</p>
</th>
</tr>
<tr>
<td>
<p>Systolic Goal <span class="font_left">@{{bppulse.systolic_goal}}</span></p>
</td>
</tr>
<tr>
<td>
<p>Diastolic Goal <span class="font_left">@{{bppulse.diastolic_goal}}</span></p>
</td>
</tr>
<tr>
<td>
<p>Pulse Goal <span class="font_left">@{{bppulse.heart_rate}}</span></p>
</td>
</tr>
<tr>
<td>
<p class="weight_mesaure_redlabel last_btnbottom">@{{bppulse.bp_pulse_goal_days_left}} days left</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center weight_body_part3">
<table class="table body_weight_goal_table w_goal_m_othertable">
<tr>
<th>
<p class="text-primary text-center">HISTORY (LAST 4 LOGS)</p>
<table class="table table-bordered history_table">
<tr>
<th>Date</th>
<th>Systolic/<br>Diastolic</th>
<th>Heart Rate</th>
</tr>
<tr ng-repeat="loggedbppulse in bppulse.user_bppulse_history | orderBy:'log_date':true | limitTo:4 ">
<td>@{{loggedbppulse.log_date | date:'MM-dd-yy'}}</td>
<td>@{{loggedbppulse.systolic | number:0 }}/@{{loggedbppulse.diastolic | number:0}}</td>
<td>@{{loggedbppulse.pulse.pulse | number:0}}</td>
</tr>
</table>
</th>
</tr>
<tr>
<td>
<div class="saperator"></div>
</td>
</tr>
<tr>
<td class="last_btnbottom history_btn">
<button class="btn btn-primary btndesign">See All</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- end of Bp and Pulse portion -->
<!-- start graph three -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 body_measure_portion_bp">
<div class="chartleft_contain">
<ul class="nav nav-tabs">
<li class="active responsive_systolic"><a data-toggle="tab" href="#systolic_tab_id" ng-click="bppulse.systolicDiastolicCharts('all')">Systolic / Diastolic</a></li>
<li><a data-toggle="tab" href="#pulse_tab_id" ng-click="bppulse.systolicDiastolicCharts('pulse')">Pulse</a></li>
</ul>
<div class="tab-content">
<div id="systolic_tab_id" class="tab-pane fade in active">
<div class="datepicker_contain_chart">
<div class="row">
<div class="col-xs-7">
<ul class="list-inline datepicker_ul left_align">
<li class="date_contain_li">
<div class="form-group">
<div class="input-group date sleepboxdatepicker date-width">
<input type="text"
class="form-control"
uib-datepicker-popup = "@{{bppulse.format}}"
ng-model="bppulse.bp_sys_dys_start_date"
is-open="bppulse.bp_pulse_s_date_popup.opened"
datepicker-options="bppulse.dateOptions"
ng-required="true"
ng-change="bppulse.loggedBpPulse('change');"
show-button-bar=false
close-text="Close" />
<span class="input-group-addon caledar_custom" ng-click="bppulse.bp_pulse_s_date_open()">
<i aria-hidden="true" class="fa fa-calendar"></i>
</span>
</div>
</div>
</li>
<li><label class="data_label label_contain_li">to</label></li>
<li class="date_contain_li">
<div class="form-group">
<div class="input-group date sleepboxdatepicker date-width">
<input type="text"
class="form-control"
uib-datepicker-popup = "@{{bppulse.format}}"
ng-model="bppulse.date_log_diastolic"
is-open="bppulse.bp_pulse_e_date_popup.opened"
datepicker-options="bppulse.dateOptions"
ng-required="true"
ng-change="bppulse.loggedBpPulse('change');"
show-button-bar=false
close-text="Close" />
<span class="input-group-addon caledar_custom" ng-click="bppulse.bp_pulse_e_date_open()">
<i aria-hidden="true" class="fa fa-calendar"></i>
</span>
</div>
</div>
</li>
</ul>
</div>
<!-- <div class="col-xs-5 text-right">
<ul class="list-inline nobottom-margin no-padd-right">
<li><label class="data_label_second label_contain_li"><span class="text-primary change_button_right"> Change</span>
<span class="weight_mesaure_@{{bppulse.diff_class}}label">Systolic @{{bppulse.systolic_chart_diff}} mmHg</span> <span class="weight_mesaure_@{{bppulse.diff_class}}label_red glyphicon glyphicon-arrow-@{{bppulse.Systolic_diff_arrow}}"></span><br>
<span class="weight_mesaure_@{{bppulse.diff_class}}label_second_uniq"> Diastolic @{{bppulse.diastolic_chart_diff}} mmHg</span>
<span class="weight_mesaure_@{{bppulse.diff_class}}label_red glyphicon glyphicon-arrow-@{{bppulse.Diastolic_diff_arrow}}"></span></label>
</li>
</ul>
</div> -->
</div>
</div>
<div class="chart_contain_part_bp">
<div id="Systolic_Chart" class="firstdiv" ></div>
</div>
</div>
<div id="pulse_tab_id" class="tab-pane fade">
<div class="datepicker_contain_chart">
<div class="row">
<div class="col-sm-8">
<ul class="list-inline datepicker_ul left_align">
<li class="date_contain_li">
<div class="form-group">
<div id="datepicker_log_from_pulse" class="input-group date date-width">
<input type="text"
class="form-control"
uib-datepicker-popup = "@{{bppulse.format}}"
ng-model="bppulse.bp_sys_dys_start_date"
is-open="bppulse.bp_pulse_s_date_popup.opened"
datepicker-options="bppulse.dateOptions"
ng-required="true"
ng-change="bppulse.loggedBpPulse('change');"
show-button-bar=false
close-text="Close" class="rightborder" />
<span class="input-group-addon caledar_custom" ng-click="bppulse.bp_pulse_s_date_open()">
<i aria-hidden="true" class="fa fa-calendar"></i>
</span>
</div>
</div>
</li>
<li><label class="data_label label_contain_li">to</label></li>
<li class="date_contain_li">
<div class="form-group">
<div id="datepicker_log_to_pulse" class="input-group date date-width">
<input type="text"
class="form-control"
uib-datepicker-popup = "@{{bppulse.format}}"
ng-model="bppulse.date_log_diastolic"
is-open="bppulse.bp_pulse_e_date_popup.opened"
datepicker-options="bppulse.dateOptions"
ng-required="true"
ng-change="bppulse.loggedBpPulse('change');"
show-button-bar=false
close-text="Close" />
<span class="input-group-addon caledar_custom" ng-click="bppulse.bp_pulse_e_date_open()">
<i aria-hidden="true" class="fa fa-calendar"></i>
</span>
</div>
</div>
</li>
</ul>
</div>
<!-- <div class="col-sm-4 text-right">
<ul class="list-inline nobottom-margin no-padd-right">
<li><label class="data_label label_contain_li"><span class="text-primary">Change</span>
<span class="weight_mesaure_@{{bppulse.diff_class}}label"> @{{bppulse.pulse_chart_diff}} bpm</span> <span class="weight_mesaure_@{{bppulse.diff_class}}label_red glyphicon glyphicon-arrow-@{{bppulse.pulse_diff_arrow}}"></label>
</li>
</ul>
</div> -->
</div>
</div>
<div class="chart_contain_part_bp">
<div id="Pulse_Chart" class="firstdiv" ></div>
</div>
</div>
</div>
</div>
<!-- end of graph three portion -->
</div>
<!-- end of Bp and Pulse tables -->
<!-- start chart row -->
<section class="monthly-calorie-summary-section">
<div class="row text-center">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center text-primary">MONTH<span class="title_head_line">LY SU</span>MMARY</h2>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-10 col-md-10 col-lg-10 calendar_portion">
<div ng-model="bppulse.eventSources"
ui-calendar="bppulse.uiConfig.calendar"
class="bp_pulse_calender angular-calender hidden-xs"
calendar ="bpCalendar"
></div>
<div class="visible-xs">
<table class="table table-bordered calendar_table_side">
<thead>
<tr class="tab_firsthead">
<th class="calendar_table_head">Month Average</th>
</tr>
</thead>
<tbody>
<tr class="tab_colnum1">
<td class="ex_smallcolumndiv">
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 calendar_week_avg">
<table id="week_average" class="table table-bordered calendar_table_side">
<thead>
<tr class="tab_firsthead">
<th class="calendar_table_head">Week Average</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_1">
</div>
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_2">
</div>
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_3">
</div>
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_4">
</div>
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_5">
</div>
</td>
</tr>
<tr>
<td class="ex_smallcolumndiv">
<div class="tabletd-div calendar-week-cell week_6">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-10 col-md-10 col-lg-10 footercal_side">
<div class="monthly_calendar_footer columnfooterdiv" id="monthly_left">
<p class="footer_para">Month Average</p>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 footercal_side footercal_side_right">
<div class="monthly_calendar_footer monthly_rightside columnfooterdiv" id="monthly_right">
<p ng-bind-html="bppulse.sys"></p>
<p ng-bind-html="bppulse.dys"></p>
<p ng-bind-html="bppulse.pulse_month"></p>
</div>
</div>
</div>
</section>
<!-- End of header title -->
<!-- Bp and Pulse tables row -->
<!-- End of chart row -->
</section>
<!-- End Bp and Pulse -->
@endsection
@section('js')
{!! HTML::script("js/controllers/BpPulseController.js") !!}
{!! HTML::script("js/amcharts.js") !!}
{!! HTML::script("js/serial.js") !!}
@append
@section('custom-js')
<script type="text/javascript">
$(document).ready(function(){
var height = Math.max($("#monthly_left").height(), $("#monthly_right").height());
$("#monthly_left").height(height);
$("#monthly_right").height(height);
$(".bp_pulse_calender.angular-calender .fc-prev-button").find("span").removeClass("ui-icon ui-icon-circle-triangle-w").addClass("fa fa-chevron-left fa-fw");
$(".bp_pulse_calender.angular-calender .fc-next-button").find("span").removeClass("ui-icon ui-icon-circle-triangle-w").addClass("fa fa-chevron-right fa-fw");
});
</script>
@append
Stats
-
0 likes
- 5953 views