Commits

Dejan Noveski committed 094d024

Added classified detail page, map, phones with links, fixed some of the async racing conditions etc

  • Participants
  • Parent commits 3815377

Comments (0)

Files changed (3)

File AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="me.oglasuva.mobile"
     android:versionCode="1"
-    android:versionName="1.0" >
+    android:versionName="0.3" >
 	
     <supports-screens
 	android:largeScreens="true"

File assets/www/index.html

         <script src="jquery.min.js"></script>
         <script src="jquery.mobile.min.js"></script>
         <script src="cordova-1.5.0.js"></script>
+        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script src="main.js"></script>
     </head>
     <body>
 
         
         <div data-role="page" id="filter">
-        	<div data-role="header" data-position="fixed" data-id="foo1" data-theme="a">
+        	<div data-role="header" data-theme="a">
 	            <h3>
 	                Пребарај
 	            </h3>
             </div>
         </div>
         
+        <div data-role="page" id="details">
+        	<div data-role="header" data-theme="a">
+	            <h3>
+	                
+	            </h3>
+	        </div>
+            <div data-role="content" data-theme="a">
+            	<h3></h3>
+            	<p class="details-content"></p>
+            	<p>
+            		<b class="details-purpose"></b><br/>
+            		<b class="details-category"></b><br/>
+            		<b class="details-region"></b><br/>
+            		<b class="details-price"></b><br/><br/>
+            		<b class="details-contact-name"></b><br/>
+            		<b class="details-contact-home-phone"></b><br/>
+            		<b class="details-contact-mobile-phone"></b><br/>
+            	</p>
+            	<div id="details-map" style="width:100%;height:10em;"></div>
+            </div>
+        </div>
+        
         
     </body>
 </html>

File assets/www/main.js

-var chosen_region = "";
-var chosen_category = "";
-var search_query = "";
-var current_page = 0;
-var purpose = "";
+var OglSettings = {
+	chosen_region: "",
+	chosen_category: "",
+	search_query: "",
+	current_page: 0,
+	purpose: ""
+}
+
 
 var API_URL = "http://oglasuva.me/api/";
 
     $.mobile.allowCrossDomainPages = true;
     $.support.cors = true;
     $.mobile.defaultPageTransition = 'none';
