Fuel Pump Inspection Search

by Alexander

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda-themeless.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/spin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="//www.dangrossman.info/wp-content/themes/2012/daterangepicker.js"></script>
<link rel="stylesheet" href="//www.dangrossman.info/wp-content/themes/2012/daterangepicker-bs3.css">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="#">Fuel Pump Inspections</a>

        </div>
    </div>
</nav>
<div id="mainContentContainer" class="container">
    <div class="panel panel-primary" style="margin-bottom: 0;">
        <div class="panel-heading" data-toggle="collapse" data-target="#filter-panel">
            <h3 class="panel-title">
                <i class="fa fa-search fa-fw"></i>
                Search Criteria
                <span class="collapse-icon pull-right"></span>
            </h3>
        </div>
        <div id="filter-panel" class="collapse in filter-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="form-group col-sm-4 col-xs-12">
                 ...

CSS

html, body { height: 100%; }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
    background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf5fd7f5f6_1.JPG') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#mainContentContainer {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    padding-top: 15px;
    
    /*margin-bottom: 2%;
    min-height: 95%;*/
}

}
body { padding-top: 70px; }
.form-group { margin-bottom: 5px; }
address { margin-bottom: 0; }
table.device-failure-details { margin-bottom: 0; }

div.popover.device-failure-details { min-width: 300px; color: black; }
div.popover.device-failure-details > .popover-content { padding: 0; }

[data-toggle=collapse].collapse-icon { /* Equivalant to FontAwesome "fa fa-lg" */
    font-family: FontAwesome;
    display: inline-block;
    padding-left: 3px;
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
}
[data-toggle=collapse]:not(.collapsed) .collapse-icon:after {
    font-family: FontAwesome;
    content: "\f078"; /* fa-chevron-down */
}
[data-toggle=collapse].collapsed .collapse-icon:after {
    font-family: FontAwesome;
    content: "\f077"; /* fa-chevron-up */
}

JavaScript

// Default to the last 30 days.
var today = moment();
var thirtyDaysAgo = moment().subtract('days', 29);

$('#fromDate').val(thirtyDaysAgo.format('MMMM D, YYYY'));
$('#toDate').val(moment().format('MMMM D, YYYY'));
$('#dateRangePicker').daterangepicker(
    {
        ranges: {
            'Today': [today, today],
            'Yesterday': [today.subtract('days', 1), today.subtract('days', 1)],
            'Last 7 Days': [today.subtract('days', 6), today],
            'Last 30 Days': [thirtyDaysAgo, today],
            'This Month': [today.startOf('month'), today.endOf('month')],
            'Last Month': [today.subtract('month', 1).startOf('month'), today.subtract('month', 1).endOf('month')]
        },
        parentEl: 'dateRangePicker',
        startDate: thirtyDaysAgo,
        endDate: today
    },
    function(start, end) {
        $('#fromDate').val(start.format('MMMM D, YYYY'));
        $('#toDate').val(end.format('MMMM D, YYYY'));
        //$('#dateRange').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
);
$('#inspectionHistoryModal').modal( { show: true } );

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
    $('[data-toggle=popover]').popover();
    
    Ladda.bind( '.ladda-button', { timeout: 2000 } );
});
$('[data-toggle=popover]').on('shown.bs.popover', function () {
    var offset = 20;
    
    // Move the popover to the left.
    var currentPopoverPosition = parseInt($('.popover').css('left'));
    $('.popover').css('left', currentPopoverPosition - offset + 'px');
    
    // Adjust the arrow over so that it's still pointing to the same place by moving
    // the arrow to the right the same amount that the popover was moved to the left.
    var currentArrowPosition = parseInt($('.popover.top .arrow').css('left'));
    $('.popover.top .arrow').css('left', currentArrowPosition + offset + 'px');
});