From 49af0a0d818e6e977e725f0cc41f4df4a68c6ee4 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 5 May 2013 21:15:48 -0400
Subject: [PATCH] added stub page to edit metatada for an item

---
 dashboard-ui/edititemimages.html         |  26 ++-
 dashboard-ui/edititemmetadata.html       | 109 +++++++++++
 dashboard-ui/itemdetails.html            |   2 +-
 dashboard-ui/scripts/Itemdetailpage.js   |   6 +-
 dashboard-ui/scripts/edititemmetadata.js | 228 +++++++++++++++++++++++
 dashboard-ui/scripts/itemlistpage.js     |   2 +-
 dashboard-ui/scripts/musicartists.js     |   5 +-
 7 files changed, 361 insertions(+), 17 deletions(-)
 create mode 100644 dashboard-ui/edititemmetadata.html
 create mode 100644 dashboard-ui/scripts/edititemmetadata.js
diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html
index ecbad83485..dec41454a2 100644
--- a/dashboard-ui/edititemimages.html
+++ b/dashboard-ui/edititemimages.html
@@ -13,29 +13,35 @@
                 <h1 id="itemName" class="detailPageName"></h1>
                 <br />
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="#" data-role="button">Metadata</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititemmetadata.html', true);">Metadata</a>
                     <a href="#" data-role="button" class="ui-btn-active">Images</a>
                 </div>
 
-                <div style="text-align: center; margin-top: -20px;">
+                <div style="text-align: center; margin: -25px 0 1em;">
                     <a href="#popupUpload" data-rel="popup" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload Image</a>
                 </div>
 
                 <div id="imagesContainer" style="display: none;">
-                    <h3 style="margin-top: 0;">Images</h3>
-                    <div id="images">
+                    <div data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Images</h3>
+                        <div id="images">
+                        </div>
                     </div>
                 </div>
 
                 <div id="backdropsContainer" style="display: none;">
-                    <h3>Backdrops</h3>
-                    <div id="backdrops">
+                    <div data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Backdrops</h3>
+                        <div id="backdrops">
+                        </div>
                     </div>
                 </div>
 
                 <div id="screenshotsContainer" style="display: none;">
-                    <h3>Screenshots</h3>
-                    <div id="screenshots">
+                    <div data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Screenshots</h3>
+                        <div id="screenshots">
+                        </div>
                     </div>
                 </div>
 
@@ -43,7 +49,7 @@
         </div>
 
         <div data-role="popup" id="popupUpload" class="ui-corner-all" data-theme="c">
-            <form style="max-width: 100%; margin: 0 1.5em 1.5em;">
+            <form id="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
                 <h2>Add/Update Image</h2>
                 <div>
                     <p>JPG/PNG only.</p>
@@ -78,7 +84,7 @@
         </div>
 
         <script type="text/javascript">
