First level of ratings and reviews

This commit is contained in:
Eric Reed 2013-11-07 12:27:05 -05:00
parent 7614d695d9
commit 75b5f25694
7 changed files with 203 additions and 7 deletions

View File

@ -3569,6 +3569,16 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
url: url url: url
}); });
}; };
self.createPackageReview = function(review) {
var url = self.getUrl("PackageReviews/" + review.id, review);
return self.ajax({
type: "POST",
url: url,
});
};
} }
}(jQuery, navigator, window.JSON, window.WebSocket, setTimeout, window); }(jQuery, navigator, window.JSON, window.WebSocket, setTimeout, window);

File diff suppressed because one or more lines are too long

View File

@ -36,6 +36,18 @@
border: 0; border: 0;
} }
.posterItemStoreText {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
text-wrap: none;
white-space: nowrap;
text-shadow: none;
}
.posterItemText { .posterItemText {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -71,6 +83,20 @@
height: 150px; height: 150px;
} }
.storeItem {
width: 270px;
display: inline-block;
margin: 10px;
}
.storePosterItem {
width: 270px;
}
.storePosterItem .posterItemImage {
height: 150px;
}
.backdropPosterItem { .backdropPosterItem {
width: 160px; width: 160px;
} }

View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Plugins</title> <title>Plugins</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage"> <div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage">

View File

