APIs for Librarians

1
2
3
4
5
6
7
8
9
<!--lodash--><script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<!--moment--><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <h3>Today's Hours</h3>
    <p id="todays-date"></p>
    <div class="table-responsive">
      <table class="table table-condensed table-hover" id="hours-grid">
      </table>
    </div>
    <p><a class="more-link" href="http://library.ivytech.edu/indianapolis/hours">See all hours and locations  <i class="fa fa-arrow-right" aria-hidden="true"></i></a></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    #todays-date {
        font-style:italic;
    }
    
    #hours-grid td {
        border-top: none;
    }
    
    #hours-grid .library-location {
        font-size: 18px;
        font-weight: 700;
        padding-left:0;
    }
    
    .table-responsive {
		border:none;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  //====set up date/time variables (moments.js)
    //get today's date
    const date = moment();
    
    //format it so it's in plain english
    //e.g. Thursday, March 30, 2017
    const today = date.format("dddd, MMMM D, YYYY");
    
    //append today's date to empty div
    $('#todays-date').append(today);
    
    //create variable to hold utc-style of today's date (moments.js)
    const utc = date.format("YYYY-MM-DD");
    
    //create variables for calendar address and api key
    const calAddress = "xxxxxxxxxxxxxxxx@group.calendar.google.com";
    const keyAPI = "API KEY";
    
    //inject today's date in YYYY-MM-DD format to the API URL
    //this url returns only the events scheduled for today
    const googleCal = `https://www.googleapis.com/calendar/v3/calendars/${calAddress}/events?singleEvents=true&timeMin=${utc}T01:00:00-04:00&timeMax=${utc}T23:59:59-04:00&key=${keyAPI}`;
    
    //===========MAIN PLUGIN FUNCTION=============
    //takes response data from API (see const response below) and runs it
    const displaySchedule = (data) => {

	//returns an array that holds all calendar data for specific day (lodash.js)
    const libraries = _.filter(response.responseJSON.items);

    	//sorted by reverse alphabetical order (lodash.js)
      const sorted = _.orderBy(libraries, 'summary', 'desc');
    
    //and placed in a table
    let tableHTML = '<tbody>';
     
      //loops through each event in the sorted libraries array/google calendar events (lodash.js)
      _.forEach(sorted, function(library) {
        
        //if there is a dateTime key in the start and end of the calendar event
        if (library.start.dateTime && library.end.dateTime) {
        
            //takes given time string (ISO 8601), parses it to standard format, then returns formatted time (moments.js)
            //e.g. "2017-03-30T21:00:00-04:00" -> "9 pm"
            function timeChanger(time) {
              const getDate = moment.parseZone(time);
              const formatDate = getDate.format("h a");
              return formatDate;
            }
            
            //setting up variables to grab start and end times from the google calendar API
            //put those times through time changer function
            let startTime = timeChanger(library.start.dateTime);
            let endTime = timeChanger(library.end.dateTime);
           
  
            
              //creates table row for each event in the calendar array
              //e.g. | Downtown | 8 am - 9 pm |
             tableHTML += `<tr><td class="library-location">${library.description}</td><td>${startTime} - ${endTime}</td></tr>`;
          
  
        //if there is no description in the event, skip it
          //we occassionally have an employee add an event on accident, but they normally don't include a description; this skips that event
        } else if((library.start.dateTime && library.end.dateTime && !library.description) || !library.description) {
          
          return;
        
        //otherwise, it's closed! (dateTime returns undefined)
        } else {
          
              tableHTML += `<tr><td class="library-location">${library.description}</td><td>Closed</td></li>`;
        }
      }); //end of foreach loop
    
    tableHTML += '</tbody>';
    
    //empty old schedule tbody (may be unnecessary, but you never know) and replace with new tbody
    $('#hours-grid').empty();
    $('#hours-grid').append(tableHTML);
    } //end display schedule function
    
    //google calendar API request call
    const response = $.getJSON(googleCal, displaySchedule);