Voting platform example

by rburns3

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="alert alert-warning user-feedback">
      Alerts
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <ul class="nav nav-tabs" id="myTabs">
        <li role="presentation" class="active"><a href="#home">Login</a></li>
        <li role="presentation"><a href="#voting">Voting</a></li>
        <li role="presentation"><a href="#admin">Admin</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
          <div class="row">
            <div class="col-xs-12">
              <div class="voter-login">
                <p>Please enter your details below to vote. </p>
                <div class="form-group">
                  <input type="text" class="form-control" name="voterId" placeholder="Voter ID">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" name="voterPass" placeholder="Passcode">
                </div>
                <div class="form-group">
                  <button class="btn btn-success vfm-voter">Login!</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="voting">
          <div class="row">
            <div class="col-xs-12">
              <h3>Select Actor to vote for:</h3>
              <div class="form-group">
                <select name="community_issues" class="form-control"></select>
              </div>
              <div class="form-group">
                <button name="cast_vote" class="btn...

CSS

body {
  margin-top: 20px;
}

.user-feedback {
  float: left;
  position: absolute;
  display: none;
  left: 30%;
  width: 200px;
  top: 50px;
  z-index: 999;
  text-align: center;
}

JavaScript

// global variable setup
isLoggedIn = false;
isAdmin = false;
var voter;

// users IDS
var site_users = [{
  voterId: 'r1234',
  voterPass: '1234',
  voterName: 'Ryan Burns',
  hasVoted: false,
  postcode: 2750,
  isAdmin: true
}, {
  voterId: 'j1234',
  voterPass: '1234',
  voterName: 'Jake White',
  hasVoted: false,
  postcode: 2745
}, {
  voterId: 'l1234',
  voterPass: '1234',
  voterName: 'Luke Parsons',
  hasVoted: false,
  postcode: 2745
}, {
  voterId: 'm1234',
  voterPass: '1234',
  voterName: 'Marley M-C',
  hasVoted: false,
  postcode: 2747
}, {
  voterId: 'e1234',
  voterPass: '1234',
  voterName: 'Ethan Sorensen',
  postcode: 2747} 
];



var community_issues = [];

//Load community issues into the voting area 
function loadCommunityIssues() {
  if (community_issues.length == 0) {
    $('select[name=community_issues]').append('<option class="list-group-item">No issues loaded. Please see an Admin</option>');
    $('button[name=cast_vote]').attr('disabled', true);
  } else {
    
    $('select[name=community_issues]').html('');
    //Reset the disabled button
    $('button[name=cast_vote]').attr('disabled', false);
    console.log(community_issues);
    for (i = 0; i < community_issues.length; i++) {
      $('select[name=community_issues]').append('<option value="' + community_issues[i].id + '" class="list-group-item">' + community_issues[i].title + '</option>');
    }
  }
}

//Display votes in the Admin section
function displayVotes() {
  $('.final_votes').html('');
  for (i = 0; i < community_issues.length; i++) {
    $('.final_votes').append('<li class="list-group-item"><span class="label label-default label-pill pull-right"> ' + community_issues[i].votes + '</span>' + community_issues[i].title + '</li>');
  }

}

//Admin create issues form
$('button[name=add_issue]').click(function() {
  var issue = $('input[name=new_community_issue]');
  if (issue.val() == '') {
    messageUsers("Please enter an issue to store first.");
  } else {
   ...