dentalruralhealth-pack/static/templates/page_two.html

Interactive to simulate a rural health office creation

<div class="page-2">
    <!-- Modal for Strategy space -->
    <div class="modal fade" id="strategy-modal" tabindex="-1" role="dialog" aria-labelledby="Strategy">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">View Strategies</h4>
         </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <div class="row info-header">
        <div class="col-xs-6">
            <h3>2. View Strategies</h3>
        </div>
        <div class="col-xs-6 info-nav">
            <!-- Instructions button -->
            <a class="btn btn-default btn-sm btn-help pull-right" href="#" data-target="#help-modal" data-toggle="modal" role="button">
                <span class="glyphicon glyphicon-question-sign"></span> Instructions</a>
            </a>

            <!-- Instructions modal -->
            <div class="modal fade" id="help-modal" tabindex="-1" role="dialog" aria-labelledby="Instructions">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Instructions</h4>
                  </div>
                  <div class="modal-body">
                    <h4>Review each of the six proposals.</h4>
                    <p>Review each of the six proposals NOSDA is considering. Each proposal is based on one strategy that has been shown to be successful elsewhere in in the country at a similar cost and scale. Select a number above and read the proposal summary. We suggest you download the PDF of each full proposal to use later while defending your selection.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Map Layer button -->
            <a href="#" class="btn btn-default btn-sm pull-right" data-toggle="modal" data-target="#map-layers-modal">
                <span class="glyphicon glyphicon-picture"></span> Map Layers
            </a>

            <!-- Map Layer modal -->
            <div class="modal fade" id="map-layers-modal" tabindex="-1" role="dialog" aria-labelledby="Map Layer">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Select Map Layers</h4>
                  </div>
                  <div class="modal-body">
                        <% for (var i=1; i < layers.length; i++) { %>
                            <% var layer = layers[i]; %>
                            <div>
                                <input type="checkbox" class="select-layer"
                                    data-id="<%=layer.id%>" value="<%=layer.name%>"
                                    <% if (layer.visible) { %>checked="checked" <% } %>></input>
                                <%= layer.display_name %>
                            </div>
                        <% } %>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div> 
        </div>
    </div>

    <div class="row row-nopadding">
        <div class="col-xs-7 alert-container">
            <% if (complete) { %>
                <div class="success_instructions well left alert-success">
                    <b>You've reviewed all six strategies!</b> In <b>Step 3</b>, you'll select the proposal that you believe will be most successful for improving oral health and access to dental care for rural adults in Springdale County.
                </div>
            <% } else { %>
                <div class="basic_instructions well left alert-info">
                    Review all six proposals NOSDA is considering. Each proposal is based on one strategy that has been shown to be successful elsewhere in in the country at a similar cost and scale. Click on each strategy number to review the summary.
                </div>
            <% } %>
        </div>
        <div class="col-xs-5 strategy-state-container">
            <div>
                <% for (var i = strategies.length - 1; i >= 0; i--) { %>
                    <% var strategy = strategies[i] %>
                    <div data-id="<%=strategy.id%>" class="strategy-state pull-right <% if (strategy.selected) { %>selected<% } %> <% if (strategy.viewed) { %> viewed <% } %>">
                        <%= strategy.ordinal %>
                    </div>
                <% } %>
                <div class="strategy-state-label pull-right">Strategies: </div>
            </div>
        </div>
    </div>

    <div class="map-container">
            <div class="map-layers">
                <img class="map-layer" src="<%=layers[0].image%>" alt="rural health base map" />
                <% for (var i=1; i < layers.length; i++) { %>
                    <% var layer = layers[i]; %>
                    <img data-id="<%=layer.id%>"
                         class="map_layer_<%=layer.id%> map-layer"
                         src="<%=layer.image%>"
                         alt="<%= layer.name %>"
                         style="display: none; z-index: <%=layer.z_index%>; opacity:0.<%=layer.transparency%>; -moz-opacity:0.<%=layer.transparency%>; filter:alpha(opacity=<%=layer.transparency%>);"></img>
                <% } %>
            </div>
    </div>

    <div class="map-legend-container clearfix row-nopadding">
            <div class="map-legend-container">
                <div>
                    <h4>Map Legends</h4>
                    <div id="base_map_layer"><%= layers[0].legend %></div>
                </div>
                <% for (var i=1; i < layers.length; i++) { %>
                    <% var layer = layers[i]; %>
                    <div data-id="<%=layer.id%>"
                         class="pull-left map_legend_<%=layer.id%> map_legend choices"
                         style="display: none">
                        <h5><%=layer.display_name%></h5>
                        <%=layer.legend %>
                    </div>
                <% } %>
            </div>
    </div>
</div>