{"id":150,"date":"2023-03-22T13:48:38","date_gmt":"2023-03-22T13:48:38","guid":{"rendered":"http:\/\/fuelfox.net\/customer\/?page_id=150"},"modified":"2023-03-22T13:48:38","modified_gmt":"2023-03-22T13:48:38","slug":"custom-data-report","status":"publish","type":"page","link":"https:\/\/fuelfox.net\/customer\/custom-data-report\/","title":{"rendered":"Custom Data Report"},"content":{"rendered":"<style>\n    .list-group-item { cursor: pointer; }\n<\/style>\n\n\n<form id=\"reportForm\" method=\"post\" action=\"\/customer\/wp-json\/wp\/v2\/pages\/150\">\n\n    <div class=\"row\">\n        <div class=\"col-md-6\">\n            <label>Start Date<\/label>\n            <input type=\"date\" name=\"start\" class=\"form-control\" value=\"2026-03-10\">\n        <\/div>\n        <div class=\"col-md-6\">\n            <label>End Date<\/label>\n            <input type=\"date\" name=\"end\" class=\"form-control\" value=\"2026-06-10\">\n        <\/div>\n    <\/div>\n\n    <div class=\"spacer\"><\/div>\n\n    <div class=\"alert alert-primary\">\n        To build your custom report, drag each field that you want to display from the left side to the right side.  You can drag the fields into the\n        order you want them, as well as drag them back to the left side to remove them from the report.  When you're satisfied, click \"Build Report\".\n    <\/div>\n    <div class=\"row\">\n        <div class=\"col-md-6\">\n            <h3>Available Fields:<\/h3>\n            <div class=\"list-group\" id=\"left\" style=\"min-height: 300px;\">\n                <div class=\"list-group-item\" data-field=\"stamp\">Date<\/div>                <div class=\"list-group-item\" data-field=\"vehicleNumber\">Unit Number<\/div>                <div class=\"list-group-item\" data-field=\"dispensed\">Gallons Dispensed<\/div>                <div class=\"list-group-item\" data-field=\"fuelType\">Fuel Type<\/div>                <div class=\"list-group-item\" data-field=\"ppg\">Price per Gallon<\/div>                <div class=\"list-group-item\" data-field=\"tax\">Tax<\/div>                <div class=\"list-group-item\" data-field=\"tpg\">Total Per Gallon<\/div>                <div class=\"list-group-item\" data-field=\"tc\">Total Cost<\/div>                <div class=\"list-group-item\" data-field=\"city\">City<\/div>                <div class=\"list-group-item\" data-field=\"state\">State<\/div>                <div class=\"list-group-item\" data-field=\"sb\">Serviced By<\/div>            <\/div>\n        <\/div>\n        <div class=\"col-md-6\">\n            <h3>Fields in Report:<\/h3>\n            <div class=\"list-group\" id=\"right\" style=\"min-height: 300px;\">\n                                                                                                                                                                                            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"spacer\"><\/div>\n\n    <div class=\"d-flex justify-content-center\">\n        <button type=\"button\" id=\"buildReport\" class=\"btn btn-danger\">Build Report<\/button>\n    <\/div>\n\n    <input type=\"hidden\" name=\"formFields\" id=\"formFields\" value=\"\" \/>\n\n<\/form>\n\n\n<script>\n    $(document).ready(function() {\n\n        new Sortable(document.querySelector(\"#left\"), {\n            group: \"shared\",\n            animation: 150\n        });\n\n        new Sortable(document.querySelector(\"#right\"), {\n            group: \"shared\",\n            animation: 150\n        });\n\n        $('#buildReport').click(function() {\n            buildReport();\n        });\n\n        $('#reportTable').DataTable({\n            bPaginate: false,\n            dom: 'lBrftip',\n            buttons: ['copy', 'excel', 'pdf'],\n        });\n\n    });\n\n    function buildReport() {\n\n        let selectedFields = $('#right div.list-group-item');\n        if (selectedFields.length === 0) {\n            return;\n        }\n        let fields = [];\n        $.each(selectedFields, function(idx, obj) {\n            let fieldName = $(obj).attr(\"data-field\");\n            fields.push(fieldName);\n        });\n        $('#formFields').val(fields);\n        $('#reportForm').submit();\n\n    }\n\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/pages\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":1,"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/pages\/150\/revisions\/151"}],"wp:attachment":[{"href":"https:\/\/fuelfox.net\/customer\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}