openui5-cards/example4.html at master · elsewhat/openui5-cards · GitHub

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>openui5-cards Search</title>

<!--Standard sapui5 init-->
<script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m,sap.ui.commons"></script>

<!--CSS required by open.m.Card
Needs to be after sapui5 init in order to override styles-->
<link href="openui5-cards.css" type="text/css" rel="stylesheet"/>
<script src="openui5-cards.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>

<style>
/*overwriting title size to smaller value*/
h1.cardTitle1 {
  font-size:1.5rem;
}
.sapMNav{
    overflow:auto;
}
.sapMPageScroll{
    overflow:auto;
}
</style>

<script>
//Get location of user
var position = null;
if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(aPosition){
        position=aPosition;
        jQuery.sap.require("sap.m.MessageToast");
        sap.m.MessageToast.show("Your location has been determined. Now the search will work");
        $.sap.log.error("LAT:"+position.coords.latitude + " LON:"+position.coords.longitude);
    });
}

//Model will be updated after each executed search
var oModel = new sap.ui.model.json.JSONModel();

//CardFactory is used to create a single card based each results from the the search
var cardFactory = function(sId, oContext) {
    var oCard = new open.m.Card(sId)
        .bindProperty("title", oContext.sPath+"/name")
        .bindProperty("subtitle", oContext.sPath+"/vicinity")
        .bindProperty("bodyAddress", oContext.sPath+"/vicinity");


    //add menu
    oCard.setMenu(new sap.m.ActionSheet(sId+"menu1",{
        title: "Options",
        showCancelButton: false,
        placement: sap.m.PlacementType.Bottom,
        buttons: [
            new sap.m.Button({
                icon: "sap-icon://arrow-top",
                text: "+1",
                press: function(){
                    jQuery.sap.require("sap.m.MessageToast");
                    sap.m.MessageToast.show("Not implemented (ie. Left as an exercise for the user)");
                }
            }),
        ]
        }));

    return oCard;
};

//headerCard is always displayed first
var headerCard = new open.m.Card("initialCard",
            {title:"<strong>About</strong>",
            subtitle:"Demonstrates binding to a dynamic JSONModel based on queries (to Google Places API). Usage: Try search for pizza",})


var cardContainer = new open.m.CardContainer("myCardContainer", {
        showSearchField:true,
        SearchFieldPlaceHolderText:"Please search for places nearby",
        minHeight:"40em",
        searchLiveChange:function(oEvent){
            //Handle the search. Called once for each letter
            var searchQuery = oEvent.getParameters().getParameters().newValue;
            $.sap.log.error("Search field live change:" +searchQuery);
            //only look at the search if 4 or more characters
            if(searchQuery!=null && searchQuery.length>=4){
                //if user's location is not known
                if(position==null){
                    cardContainer.setHeaderCard(new open.m.Card(
                            {title:"<strong>Error</strong>",
                            subtitle:"Your location is not found. Accept the request for location determination and try again",})
                    );
                    return;
                }

                //Perform the search and update the model accordingly
                var myLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                //search in 5000meters vicinity
                var request = {
                    location: myLocation,
                    radius: '5000',
                    keyword: searchQuery
                };
                var mapsService = new google.maps.places.PlacesService(document.getElementById("mapsAttribution"));


                cardContainer.triggerCardExitAnimation();
                //Wait 300ms before triggering the search in order to allow the exit animation to be played
                setTimeout(function(){
                    //Perform the search on the exit animation is done
                    mapsService.nearbySearch(request, function (results,status){
                        $.sap.log.error(status+ " "+ results);

                        cardContainer.setHeaderCard(null);

                        if (status == google.maps.places.PlacesServiceStatus.OK) {
                            //model will trigger update of view automatically
                            //the cardFactory used in bindAggregation will be called
                            oModel.setData(results);
                        }else {
                            cardContainer.setHeaderCard(new open.m.Card(
                                {title:"<strong>Error</strong>",
                                subtitle:"Message:" + status,}));
                            oModel.setData(null);
                        }
                    })
                },"300");
            }
        },
        headerCard:headerCard,
        headerImageUrl:"openui5-cards-header-morning.png"
});


//bind to the model (model is initially empty)
cardContainer.setModel(oModel);
cardContainer.bindAggregation("cards","/", cardFactory);

var app = new sap.m.App({initialPage:"openui5-cards"});
app.placeAt("content");


var pageContent = new sap.m.Page("openui5-cards",{title:"GooglePlaces OpenUI5-Cards", showHeader:false, showFooter:false, enableScrolling:false});
pageContent.addContent(cardContainer);
app.addPage(pageContent);

//ugly hack to get voice search
//Believe I need to create my own subclass of sap.m.Input to avoid it
$(document).ready(function() {
    $(".cardSearch > input").attr("x-webkit-speech", "");
})
</script>

</head>
<body class="sapUiBody">
    <div id="content"></div>
    <div id="mapsAttribution"></div>
</body>
</html>