From 4f9bda9698c566ac2fc4a5c57c6e69568aea6ff7 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Tue, 29 May 2018 15:37:04 -0400
Subject: [PATCH] Add details of use fields and placeholder sections for the
 rest of the requests steps

---
 templates/requests.html.to          |   3 +-
 templates/requests/screen-1.html.to | 166 +++++++++++++++++++++++++++-
 templates/requests/screen-2.html.to |   3 +-
 templates/requests/screen-3.html.to |   2 +-
 templates/requests/screen-4.html.to |   2 +-
 templates/requests/screen-5.html.to |   4 +-
 6 files changed, 172 insertions(+), 8 deletions(-)

diff --git a/templates/requests.html.to b/templates/requests.html.to
index 397cf060..5681797e 100644
--- a/templates/requests.html.to
+++ b/templates/requests.html.to
@@ -4,6 +4,7 @@
 
 <main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
 
+  <h1>JEDI Requests</h1>
   <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
     {% include 'requests/sidebar.html.to' %}
   </aside>
@@ -13,7 +14,7 @@
     form goes here
     {% end %}
     {% block next %}
-    <a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>next page</a>
+    <a class='usa-button usa-button-primary' href='{{ reverse_url('request_form',next_screen) }}'>Save &amp; Continue</a>
     {% end %}
   </div>
 </main>
diff --git a/templates/requests/screen-1.html.to b/templates/requests/screen-1.html.to
index 5aea65cf..0011193e 100644
--- a/templates/requests/screen-1.html.to
+++ b/templates/requests/screen-1.html.to
@@ -1,7 +1,169 @@
 {% extends '../requests.html.to' %}
 
 {% block form %}
-<h3>What is your name?</h3>
-<input type='textbox'>
+<h2>Details of Use</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
+<form>
+  <h3 id="application-details">Application Details</h3>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+  <button class="usa-button-secondary usa-button-active">New Application</button>
+  <button class="usa-button-secondary" disabled>Existing Application</button>
+  <button class="usa-button-secondary" disabled>Sandbox Application</button>
+
+
+  <label for="input-application-name">Application name</label>
+  <input id="input-application-name" name="input-application-name" type="text" placeholder="What is the application name?">
+
+  <label for="input-application-description">Application description</label>
+  <textarea id="input-application-description" name="input-application-description" placeholder="Describe the application"></textarea>
+
+  <label for="input-type-textarea">Estimated dollar value of use</label>
+  <input id="dollar-value" name="dollar-value" type="text" placeholder="$">
+
+  <label for="input-estimate">How did you arrive at this estimate?</label>
+  <select name="input-estimate" id="input-estimate">
+    <option value="">- Select -</option>
+    <option value="value1">CSP usage calculator</option>
+    <option value="value2">Option B</option>
+    <option value="value3">Option C</option>
+  </select>
+
+  <fieldset>
+    <label for="input-start-date">Expected start date</label>
+    <div class="usa-date-of-birth">
+      <div class="usa-form-group usa-form-group-month">
+        <label for="date_start_1">Month</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_1" name="date_start_1" type="number" min="1" max="12" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-day">
+        <label for="date_start_2">Day</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_2" name="date_start_2" type="number" min="1" max="31" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-year">
+        <label for="date_start_3">Year</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_3" name="date_start_3" type="number" min="1900" max="2000" value="">
+      </div>
+    </div>
+  </fieldset>
+
+
+  <label for="input-period-performance">Desired period of performance</label>
+  <select name="input-period-performance" id="input-period-performance">
+    <option value="">- Select -</option>
+    <option value="value1">30 days</option>
+    <option value="value2">60 days</option>
+    <option value="value3">90 days</option>
+  </select>
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-period-performance">Classification level</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="unclassified" type="radio" checked name="classification-level" value="unclassified">
+        <label for="unclassified">Unclassified</label>
+      </li>
+      <li>
+        <input id="secret" type="radio" name="classification-level" value="secret">
+        <label for="secret">Secret</label>
+      </li>
+      <li>
+        <input id="top-secret" type="radio" name="classification-level" value="top-secret">
+        <label for="top-secret">Top Secret</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+  <label for="input-service-branch">Primary service branch usage</label>
+  <input id="service-branch" name="service-branch" type="text" placeholder="Add tags associated with service branches">
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-cloud-model">Cloud model service</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="iaas" type="radio" name="cloud-level" value="iaas">
+        <label for="iaas">IaaS</label>
+      </li>
+      <li>
+        <input id="paas" type="radio" name="cloud-level" value="paas">
+        <label for="paas">PaaS</label>
+      </li>
+      <li>
+        <input id="iass-pass" type="radio" checked name="cloud-level" value="iass-pass">
+        <label for="iass-pass">Both</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+
+  <!-- Computation -->
+  <h4 id="application-details">Computation</h4>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+  <label for="">Number of cores</label>
+  <input id="" name="" type="text" placeholder="Total cores">
+
+  <label for="">Total RAM</label>
+  <input id="" name="" type="text" placeholder="Amount of RAM">
+
+
+
+  <!-- Storage -->
+  <h4 id="application-storage">Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Object storage</label>
+  <input id="" name="" type="text" placeholder="Total object storage">
+
+  <label for="">Server storage</label>
+  <input id="" name="" type="text" placeholder="Total server storage">
+
+
+
+  <!-- Application Usage -->
+  <h4 id="application-usage">Estimated Application Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Expected active users</label>
+  <input id="" name="" type="text" placeholder="Total active users">
+
+  <label for="">Expected peak concurrent users</label>
+  <input id="" name="" type="text" placeholder="Total peak users">
+
+  <label for="">Expected requests per minute</label>
+  <input id="" name="" type="text" placeholder="Total requests">
+
+  <label for="">Number of application environments</label>
+  <input id="" name="" type="text" placeholder="Total number of environments">
+
+
+
+
+  <br><br>
+
+  <button class="usa-button-secondary">Create Application</button>
+  <br>
+  <button class="usa-button-secondary" disabled>Save &amp; Continue</button>
+
+</form>
+
+
 {% end %}
 