-            $('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
+            $('#uploadItemImageForm').on('submit', EditItemImagesPage.onSubmit);
         </script>
 
     </div>
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
new file mode 100644
index 0000000000..9391925fb0
--- /dev/null
+++ b/dashboard-ui/edititemmetadata.html
@@ -0,0 +1,109 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="editItemMetadataPage" data-role="page" class="page libraryPage" data-theme="a">
+        <div data-role="content">
+
+            <div class="ehsContent">
+                <h1 id="grandParentName" class="detailPageName hide"></h1>
+                <h1 id="parentName" class="detailPageName hide"></h1>
+                <h1 id="itemName" class="detailPageName"></h1>
+                <br />
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                    <a href="#" data-role="button" class="ui-btn-active">Metadata</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititemimages.html', true);">Images</a>
+                </div>
+
+                <form id="editItemMetadataForm" style="max-width: 100%; font-size: 14px;">
+                    <div data-role="fieldcontain">
+                        <label for="txtName">Name:</label>
+                        <input type="text" id="txtName" name="txtName" required="required" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtSortName">Sort name:</label>
+                        <input type="text" id="txtSortName" name="txtSortName" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtDisplayMediaType">Display media type:</label>
+                        <input type="text" id="txtDisplayMediaType" name="txtDisplayMediaType" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
+                        <label id="lblParentIndexNumber" for="txtParentIndexNumber">Parent number:</label>
+                        <input type="number" id="txtParentIndexNumber" name="txtParentIndexNumber" data-mini="true" pattern="[0-9]*" />
+                    </div>
+                    <div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
+                        <label id="lblIndexNumber" for="txtIndexNumber">Number:</label>
+                        <input type="number" id="txtIndexNumber" name="txtIndexNumber" data-mini="true" pattern="[0-9]*" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtCommunityRating">Community rating (0-10):</label>
+                        <input type="number" id="txtCommunityRating" name="txtCommunityRating" step=".1" data-mini="true" min="0" max="10" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtCriticRating">Critic rating (0-10):</label>
+                        <input type="number" id="txtCriticRating" name="txtCriticRating" step=".1" data-mini="true" min="0" max="10" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtCriticRatingSummary">Critic rating summary:</label>
+                        <input type="text" id="txtCriticRatingSummary" name="txtCriticRatingSummary" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtHomePageUrl">Website:</label>
+                        <input type="url" id="txtHomePageUrl" name="txtHomePageUrl" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtPremiereDate">Release date:</label>
+                        <input type="date" id="txtPremiereDate" name="txtPremiereDate" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain" id="fldEndDate" style="display: none;">
+                        <label for="txtEndDate">End date:</label>
+                        <input type="date" id="txtEndDate" name="txtEndDate" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="txtProductionYear">Year:</label>
+                        <input type="number" id="txtProductionYear" name="txtProductionYear" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="selectOfficialRating">Official rating:</label>
+                        <select name="selectOfficialRating" id="selectOfficialRating" data-mini="true"></select>
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="selectCustomRating">Custom rating:</label>
+                        <select name="selectCustomRating" id="selectCustomRating" data-mini="true"></select>
+                    </div>
+                    <div data-role="fieldcontain" id="fldBudget" style="display: none;">
+                        <label for="txtBudget">Budget:</label>
+                        <input type="number" id="txtBudget" name="txtBudget" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain" id="fldRevenue" style="display: none;">
+                        <label for="txtRevenue">Revenue:</label>
+                        <input type="number" id="txtRevenue" name="txtRevenue" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
+                        <label for="txtOriginalAspectRatio">Original aspect ratio:</label>
+                        <input type="text" id="txtOriginalAspectRatio" name="txtOriginalAspectRatio" data-mini="true" />
+                    </div>
+                    <div data-role="fieldcontain">
+                        <label for="selectLanguage">Original language:</label>
+                        <select name="selectLanguage" id="selectLanguage" data-mini="true"></select>
+                    </div>
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <button type="submit" data-theme="b" data-icon="ok">
+                                Save
+                            </button>
+                        </li>
+                    </ul>
+                </form>
+            </div>
+        </div>
+        <script type="text/javascript">
+            $('#editItemMetadataForm').on('submit', EditItemMetadataPage.onSubmit);
+        </script>
+
+    </div>
+</body>
+</html>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index a167e7f492..1689206eaa 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -133,7 +133,7 @@
                 </div>
                 <div id="itemSongs"></div>
                 <div style="vertical-align: top;">
-                    <div data-role="collapsible" id="childrenCollapsible" class="hide" data-mini="true" data-collapsed="false" data-corners="false" data-inset="fa">
+                    <div data-role="collapsible" id="childrenCollapsible" class="hide" data-mini="true" data-collapsed="false" data-corners="false">
                         <h3><span id="childrenTitle" class="collapsibleTitle"></span></h3>
                         <div id="childrenContent"></div>
                     </div>
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index 996581b2a2..fbcd4f090c 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -398,13 +398,13 @@
                 html += '<li><span class="mediaInfoLabel">Aspect Ratio: </span> ' + stream.AspectRatio + '</li>';
             }
             if (stream.BitRate) {
-                html += '<li><span class="mediaInfoLabel">Bitrate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.BitRate + '</span></li>';
+                html += '<li><span class="mediaInfoLabel">Bitrate: </span> <span class="autoNumeric" data-a-pad="false">' + (parseInt(stream.BitRate / 1000)) + ' kbps</span></li>';
             }
             if (stream.Channels) {
                 html += '<li><span class="mediaInfoLabel">Channels: </span> ' + stream.Channels + '</li>';
             }
             if (stream.SampleRate) {
-                html += '<li><span class="mediaInfoLabel">Sample Rate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.SampleRate + '</span></li>';
+                html += '<li><span class="mediaInfoLabel">Sample Rate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.SampleRate + ' khz</span></li>';
             }
 
             var framerate = stream.AverageFrameRate || stream.RealFrameRate;