@ -47,6 +47,28 @@
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
function getRatingHtml(rating, id, name) {
var html = "<div style='margin-left: 5px; margin-right: 5px; display: inline-block'>";
if (!rating) rating = 0;
for (var i = 1; i <= 5; i++) {
html += "<a href='#' data-id=" + id + " data-name='" + name + "' data-rating=" + i + " onclick='Dashboard.ratePackage(this);' >";
if (rating < i - 1 || rating == 0) {
html += "<div class='storeStarRating emptyStarRating' title='Rate " + i + " stars'></div>";
} else if (rating < i) {
html += "<div class='storeStarRating halfStarRating' title='Rate " + i + " stars'></div>";
} else {
html += "<div class='storeStarRating' title='Rate " + i + " stars'></div>";
}
html += "</a>";
}
html += "</div>";
return html;
}
function populateList(page, availablePlugins, installedPlugins) { function populateList(page, availablePlugins, installedPlugins) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
@ -79,7 +101,7 @@
var href = plugin.externalUrl ? plugin.externalUrl : "addPlugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid; var href = plugin.externalUrl ? plugin.externalUrl : "addPlugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
var target = plugin.externalUrl ? ' target="_blank"' : ''; var target = plugin.externalUrl ? ' target="_blank"' : '';
html += "<a class='posterItem backdropPosterItem transparentPosterItem borderlessPosterItem' href='" + href + "' " + target + ">"; html += "<div class='storeItem'><a class='posterItem storePosterItem borderlessPosterItem' style='background: #D4D4D4!important' href='" + href + "' " + target + ">";
if (plugin.thumbImage) { if (plugin.thumbImage) {
html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');background-size:cover;"></div>'; html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');background-size:cover;"></div>';
@ -95,9 +117,9 @@
} }
} }
var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name); html += "</a>";
html += "<div class='posterItemText posterItemTextCentered' style='background:" + color + "'>"; html += "<div class='posterItemStoreText' style='font-size: 18px!important; font-weight: bold'>";
var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) { var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
return ip.Name == plugin.name; return ip.Name == plugin.name;
@ -108,10 +130,20 @@
} else { } else {
html += plugin.name; html += plugin.name;
} }
html += "</div>"; html += "</div>";
html += "</a>"; html += "<div class='posterItemStoreText' >";
html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : "Free";
html += getRatingHtml(plugin.avgRating, plugin.id, plugin.name);
html += " " + plugin.totalRatings + " Reviews";
if (plugin.isPremium && plugin.isRegistered) {
html += "<span title='You are registered for this feature' style='cursor: default'> &reg;</span>";
}
html += "</div>";
html += "</div>";
pluginhtml += html; pluginhtml += html;
@ -126,7 +158,6 @@
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
} }
$(document).on('pageinit', "#pluginCatalogPage", function () { $(document).on('pageinit', "#pluginCatalogPage", function () {
var page = this; var page = this;

View File

@ -0,0 +1,98 @@
(function (window, document, $) {
window.RatingDialog = function (page) {
var self = this;
self.show = function (options) {
options = options || {};
options.header = options.header || "Rate and Review";
var html = '<div data-role="popup" id="popupRatingDialog" class="ui-corner-all popup" style="min-width:400px;" data-dismissible="false">';
html += '<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">';
html += '<h3>' + options.header + '</h3>';
html += '</div>';
html += '<div data-role="content" class="ui-corner-bottom ui-content">';
html += '<form>';
html += '<div style="margin:0;">';
html += '<label for="txtRatingDialogRating" >Your Rating:</label>';
html += '<input id="txtRatingDialogRating" name="rating" type="number" required="required" min=0 max=5 step=1 value=' + options.rating + ' />';
html += '<label for="txtRatingDialogTitle" >Short Overall Rating Description:</label>';
html += '<input id="txtRatingDialogTitle" name="title" type="text" maxlength=160 />';
html += '<label for="txtRatingDialogRecommend" >I recommend this item</label>';
html += '<input id="txtRatingDialogRecommend" name="recommend" type="checkbox" checked />';
html += '<label for="txtRatingDialogReview" >Full Review</label>';
html += '<textarea id="txtRatingDialogReview" name="review" rows=8 style="height:inherit" ></textarea>';
html += '</div>';
html += '<p>';
html += '<button type="submit" data-theme="b" data-icon="ok">OK</button>';
html += '<button type="button" data-icon="delete" onclick="$(this).parents(\'.popup\').popup(\'close\');">Cancel</button>';
html += '</p>';
html += '<p id="errorMsg" style="display:none; color:red; font-weight:bold">';
html += '</p>';
html += '</form>';
html += '</div>';
html += '</div>';
$(page).append(html);
var popup = $('#popupRatingDialog').popup().trigger('create').on("popupafteropen", function() {
$('#txtRatingDialogTitle', this).focus();
}).popup("open").on("popupafterclose", function() {
$('form', this).off("submit");
$(this).off("popupafterclose").remove();
});
$('form', popup).on('submit', function () {
if (options.callback) {
var review = {
id: options.id,
rating: $('#txtRatingDialogRating', this).val(),
title: $('#txtRatingDialogTitle', this).val(),
recommend: $('#txtRatingDialogRecommend', this).checked(),
review: $('#txtRatingDialogReview', this).val(),
};
if (review.rating < 3) {
if (!review.title) {
$('#errorMsg', this).html("Please give reason for low rating").show();
$('#txtRatingDialogTitle', this).focus();
return false;
}
}
if (!review.recommend) {
if (!review.title) {
$('#errorMsg', this).html("Please give reason for not recommending").show();
$('#txtRatingDialogTitle', this).focus();
return false;
}
}
options.callback(review);
} else console.log("No callback function provided");
return false;
});
};
self.close = function () {
$('#popupRatingDialog', page).popup("close");
};
};
})(window, document, jQuery);

View File

@ -1120,7 +1120,25 @@ var Dashboard = {
parts.push(seconds); parts.push(seconds);
return parts.join(':'); return parts.join(':');
} },
ratePackage: function(link) {
var id = link.getAttribute('data-id');
var name = link.getAttribute('data-name');
var rating = link.getAttribute('data-rating');
var dialog = new RatingDialog($.mobile.activePage);
dialog.show({ header: "Rate and review " + name, id: id, rating: rating, callback: function(review) {
console.log(review);
dialog.close();
ApiClient.createPackageReview(review).done(function() {
Dashboard.alert("Thank you for your review");
});
} });
}
}; };
if (!window.WebSocket) { if (!window.WebSocket) {