CINXE.COM
UCSF Recycling & Waste Reduction - Zero Waste App
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http鈥恊quiv="Content鈥怱ecurity鈥怭olicy" content="default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self';"> <meta name="Referrer鈥怭olicy" value="no鈥恟eferrer | same鈥恛rigin"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UCSF Recycling & Waste Reduction - Zero Waste App</title> <link rel="stylesheet" type="text/css" href="inc/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="inc/slick/slick-theme.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" integrity="sha512-hbs/7O+vqWZS49DulqH1n2lVtu63t3c3MTAn0oYMINS5aT8eIAbJGDXgLt6IxDHcWyzVTgf9XyzZ9iWyVQ7mCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- <link rel="stylesheet" href="css/jquery-ui.structure.min.css"> <link rel="stylesheet" href="css/jquery-ui.theme.min.css"> --> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="wrap"> <div id="ucsf-banner-nav"> <div class="top-header-container row"> <ul class="menu"> <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li> </ul> </div> </div><!-- ucsf-banner-nav --> <section id="search-header"> <div id="search-field"> <form id="search-form"> <input type="text" id="search-input" placeholder="Search Items"> <a href="#" id="search-close"><img src="img/search-close.gif" alt="clear search"></a> </form> </div> </section><section id="itemTitle" class="subhead"> <a href="" class="js-goback"><img src="img/left-arrow-white.png" alt="back" /></a> <a href="" id="mobile-menu-toggle"><img src="img/menu-white.png" alt="menu" /></a> <h3>MY STATS</h3> </section> <div id="chart_div"></div> <hr> <div style="padding: 10px;"> <a href="#" id="showhistory">Show History</a><br> <div id="stat_history"></div> </div> <br><br> <section id="sticky-footer"> <div id="footer-nav-tiles" class="clearfix"> <div class="tile"> <a href="index.php" id="tile-home"><img src="img/tile-home.png" alt="home"/> </a> </div> <div class="tile"> <a href="tips.php" id="tile-tips"><img src="img/tile-tips.png" alt="tips"/> </a> </div> <div class="tile"> <a href="knowledge.php" id="tile-testme"><img src="img/tile-testme.png" alt="test me"/> </a> </div> <div class="tile"> <a href="stats.php" id="tile-stats"><img src="img/tile-stats.png" alt="stats"/> </a> </div> </div> </section><section id="modal-menu" class="modal-frame"> <span class="modal-menu-close">×</span> <div class="modal-box"> <ul> <li><a href="browse.php">Browse</a></li> <li><a href="tips.php">Tips</a></li> <li><a href="knowledge.php">Test Knowledge</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="about.php">About</a></li> </ul> </div> </section> <section id="modal-success" class="modal-frame"> <span class="modal-success-close">×</span> <div class="modal-box"> <h3>Good Job!</h3> <a href="" class="modal-success-close2"><img src="img/checkmark.png" alt="checkmark"></a> <p>Thanks for doing your part.</p> </div> </section> <section id="modal-congrats" class="modal-frame"> <span class="modal-congrats-close">×</span> <div class="modal-box"> <h3></h3> <a href="" class="modal-congrats-close2"><img src="img/checkmark.png" alt="checkmark"></a> </div> </section> <section id="modal-share" class="modal-frame"> <span class="modal-share-close">×</span> <div class="modal-box"> <ul> <li><a href="" onclick="shareFacebook();">Facebook</a></li> <li><a href="" onclick="shareTwitter();">Twitter</a></li> <li><a href="" onclick="shareGoogle();">Google Plus</a></li> <li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a></li> <li><a href="https://www.snapchat.com/" target="_blank" rel="noopener noreferrer">SnapChat</a></li> </ul> </div> </section> <script> //=============================== // close modal menus var modalmenu = document.getElementById('modal-menu'); var modalmenuclose = document.getElementsByClassName("modal-menu-close")[0]; modalmenuclose.onclick = function() { modalmenu.style.display = "none"; } //===================== var modalshare = document.getElementById('modal-share'); var modalshareclose = document.getElementsByClassName("modal-share-close")[0]; modalshareclose.onclick = function() { modalshare.style.display = "none"; } //======================== var modalsuccess = document.getElementById('modal-success'); var modalsuccessclose = document.getElementsByClassName("modal-success-close")[0]; var modalsuccessclose2 = document.getElementsByClassName("modal-success-close2")[0]; modalsuccessclose.onclick = modalsuccessclose2.onclick = function(e) { e.preventDefault(); modalsuccess.style.display = "none"; } //======================== // moved to knowledge.js /* var modalcongrats = document.getElementById('modal-congrats'); var modalcongratsclose = document.getElementsByClassName("modal-congrats-close")[0]; var modalcongratsclose2 = document.getElementsByClassName("modal-congrats-close2")[0]; modalcongratsclose.onclick = modalcongratsclose2.onclick = function() { modalcongrats.style.display = "none"; } */ //===================== // Close modal when the user clicks anywhere outside of the modal window.onclick = function(event) { if (event.target == modalshare || event.target == modalmenu || event.target == modalsuccess ) { modalshare.style.display = "none"; modalmenu.style.display = "none"; modalsuccess.style.display = "none"; } } //======================= // share Socials function shareTwitter() { window.open('https://twitter.com/intent/tweet?url=' + window.location.href,'_blank'); } function shareFacebook() { window.open('https://www.facebook.com/sharer/sharer.php?u=' + window.location.href,'_blank'); } function shareGoogle() { window.open('https://plus.google.com/share?url=' + window.location.href,'_blank'); } </script></div><!-- wrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="inc/slick/slick.min.js"></script> <script src="js/moment.js"></script> <script src="js/main.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-88600128-1', 'auto'); ga('send', 'pageview'); </script> <script src="js/search.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var zeroWasteActions = []; function populateStatHistory() { // get zerowasteactions from local storage var zerowasteactions_string = localStorage.getItem("zerowasteactions"); if ( zerowasteactions_string ) { // reconstitute the actions array zeroWasteActions = JSON.parse(zerowasteactions_string); // remove item older than 30 days var cutoff = moment().subtract(31, 'days').unix(); zeroWasteActions = zeroWasteActions.filter(function(obj) { if ( obj.recordTimestamp > cutoff ) { return true; } else { return false; } // return true to keep }); // resave to local storage after filtering localStorage.setItem("zerowasteactions", JSON.stringify(zeroWasteActions)); } else { // nothing in local storage zeroWasteActions = []; } if ( zeroWasteActions.length === 0 ) { $('#stat_history').append('No history yet.'); } else { zeroWasteActions.map(function(obj) { var message = obj.recordAction + ": " + obj.recordItem + " on " + moment.unix(obj.recordTimestamp).format('MMMM Do YYYY @ h:mm:ss a'); $('#stat_history').append(message + '<br>'); }); } } // end populateStatHistory // show history on click $('#showhistory').click(function(e) { e.preventDefault(); $('#stat_history').show(); }); $('#stat_history').hide(); // hide history initially populateStatHistory(); // history now at 'zeroWasteActions' // google chart google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawMultSeries); function drawMultSeries() { // arrays to keep track of the count (of recycled/composted) for each 30 days // zero out the num recycled and composted for each of the 30 days var numRecycledZ = []; var numCompostedZ = []; var numGarbageZ = []; var numSpecialZ = []; for ( var i=0; i<=29; i++ ) { numRecycledZ[i] = numCompostedZ[i] = numGarbageZ[i] = numSpecialZ[i] =0; } // for each action in local storage zeroWasteActions.forEach(function(entry) { // we have ... // entry.recordAction // entry.recordItem // entry.recordTimestamp var momentRecorded = moment.unix(entry.recordTimestamp); for ( var j=0; j<=29; j++ ) { // recorded action fell on day-j if ( momentRecorded.isSame(moment().subtract(j, 'days'), 'day') ) { // incrment the count for that day if ( entry.recordAction === 'Recycle' ) { numRecycledZ[j]++; } else if ( entry.recordAction === 'Compost' ) { numCompostedZ[j]++; } else if ( entry.recordAction === 'Garbage' ) { numGarbageZ[j]++; } else if ( entry.recordAction === 'Special' ) { numSpecialZ[j]++; } } } }); // configure chart var data = new google.visualization.DataTable(); data.addColumn('date', 'Day'); data.addColumn('number', 'Recycled'); data.addColumn('number', 'Composted'); data.addColumn('number', 'Garbage'); data.addColumn('number', 'Special'); /* date, recycled, composted */ data.addRows([ [moment().subtract(29, 'days').toDate(), numRecycledZ[29], numCompostedZ[29], numGarbageZ[29], numSpecialZ[29]], [moment().subtract(28, 'days').toDate(), numRecycledZ[28], numCompostedZ[28], numGarbageZ[28], numSpecialZ[28]], [moment().subtract(27, 'days').toDate(), numRecycledZ[27], numCompostedZ[27], numGarbageZ[27], numSpecialZ[27]], [moment().subtract(26, 'days').toDate(), numRecycledZ[26], numCompostedZ[26], numGarbageZ[26], numSpecialZ[26]], [moment().subtract(25, 'days').toDate(), numRecycledZ[25], numCompostedZ[25], numGarbageZ[25], numSpecialZ[25]], [moment().subtract(24, 'days').toDate(), numRecycledZ[24], numCompostedZ[24], numGarbageZ[24], numSpecialZ[24]], [moment().subtract(23, 'days').toDate(), numRecycledZ[23], numCompostedZ[23], numGarbageZ[23], numSpecialZ[23]], [moment().subtract(22, 'days').toDate(), numRecycledZ[22], numCompostedZ[22], numGarbageZ[22], numSpecialZ[22]], [moment().subtract(21, 'days').toDate(), numRecycledZ[21], numCompostedZ[21], numGarbageZ[21], numSpecialZ[21]], [moment().subtract(20, 'days').toDate(), numRecycledZ[20], numCompostedZ[20], numGarbageZ[20], numSpecialZ[20]], [moment().subtract(19, 'days').toDate(), numRecycledZ[19], numCompostedZ[19], numGarbageZ[19], numSpecialZ[19]], [moment().subtract(18, 'days').toDate(), numRecycledZ[18], numCompostedZ[18], numGarbageZ[18], numSpecialZ[18]], [moment().subtract(17, 'days').toDate(), numRecycledZ[17], numCompostedZ[17], numGarbageZ[17], numSpecialZ[17]], [moment().subtract(16, 'days').toDate(), numRecycledZ[16], numCompostedZ[16], numGarbageZ[16], numSpecialZ[16]], [moment().subtract(15, 'days').toDate(), numRecycledZ[15], numCompostedZ[15], numGarbageZ[15], numSpecialZ[15]], [moment().subtract(14, 'days').toDate(), numRecycledZ[14], numCompostedZ[14], numGarbageZ[14], numSpecialZ[14]], [moment().subtract(13, 'days').toDate(), numRecycledZ[13], numCompostedZ[13], numGarbageZ[13], numSpecialZ[13]], [moment().subtract(12, 'days').toDate(), numRecycledZ[12], numCompostedZ[12], numGarbageZ[12], numSpecialZ[12]], [moment().subtract(11, 'days').toDate(), numRecycledZ[11], numCompostedZ[11], numGarbageZ[11], numSpecialZ[11]], [moment().subtract(10, 'days').toDate(), numRecycledZ[10], numCompostedZ[10], numGarbageZ[10], numSpecialZ[10]], [moment().subtract(9, 'days').toDate(), numRecycledZ[9], numCompostedZ[9], numGarbageZ[9], numSpecialZ[9]], [moment().subtract(8, 'days').toDate(), numRecycledZ[8], numCompostedZ[8], numGarbageZ[8], numSpecialZ[8]], [moment().subtract(7, 'days').toDate(), numRecycledZ[7], numCompostedZ[7], numGarbageZ[7], numSpecialZ[7]], [moment().subtract(6, 'days').toDate(), numRecycledZ[6], numCompostedZ[6], numGarbageZ[6], numSpecialZ[6]], [moment().subtract(5, 'days').toDate(), numRecycledZ[5], numCompostedZ[5], numGarbageZ[5], numSpecialZ[5]], [moment().subtract(4, 'days').toDate(), numRecycledZ[4], numCompostedZ[4], numGarbageZ[4], numSpecialZ[4]], [moment().subtract(3, 'days').toDate(), numRecycledZ[3], numCompostedZ[3], numGarbageZ[3], numSpecialZ[3]], [moment().subtract(2, 'days').toDate(), numRecycledZ[2], numCompostedZ[2], numGarbageZ[2], numSpecialZ[2]], [moment().subtract(1, 'days').toDate(), numRecycledZ[1], numCompostedZ[1], numGarbageZ[1], numSpecialZ[1]], [moment().toDate(), numRecycledZ[0], numCompostedZ[0], numGarbageZ[0], numSpecialZ[0]] ]); var options = { legend: 'top', colors: ['#178BCA', '#90BC30', '#000000', '#716fb2'], hAxis: { title: 'Last 30 Days', format: 'MMM d' }, vAxis: { title: '# of times' } }; var chart = new google.visualization.ColumnChart( document.getElementById('chart_div')); chart.draw(data, options); } </script> <!-- chart end --> </body> </html>