-    $.ajaxSetup({timeout: 10000});
+    $.ajaxSetup({timeout: 10000, async: false, cache:false});
 	checkConnection();
 }
 
 	if($("#region-select option").length<=1){
 		$.get(API_URL + "regions.json", function(data){
 			$.each(data, function(idx, em){
-				var opt = $('<option value="'+em.id.toString()+'">'+em.name+'</option>');
+				var opt = $('<option value="'+em.id+'">'+em.name+'</option>');
 				$(opt).appendTo("#region-select");
 			});
 		}, "json");
 		async: false,
 		timeout: 5000,
 		url:API_URL + "classifieds.json",
-		dataType: "json",		
+		dataType: "json",
+		
 		data: {
-			region: chosen_region, 
-			category: chosen_category, 
-			q: search_query, 
-			page: current_page, 
-			purpose: purpose
+			region: OglSettings.chosen_region, 
+			category: OglSettings.chosen_category, 
+			q: OglSettings.search_query, 
+			page: OglSettings.current_page, 
+			purpose: OglSettings.purpose
 		},
 		
 		success: function(data){
 				
 			if($(data).length>0){
-				$("#classifieds-listview").html("");
+				if(OglSettings.current_page==0)
+					$("#classifieds-listview").html("");
 				$.each(data, function(idx, em){
-					var li = $('<li data-theme="a"><a href="#details" data-icon="plus">'+em.title.toLowerCase()+'</a></li>');
-					$(li).appendTo("#classifieds-listview");				
+					var li = $('<li data-theme="a">\
+							<a href="#" data-icon="plus"><h3>'+em.title.toLowerCase()+'</h3>\
+							<p>'+formatElementContent(em)+'</p></a></li>');
+
+					if($("#more-btn").length>0){
+						$(li).insertAfter("#classifieds-listview li:not(.more-btn):last");
+					}
+					else{
+						$(li).appendTo("#classifieds-listview");
+					}
+					
+					$(li).tap(function(){fetchDetails(em.id);});
 				});
-				if($(data).length>=15){
-					var li = $('<li data-theme="b"><a id="more-btn" href="#details">Следни Огласи</a></li>');
-					$(li).appendTo("#classifieds-listview");	
+				if($(data).length>=15 && $("#more-btn").length==0){
+					var li = $('<li data-theme="b" class="more-btn"><a id="more-btn" href="#details">Следни Огласи</a></li>');
+					$(li).appendTo("#classifieds-listview");
 				}
 				$("#classifieds-listview").listview('refresh');				
-				current_page += 1;				
+				OglSettings.current_page += 1;				
 			}
 			else{
-				if(current_page == 0)
+				if(OglSettings.current_page == 0)
 					alert('Не е пронајден ни еден оглас.');				
 				else
 					alert('Нема следни огласи.');							
 		}, 
 		
 		error: function(jqXHR, textStatus){
-			$.mobile.hidePageLoadingMsg();
+			$.mobile.hidePageLoadingMsg();			
 			alert('Проблем со конекција. Пробајте повторно.');				
 		}
 	});
 
 function formatElementContent(em){
 	var content = "";
-	content += "<b>"+ em.category.name +"</b><br/>";
-	content += "<b>"+em.purpose.name+" во "+ em.region.name+"</b><br/>";
-	
+	content += "<b>"+ em.category.name +"</b> | ";
+	content += "<b>"+em.purpose.name+" во "+ em.region.name+"</b>";
    	if(em.price)
-   		content += "<b>Цена:</b> "+em.price+" "+em.currency + "<br/>";
-   	content += em.content;
-   	
+   		content += " | <b>Цена:</b> "+em.price+" "+em.currency + "<br/>";
    	return content
 }
 
+function fetchDetails(id){
+	$.ajax({
+			url: API_URL + "details/"+id+".json",
+			cache: false,
+			async: false,
+			success: function(data,tm,jq){
+				$('#details h3').html(data.title);
+				$('#details .details-content').html(data.content);
+				$('#details .details-category').html(data.category.name);
+				$('#details .details-purpose').html(data.purpose.name);
+				$('#details .details-region').html(data.region.name);
+				if(data.price)
+					$('#details .details-price').html("Цена: "+data.price+" "+data.currency);
+				else
+					$('#details .details-price').html("");
+				$('#details .details-contact-name').html(data.contact_person_name);
+				
+				if(data.home_phone)
+					$('#details .details-contact-home-phone').html('<a href="tel:'+data.home_phone+'">'+data.home_phone+'</a>');
+				else
+					$('#details .details-contact-home-phone').html("");
+				
+				if(data.mobile_phone)
+					$('#details .details-contact-mobile-phone').html('<a href="tel:'+data.mobile_phone+'">'+data.mobile_phone+'</a>');
+				else
+					$('#details .details-contact-mobile-phone').html("");
+				
+				if(data.location_lon){
+					$("#details-map").css("width","100%");
+					$("#details-map").css("height","10em");
+					var latitude = data.location_lat;
+			        var longitude = data.location_lon;
+			        var initialLocation = new google.maps.LatLng(latitude, longitude);
+			        var myOptions = {
+			            zoom: 12, 
+			            center: initialLocation, 
+			            mapTypeId: google.maps.MapTypeId.ROADMAP
+			        };
+			        var map = new google.maps.Map(document.getElementById("details-map"), 
+			                                      myOptions);
+			        var marker = new google.maps.Marker({
+			            position: initialLocation,
+			            map: map,
+			            title:data.title
+			        });
+			        google.maps.event.trigger(map, 'resize');
+				}
+				else{
+					$("#details-map").css("width","100%");
+					$("#details-map").css("height","0em");
+					$("#details-map").html("");
+				}
+				$.mobile.changePage('#details', {transition: 'none', role: 'dialog'});
+			}, 
+			dataType: "json",
+			error: function(jqm, text){
+				alert('Проблем со конекција. Пробајте повторно.');
+			}
+	});
+}
+
 $("#classifieds").live('pageinit', function(e){
 	loadClassifieds();
 	
 	$("#filter-button").tap(function(e){
 		e.preventDefault();
-		search_query = $("#q").val();
-		purpose = $("#purpose").val();
-		chosen_category = $("#category-select").val();
-		chosen_region = $("#region-select").val();
-		current_page = 0;
+		OglSettings.search_query = $("#q").val();
+		OglSettings.purpose = $("#purpose").val();
+		OglSettings.chosen_category = $("#category-select").val();
+		OglSettings.chosen_region = $("#region-select").val();
+		OglSettings.current_page = 0;
 		loadClassifieds(function(){$.mobile.changePage("#classifieds");});
 	});
 	
 	$("#more-btn").live("tap", function(e){
 		e.preventDefault();
-		loadClassifieds(function(){$.mobile.silentScroll(0);});
+		var t = $(this).offset().top;
+		loadClassifieds(function(){$.mobile.silentScroll(t)});
 	});
 	
 	$("#close-app").live("tap", function(e){