Getting started button (#63)

* Empty commit

* Stub help btn

* Renamed a btn

* Getting started modal with stub imgs

* Getting started gifs

* Delete unused file

* Use gifs in README

README.md

@@ -3,7 +3,7 @@
 A standardized spreadsheet editor and validator for SARS-CoV-2 sampling data, 
 that can be run offline and locally.
 
-![alt text](./images/emptyValidator.png)
+![alt text](./images/editCopyPasteDelete.gif)
 
 ## Installation
 
@@ -19,18 +19,18 @@ To run the application, navigate to the extracted folder and open `main.html`.
 <!-- TODO: link SOP -->
 
 You can edit the cells manually, or upload `xlsx`, `tsv` and `csv` files. You 
-can also save the spreadsheet's contents to your local hard-drive the 
+can also save the spreadsheet's contents to your local hard-drive.
 
-![alt text](./images/openingFile.png)
+![alt text](./images/exportingFiles.gif)
 
 Click the validate button to validate your spreadsheet's values against a 
 standardized vocabulary.
 
-![alt text](./images/validatingGrid.png)
+![alt text](./images/validatingCells.gif)
 
 Double click any column headers for information on the grid's vocabulary.
 
-![alt text](./images/fieldInfo.png)
+![alt text](./images/doubleClickHeaders.gif)
 
 ## Support
 

main.css

@@ -25,6 +25,24 @@
 	display: none;
 }
 
+/* Getting started modal */
+.carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+}
+.carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+}
+.carousel-indicators li {
+	background-color: black;
+}
+.carousel-caption {
+	color: black;
+	text-align: left;
+    position: relative;
+    left: 0;
+    top: 0;
+}
+
 /* Grid */
 #grid {
 	overflow: hidden;

main.html

@@ -36,6 +36,7 @@
             </div>
             <button type="button" class="btn btn-primary" id="validate-btn">Validate</button>
           </div>
+          <button type="button" class="btn btn-info d-none d-sm-inline" id="getting-started-btn" data-toggle="modal" data-target="#getting-started-modal">Getting Started</button>
         </div>
       </div>
       <!-- Handsontable grid -->
@@ -250,6 +251,92 @@
         </div>
       </div>
     </div>
+    <div class="modal" id="getting-started-modal" tabindex="-1" role="dialog">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="container-fluid">
+              <div class="row">
+                <div class="col">
+                  <h5>Are you ready to harmonize your contextual data?</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-body">
+            <div class="container-fluid">
+              <div class="row">
+                <div class="col">
+                  <div class="carousel slide" id="getting-started-carousel" data-interval="false">
+                    <ol class="carousel-indicators">
+                      <li data-target="#getting-started-carousel" data-slide-to="0" class="active"></li>
+                      <li data-target="#getting-started-carousel" data-slide-to="1"></li>
+                      <li data-target="#getting-started-carousel" data-slide-to="2"></li>
+                      <li data-target="#getting-started-carousel" data-slide-to="3"></li>
+                      <li data-target="#getting-started-carousel" data-slide-to="4"></li>
+                      <li data-target="#getting-started-carousel" data-slide-to="5"></li>
+                    </ol>
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" src="images/editCopyPasteDelete.gif">
+                        <div class="carousel-caption">
+                          <p>The contextual data collection template and validator application enables users to enter data as in an excel spreadsheet - type and pick values from dropdowns, copy/paste, add rows, etc.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" src="images/toggleRequiredCols.gif">
+                        <div class="carousel-caption">
+                          <p>Fields are colour-coded; required fields (minimal metadata) are yellow, strongly recommended fields are purple, optional fields are white.</p>
+                          <p>You can toggle between all, and the required fields, by going to “Settings” and selecting “Show Required Columns”.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" src="images/doubleClickHeaders.gif">
+                        <div class="carousel-caption">
+                          <p>Double click on field headers to see the definition of the field, guidance on filling in the field, and examples of how data might look structured according to the constraints of the validator.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" src="images/selectingVals.gif">
+                        <div class="carousel-caption">
+                          <p>Picklists of controlled vocabulary are available for many fields. There are dropdown menus for some, and multi-select options for others (e.g. Signs and Symptoms). You can also see the list of terms in multi-select columns by clicking once in the multi-select box.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" src="images/validatingCells.gif">
+                        <div class="carousel-caption">
+                          <p>When you’re done entering your data, you can validate values by clicking on “Validate”. Errors and missing information in required fields will be coloured red.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" src="images/exportingFiles.gif">
+                        <div class="carousel-caption">
+                          <p>When you’ve entered and validated your data, you can save it as a .xlsx, .xls, .tsv or csv format file, by clicking on “File” followed by “Save as”. You can also format your data for IRIDA upload (you will need to perform the upload yourself), or use your entered data to create a GISAID submission form (you will need to add additional information, and perform the upload yourself), by clicking on "File" followed by "Export to".</p>
+                          <p><i>If you have questions, or require assistance, contact emma.griffiths@bccdc.ca.</i></p>
+                        </div>
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#getting-started-carousel" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                       <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#getting-started-carousel" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div class="row mt-3">
+                <div class="col d-flex justify-content-end">
+                  <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- External libraries -->
     <script src="libraries/jquery-3.5.1.slim.min.js"></script>
     <script src="libraries/popper.min.js"></script>