+
+
+<!-- 
+<div class="usa-width-three-fourths usa-layout-docs-main_content">
+  <h2 id="details-of-use">Details of Use</h2>
+  <p class="usa-font-lead">
+    To use JEDI, we want to know more about your needs for cloud services. Please fill out the form regarding computation, storage, and usage.
+  </p>
+
+
+ -->
\ No newline at end of file
diff --git a/templates/requests/screen-2.html.to b/templates/requests/screen-2.html.to
index 0bf97f43..858d0e16 100644
--- a/templates/requests/screen-2.html.to
+++ b/templates/requests/screen-2.html.to
@@ -1,7 +1,8 @@
 {% extends '../requests.html.to' %}
 
 {% block form %}
-<h3>What is your quest?</h3>
+
+<h2>Organizational Info</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-3.html.to b/templates/requests/screen-3.html.to
index 0bf97f43..29c1b343 100644
--- a/templates/requests/screen-3.html.to
+++ b/templates/requests/screen-3.html.to
@@ -1,7 +1,7 @@
 {% extends '../requests.html.to' %}
 
 {% block form %}
-<h3>What is your quest?</h3>
+<h2>Funding/Contracting</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-4.html.to b/templates/requests/screen-4.html.to
index 0bf97f43..bbecea24 100644
--- a/templates/requests/screen-4.html.to
+++ b/templates/requests/screen-4.html.to
@@ -1,7 +1,7 @@
 {% extends '../requests.html.to' %}
 
 {% block form %}
-<h3>What is your quest?</h3>
+<h2>Readiness Survey</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-5.html.to b/templates/requests/screen-5.html.to
index bb56aa9b..bb34d7d0 100644
--- a/templates/requests/screen-5.html.to
+++ b/templates/requests/screen-5.html.to
@@ -1,10 +1,10 @@
 {% extends '../requests.html.to' %}
 
 {% block form %}
-<h3>What is your favorite color?</h3>
+<h2>Review &amp; Submit</h2>
 <input type='textbox'>
 {% end %}
 
 {% block next %}
-<b class='usa-button'>MAKE THE REQUEST</b>
+<b class='usa-button'>Submit to Contracting Officer</b>
 {% end %}