development/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <title>Concert Map</title>
    </head>

    <body>
        <!-- GOOGLE MAP -->
        <div class="map-canvas" data-bind="googlemap: { mapBounds: mapBounds() }"></div>

        <!-- INFO WINDOW CONTENT -->
        <div class="info-window-container" style="display: none;">
            <info-window></info-window>
        </div>

        <menu-toggle params="
            showMenu: showMenu
        "></menu-toggle>

        <!-- EVENT SEARCH -->
        <input class="menu-interface event-search search-box" data-bind="hasFocus: searchBarFocus, textInput: searchInput, css: { open: showMenu() }" placeholder="search concerts">

        <!-- ASK IF USER WANTS LAST.FM ARTIST INFO -->

        <request-all-lastfm params="
            searchBarFocus: searchBarFocus,
            allArtistStatusUpdate: allArtistStatusUpdate
        "></request-all-lastfm>

        <!-- LOCATION SEARCH -->
        <input class="location-search menu-interface search-box" data-bind="value: currentAddress, css: { open: showMenu() }">

        <info-list-toggle params="
            listEvents: listEvents,
            listVenues: listVenues,
            extraInfoBoolean: extraInfoBoolean,
            showEventInfo: showEventInfo,
            showVenueInfo: showVenueInfo,
            showArtistInfo: showArtistInfo
        "></info-list-toggle>

        <div class="menu-interface list-container" data-bind="css: { open: showMenu() }">
            <!-- TODO: no params? seems to be operating from $root/parent context.. -->
            <status-messages></status-messages>

            <!-- EVENT LIST -->
            <concerts-list params="
                mapCenter: mapCenter,
                concerts: concerts,
                concertsStatus: concertsStatus
            "></concerts-list>

            <!-- VENUE LIST -->
            <venues-list params="
                concerts: concerts,
                concertVenues: concertVenues
            "></venues-list>

        </div>

        <!-- EXTRA INFO DISPLAY -->
        <div class="extra-info" data-bind="css: { open: showExtraInfo() }">
            <a class="close-button clickable" data-bind="click: function() { closeExtraInfo(); }">&#10006</a>

            <!-- EVENT INFO -->
            <current-event params="
                currentEvent: currentEvent
            "></current-event>

            <!-- VENUE INFO -->
            <current-venue params="
                currentVenue: currentVenue,
                concertVenues: concertVenues
            "></current-venue>

            <!-- ARTIST INFO -->
            <current-artist params="
                currentArtist: currentArtist,
                selectEvent: selectEvent
            "></current-artist>
        </div>

        <script data-main="js/init" src="js/require.js"></script>
    </body>
</html>