@@ -541,7 +541,7 @@
 
         $('#btnEdit', page).on('click', function () {
 
-            Dashboard.navigate("edititemimages.html?id=" + currentItem.Id);
+            Dashboard.navigate("edititemmetadata.html?id=" + currentItem.Id);
         });
 
     }).on('pageshow', "#itemDetailPage", function () {
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
new file mode 100644
index 0000000000..235c93b8fa
--- /dev/null
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -0,0 +1,228 @@
+﻿(function ($, document, window) {
+
+    var currentItem;
+
+    function reload(page) {
+
+        var id = getParameterByName('id');
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+            currentItem = item;
+
+            LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page), true);
+
+            setFieldVisibilities(page, item);
+            fillItemInfo(page, item);
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function setFieldVisibilities(page, item) {
+        if (item.Type == "Series" || item.Type == "Person") {
+            $('#fldEndDate', page).show();
+        } else {
+            $('#fldEndDate', page).hide();
+        }
+
+        if (item.Type == "Movie" || item.MediaType == "Game") {
+            $('#fldBudget', page).show();
+            $('#fldRevenue', page).show();
+        } else {
+            $('#fldBudget', page).hide();
+            $('#fldRevenue', page).hide();
+        }
+
+        if (item.MediaType == "Video") {
+            $('#fldOriginalAspectRatio', page).show();
+        } else {
+            $('#fldOriginalAspectRatio', page).hide();
+        }
+
+        if (item.Type == "Audio" || item.Type == "Episode" || item.Type == "Season") {
+            $('#fldIndexNumber', page).show();
+
+            if (item.Type == "Episode") {
+                $('#lblIndexNumber', page).html('Episode number');
+            }
+            else if (item.Type == "Season") {
+                $('#lblIndexNumber', page).html('Season number');
+            }
+            else if (item.Type == "Audio") {
+                $('#lblIndexNumber', page).html('Track number');
+            }
+            else {
+                $('#lblIndexNumber', page).html('Number');
+            }
+        } else {
+            $('#fldIndexNumber', page).hide();
+        }
+
+        if (item.Type == "Audio" || item.Type == "Episode") {
+            $('#fldParentIndexNumber', page).show();
+
+            if (item.Type == "Episode") {
+                $('#lblParentIndexNumber', page).html('Season number');
+            }
+            else if (item.Type == "Audio") {
+                $('#lblParentIndexNumber', page).html('Disc number');
+            }
+            else {
+                $('#lblParentIndexNumber', page).html('Parent number');
+            }
+        } else {
+            $('#fldParentIndexNumber', page).hide();
+        }
+    }
+
+    function fillItemInfo(page, item) {
+
+        ApiClient.getCultures().done(function (result) {
+
+            var select = $('#selectLanguage', page);
+            
+            populateLanguages(result, select);
+
+            select.val(item.Language || "").selectmenu('refresh');
+        });
+
+        ApiClient.getParentalRatings().done(function (result) {
+            
+            var select = $('#selectOfficialRating', page);
+
+            populateRatings(result, select);
+
+            select.val(item.OfficialRating || "").selectmenu('refresh');
+            
+            select = $('#selectCustomRating', page);
+
+            populateRatings(result, select);
+
+            select.val(item.CustomRating || "").selectmenu('refresh');
+        });
+
+        $('#txtName', page).val(item.Name || "");
+        $('#txtSortName', page).val(item.SortName || "");
+        $('#txtDisplayMediaType', page).val(item.DisplayMediaType || "");
+        $('#txtCommunityRating', page).val(item.CommunityRating || "");
+        $('#txtHomePageUrl', page).val(item.HomePageUrl || "");
+
+        $('#txtBudget', page).val(item.Budget || "");
+        $('#txtRevenue', page).val(item.Revenue || "");
+
+        $('#txtCriticRating', page).val(item.CriticRating || "");
+        $('#txtCriticRatingSummary', page).val(item.CriticRatingSummary || "");
+
+        $('#txtIndexNumber', page).val(item.IndexNumber || "");
+        $('#txtParentIndexNumber', page).val(item.ParentIndexNumber || "");
+
+        var date;
+
+        if (item.PremiereDate) {
+            try {
+                date = parseISO8601Date(item.PremiereDate, { toLocal: true });
+
+                $('#txtPremiereDate', page).val(date.toISOString().slice(0, 10));
+            }
+            catch (e) {
+                $('#txtPremiereDate', page).val('');
+            }
+        } else {
+            $('#txtPremiereDate', page).val('');
+        }
+
+        if (item.EndDate) {
+            try {
+                date = parseISO8601Date(item.EndDate, { toLocal: true });
+
+                $('#txtEndDate', page).val(date.toISOString().slice(0, 10));
+            }
+            catch (e) {
+                $('#txtEndDate', page).val('');
+            }
+        } else {
+            $('#txtEndDate', page).val('');
+        }
+
+        $('#txtProductionYear', page).val(item.ProductionYear || "");
+
+        $('#txtOriginalAspectRatio', page).val(item.AspectRatio || "");
+    }
+
+    function populateLanguages(allCultures, select) {
+
+        var html = "";
+
+        html += "<option value=''></option>";
+
+        for (var i = 0, length = allCultures.length; i < length; i++) {
+
+            var culture = allCultures[i];
+
+            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
+        }
+
+        select.html(html).selectmenu("refresh");
+    }
+
+    function populateRatings(allParentalRatings, select) {
+
+        var html = "";
+
+        html += "<option value=''></option>";
+
+        var ratings = [];
+        var i, length, rating;
+
+        for (i = 0, length = allParentalRatings.length; i < length; i++) {
+
+            rating = allParentalRatings[i];
+
+            ratings.push({ Name: rating.Name, Value: rating.Name });
+        }
+
+        for (i = 0, length = ratings.length; i < length; i++) {
+
+            rating = ratings[i];
+
+            html += "<option value='" + rating.Value + "'>" + rating.Name + "</option>";
+        }
+
+        select.html(html).selectmenu("refresh");
+    }
+    
+    function editItemMetadataPage() {
+        var self = this;
+
+        self.onSubmit = function() {
+
+            Dashboard.alert('coming soon');
+
+            return false;
+        };
+    }
+
+    window.EditItemMetadataPage = new editItemMetadataPage();
+
+    $(document).on('pageinit', "#editItemMetadataPage", function () {
+
+        var page = this;
+
+
+    }).on('pageshow', "#editItemMetadataPage", function () {
+
+        var page = this;
+
+        reload(page);
+
+    }).on('pagehide', "#editItemMetadataPage", function () {
+
+        var page = this;
+
+        currentItem = null;
+    });
+
+})(jQuery, document, window);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js
index 1a7b6537fc..c850d08dc0 100644
--- a/dashboard-ui/scripts/itemlistpage.js
+++ b/dashboard-ui/scripts/itemlistpage.js
@@ -132,7 +132,7 @@
 
         $('#btnEdit', page).on('click', function () {
 
-            Dashboard.navigate("edititemimages.html?id=" + query.ParentId);
+            Dashboard.navigate("edititemmetadata.html?id=" + query.ParentId);
         });
 
     }).on('pageshow', "#itemListPage", function () {
diff --git a/dashboard-ui/scripts/musicartists.js b/dashboard-ui/scripts/musicartists.js
index 05790b4a05..98f62e12f4 100644
--- a/dashboard-ui/scripts/musicartists.js
+++ b/dashboard-ui/scripts/musicartists.js
@@ -25,8 +25,9 @@
                 items: result.Items,
                 countNameSingular: "Song",
                 countNamePlural: "Songs",
-                preferBackdrop: true,
-                context: "music"
+                preferBackdrop: false,
+                context: "music",
+                shape: "square"
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
