Update sponsored/inventory with new UI.

r2/r2/lib/pages/pages.py

@@ -4052,19 +4052,23 @@ class Bookings(object):
             return "%s (%s*)" % nums
 
 
-class PromoteInventory(Templated):
+class PromoteInventory(PromoteLinkBase):
     def __init__(self, start, end, target):
         Templated.__init__(self)
         self.start = start
         self.end = end
+        self.default_start = start.strftime('%m/%d/%Y')
+        self.default_end = end.strftime('%m/%d/%Y')
         self.target = target
         self.display_name = target.pretty_name
         if target.is_collection:
             self.sr_input = None
             self.collection_input = target.collection.name
+            self.targeting_type = "collection"
         else:
             self.sr_input = target.subreddit_name
             self.collection_input = None
+            self.targeting_type = "collection" if target.subreddit_name == Frontpage.name else "one"
         self.setup()
 
     def setup(self):
@@ -4133,6 +4137,17 @@ class PromoteInventory(Templated):
 
         self.rows = rows
 
+        default_sr = None
+        if not self.target.is_collection and self.sr_input:
+            default_sr = Subreddit._by_name(self.sr_input)
+        self.subreddit_selector = SubredditSelector(
+                default_sr=default_sr,
+                include_user_subscriptions=False)
+
+        self.get_locations()
+        self.get_collections()
+
+
 class PromoteReport(Templated):
     def __init__(self, links, link_text, owner_name, bad_links, start, end):
         self.links = links

r2/r2/public/static/css/reddit.less

@@ -5913,8 +5913,10 @@ div #campaign-field {
     }
 }
 
-.create-promotion {
-    
+.inventory-dashboard {
+    .geotargeting-group {
+        display: none;
+    }
 }
 
 .sponsored-page {
@@ -6474,15 +6476,20 @@ dd { margin-left: 20px;  }
 
 .inventory-table {
     font-size: smaller;
-    text-align: center;
+    text-align: right;
     margin-top: 20px;
 
     th, td {
-        padding: 2px;
+        padding: 3px;
     }
 
     th {
         border-bottom: 1px solid #000000;
+        text-align: right;
+
+        &:first-child {
+            text-align: left;
+        }
     }
 
     td.title {

r2/r2/public/static/js/sponsored.js

@@ -702,6 +702,45 @@ r.sponsored = {
     calc_bid: function(impressions, cpm_pennies) {
         return (Math.floor(impressions * cpm_pennies / 1000) / 100).toFixed(2)
     },
+
+    render_timing_duration: function($form, ndays) {
+        $form.find('.timing-field .duration').text(
+                ndays + " " + ((ndays > 1) ? r._("days") : r._("day")));
+    },
+
+    fill_inventory_form: function() {
+        var $form = $('.inventory-dashboard'),
+            targeting = this.get_targeting($form),
+            timing = this.get_timing($form);
+
+        this.render_timing_duration($form, timing.duration);
+    },
+
+    submit_inventory_form: function() {
+        var $form = $('.inventory-dashboard'),
+            targeting = this.get_targeting($form),
+            timing = this.get_timing($form);
+
+        var data = {
+            startdate: timing.startdate,
+            enddate: timing.enddate,
+        };
+
+        if (targeting.type === 'collection') {
+            data.collection_name = targeting.collection;
+        }
+        else if (targeting.type === 'subreddit') {
+            data.sr_name = targeting.sr;
+        }
+
+        this.reload_with_params(data);
+    },
+
+    reload_with_params: function(data) {
+        var queryString = '?' + $.param(data);
+        var location = window.location;
+        window.location = location.origin + location.pathname + queryString;
+    },
 }
 
 var dateFromInput = function(selector, offset) {

r2/r2/templates/promoteinventory.html

@@ -22,6 +22,7 @@
 
 <%!
    from r2.lib import js
+   import simplejson
 %>
 
 <%namespace name="pr" file="promotelinkbase.html" />
@@ -29,43 +30,23 @@
 
 ${unsafe(js.use('sponsored'))}
 
-<h1>promoted link inventory for ${thing.display_name}</h1>
-
-<div>
-    <form id="promote-inventory-form" action="/promoted/inventory" method="get">
-        <table class="preftable">
-            <tr>
-                <th>start</th>
-                <td class="prefright">
-                    <%pr:datepicker name="startdate" value="${thing.start.strftime('%m/%d/%Y')}"
-                      minDateSrc="date-min" initfuncname="init_startdate"
-                      min_date_offset="86400000">
-                        function(elem) { check_enddate(elem, $("#enddate")); return elem; }
-                    </%pr:datepicker>
-                </td>
-            </tr>
-
-            <tr>
-                <th>end</th>
-                <td class="prefright">
-                    <%pr:datepicker name="enddate" value="${thing.end.strftime('%m/%d/%Y')}"
-                      minDateSrc="startdate" initfuncname="init_enddate"
-                      min_date_offset="86400000">
-                        function(elem) { return elem; }
-                    </%pr:datepicker>
-                </td>
-            </tr>
-
-            <tr>
-                <th>subreddit</th>
-                <td class="prefright">
-                    <input name="sr_name" class="rounded styled-input" value="${thing.sr_input}">
-                    ${error_field("SUBREDDIT_NOEXIST", "sr_name", "div")}
-                </td>
-            </tr>
-        </table>
-        <button type="submit" name="submit">submit</button>
-    </form>
+<div class="sponsored-page">
+  <div class="dashboard inventory-dashboard">
+    <header>
+      <h2>promoted link inventory for ${thing.display_name}</h2>
+    </header>
+    <div class="dashboard-content">
+      <div class="editor">
+        <div class="editor-group">
+          ${pr.targeting_field(default_checked=thing.targeting_type)}
+          ${pr.timing_field()}
+        </div>
+        <footer class="buttons">
+          <button name="submit" onclick="r.sponsored.submit_inventory_form()">submit</button>
+        </footer>
+      </div>
+    </div>
+  </div>
 </div>
 
 <table class="inventory-table">
@@ -82,22 +63,31 @@ ${unsafe(js.use('sponsored'))}
         <tr class="${'total' if row.is_total else ''}">
             <td class="title">
             %if not row.is_total:
-                <div class="author">${row.info['author']}</div>
-                <div class="view-link">
-                    ${plain_link("view link", row.info['edit_url'])}
+                <div class="author view-link">
+                    ${plain_link(row.info['author'], row.info['edit_url'])}
                 </div>
             %else:
                 <div class="author">${row.info['title']}</div>
             %endif
             </td>
             %for column in row.columns:
-            <td>${column}</td>
+              <td
+                  %if column == '0':
+                    class="no-inventory"
+                  %endif
+                  >${column}</td>
             %endfor
         %endfor
     </tbody>
 </table>
 
 <script type="text/javascript">
+    r.sponsored.set_form_render_fnc(r.sponsored.fill_inventory_form);
+    r.sponsored.setup_geotargeting(${unsafe(simplejson.dumps(thing.regions))},
+                                   ${unsafe(simplejson.dumps(thing.metros))});
+    r.sponsored.setup_collections(${unsafe(simplejson.dumps(thing.collections))},
+                                  ${unsafe(simplejson.dumps(thing.collection_input))});
+
     $(function() {
       init_startdate();
       init_enddate();

r2/r2/templates/promotelinkbase.html

@@ -406,7 +406,7 @@
         ${thing.subreddit_selector}
       </div>
     </div>
-    <div class="select-group">
+    <div class="select-group geotargeting-group">
       <span class="label">location</span>
       <div class="geotargeting-disabled" style="display:none">
         ${_("location targeting is only available when targeting the frontpage")}