app/views/wall/wallCreationModal.html
<link rel="stylesheet" type="text/css" href="css/angular-toggle-switch.css">
<div class="modal fade wall-modal" id="wall-modal" role="dialog">
<div class="modal-dialog modal-lg wall-modal-dialog">
<div class="modal-content wall-modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Create a new Twitter Wall</h2>
</div>
<div class="modal-body wall-modal-body">
<div class="row">
<div class="col-xs-2 tabs-list" style="position:fixed;">
<ul class="nav nav-tabs tabs-left">
<li ng-click="tabSelected(0)" class="active"><a href="#info" data-toggle="tab"><i class="fa fa-align-left fa-2x"></i><br><h4>INFO</h4></a></li>
<li ng-click="tabSelected(1)"><a href="#content" data-toggle="tab"><i class="fa fa-filter fa-2x"></i><br><h4>CONTENT</h4></a></li>
<li ng-click="tabSelected(2)"><a href="#design" data-toggle="tab"><i class="fa fa-paint-brush fa-2x"></i><br><h4>DESIGN</h4></a></li>
</ul>
</div>
<div class="col-xs-offset-2 col-xs-10">
<div class="tab-content">
<div class="tab-pane active" id="info" style="margin-bottom: 80px;">
<div>
<form name="step1" role="form" class="wall-creation-form">
<div class="box-body">
<div class="form-group">
<label for="eventNameInput">What's the name of the event that you're creating a tweet wall for?</label>
<input required ng-model="newWallOptions.eventName" type="text" class="form-control" name="eventNameInput" placeholder="Event Name">
</div>
<div class="form-group">
<label>Show tweets within this period:</label>
<div class="form-inline">
<div class="input-group dropdown">
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
<a class="dropdown-toggle my-toggle-select" id="datetimepicker1" role="button" data-toggle="dropdown" data-target="#" href="">
<div class="input-append">
<input type="text" class="form-control date-input" ng-model="newWallOptions.sinceDate">
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="datetimepicker1">
<datetimepicker ng-model="newWallOptions.sinceDate" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', minView: 'hour' }"></datetimepicker>
</ul>
</div>
 - 
<div class="input-group dropdown">
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
<a class="dropdown-toggle my-toggle-select" id="datetimepicker2" role="button" data-toggle="dropdown" data-target="#" href="">
<div class="input-append">
<input type="text" class="form-control date-input" ng-model="newWallOptions.untilDate">
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="datetimepicker2">
<datetimepicker ng-model="newWallOptions.untilDate" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', minView: 'hour' }"></datetimepicker>
</ul>
</div>
<button ng-click="resetDate()" class="btn btn-danger">Clear</button>
</div>
</div>
<div class="form-group">
<label for="hashtagInput">What's your main hashtag for the event? This will show prominently on your tweet wall.</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input required ng-model="newWallOptions.mainHashtagText" type="text" class="form-control" name="hashtagInput" placeholder="loklak">
</div>
</div>
<div class="form-group">
<div>
<div class="form-group">
<label>Upload Logo</label>  <small>Transparent PNGs work best!</small>
<br>
<div class="btn btn-default btn-file btn-lg">
<input type='file' ng-model='newWallOptions.logo' accept="image/*" maxsize="500" base-sixty-four-input>Choose Image</div>
<img class="wall-thumbnail-logo" ng-if="newWallOptions.logo" ng-src="data:{{newWallOptions.logo.filetype}};base64,{{newWallOptions.logo.base64}}" /><span ng-show="invalidFile">File must not exceed 500 KB.</span>
<button ng-if="newWallOptions.logo" ng-click="resetLogo()" class=" btn btn-danger">Clear</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane" id="content">
<div>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="wall-float-container">
<i class="fa fa-check-circle fa-3x wall-float-icon-contains"></i>
<div class="wall-float-text">
<h3>What do you want to show?<br><small>Add words, #hashtags, @mentions and from:user</small></h3>
</div>
</div>
<div class="form-group wall-tag-label-contain">
<label class="wall-contains-header">Show tweets that contain <strong>ALL</strong> of these</label>
<tags-input class="wall-tag-input" ng-model="newWallOptions.all" placeholder="Type and hit enter" name="ands"></tags-input>
</div>
<div class="form-group wall-tag-label-contain">
<label class="wall-contains-header">Show tweets that contain <strong>ANY</strong> of these</label>
<tags-input class="wall-tag-input" ng-model="newWallOptions.any" placeholder="Type and hit enter" name="ors"></tags-input>
</div>
<h3 style="margin-bottom: 10px;" ng-if="newWallOptions.mainHashtagText">Main hashtag: <span class="label label-primary">{{newWallOptions.mainHashtag}}</span></h3>
<div class="form-group row">
<h4 class="col-xs-9">Cycle/Repeat tweets
<br><small>Do you want to constantly cycle Tweets so it always appears active? Will show only latest tweets if set to No.</small></h4>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.cycle">
</toggle-switch>
</div>
<hr>
<div ng-if="newWallOptions.cycle==true" class="form-group row">
<h4 class="col-xs-9">Cycle Delay Time
<br><small>When there are no new posts, show a tweet for how many seconds?</small></h4>
<input style="min-width:100px;width:10%;" class="col-xs-2" type="number" min="1" max="20" ng-blur="lostCycleDelayFocus()" ng-model="newWallOptions.cycleDelayTime">
<hr>
</div>
<div ng-if="newWallOptions.cycle==true" class="form-group row">
<h4 class="col-xs-9">Cycle Post Limit
<br><small>How many of the most recent posts should we cycle?</small></h4>
<input style="min-width:100px;width:10%;" class="col-xs-2" type="number" min="1" max="100" ng-blur="lostCyclePostsFocus()" ng-model="newWallOptions.cyclePostLimit">
<hr>
</div>
<hr>
<div class="form-group">
<h3>Which media do you want to show on the wall?</h3>
<div class="row">
<h4 class="col-xs-8">Images<br><small>Show tweets with images?</small></h4>
<choices class="wall-media-toggle" data-type="array" btn-type="btn-default" ng-model="newWallOptions.images">
<choice ng-disabled="newWallOptions.videos[0]=='only'" active value="both">Yes</choice>
<choice ng-disabled="newWallOptions.videos[0]=='only'" value="none">No</choice>
<choice ng-disabled="newWallOptions.videos[0]=='only'" value="only">Only</choice>
</choices>
</div>
<hr>
<div class="row">
<h4 class="col-xs-8">Videos<br><small>Show tweets with videos?</small></h4>
<choices class="wall-media-toggle" data-type="array" btn-type="btn-default" ng-model="newWallOptions.videos">
<choice ng-disabled="newWallOptions.images[0]=='only'" value="both">Yes</choice>
<choice ng-disabled="newWallOptions.images[0]=='only'" active value="none">No</choice>
<choice ng-disabled="newWallOptions.images[0]=='only'" value="only">Only</choice>
</choices>
</div>
</div>
<div class="form-group">
<h3>Location</h3>
<div class="row">
<h4 class="col-xs-8">Places<br><small>Show tweets near this place</small></h4>
<input class="wall-location-input" type="text" ng-model="newWallOptions.chosenLocation">
<ul class="col-xs-offset-8 wall-location-list" ng-show="wall.hasSuggestions">
<li ng-repeat="location in wall.locationSuggestions | limitTo:5" ng-click="wall.setLocation(location.query)">{{location.query}}</li>
</ul>
</div>
<!-- <span class="location-hint">Click to change/choose location</span> -->
</div>
</div>
<div class="col-xs-6">
<div class="wall-float-container">
<i class="fa fa-minus-circle fa-3x wall-float-icon-not-contains"></i>
<div class="wall-float-text">
<h3>What do you want to exclude?<br><small>Add words, #hashtags, @mentions and from:user</small></h3></div>
</div>
<div class="form-group wall-tag-label-not-contain">
<label class="wall-not-contains-header">Show tweets that contain NONE of these</label>
<tags-input class="wall-tag-input" ng-model="newWallOptions.none" placeholder="Type and hit enter" name="nones"></tags-input>
</div>
<div>
<hr>
<div class="form-group row">
<h4 class="col-xs-9">Block tweets with profanity
<br><small>Tweets containing profanity will go straight into the blocked queue and will not be displayed or placed in moderation.</small></h4>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.profanity">
</toggle-switch>
</div>
<hr>
<div class="form-group row">
<h4 class="col-xs-9">Block retweets
<br><small>Retweets will not be shown or counted in the stats, they'll be immediately blocked.</small></h4>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.blockRetweets">
</toggle-switch>
</div>
<hr>
<h4>Coming Soon</h4>
<div class="form-group row wall-exclude-toggles">
<h4 class="col-xs-9">Hide retweets
<br><small>Retweets will not be shown, but they WILL be counted in the stats and leaderboards.</small></h4>
<toggle-switch disabled="true" class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.hideRetweets">
</toggle-switch>
</div>
<hr>
<div class="form-group row wall-exclude-toggles">
<h4 class="col-xs-9">Follower threshold
<br><small>Block any Tweets from people that have less than the number of followers you specify.</small></h4>
<input style="min-width:100px;width:10%;" disabled="true" class="col-xs-2" type="text" ng-model="newWallOptions.followerThreshold">
</div>
<hr>
<div class="form-group row wall-exclude-toggles">
<h4 class="col-xs-9">Moderation
<br><small>This gives you the ability to approve or deny every Tweet before it shows on your Tweet wall</small></h4>
<toggle-switch disabled="true" class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.moderation">
</toggle-switch>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="design">
<div>
<div class="box-body">
<div class="row wall-preview-container">
<div class="col-md-4">
<div>
<div class="box-header">
<label>Select a layout to customize</label>
</div>
<div class="box-body">
<div>
<div class="row">
<div class="col-md-6">
<label class="layoutRadio">
<input ng-model="newWallOptions.layoutStyle" value="1" name="layoutStyle" type="radio"></input>
<img src="images/linear-layout-thumb.jpg" alt="">
</label>
</div>
<div class="col-md-6">
<label class="layoutRadio">
<input ng-model="newWallOptions.layoutStyle" value="2" name="layoutStyle" type="radio"></input>
<img src="images/masonry-layout-thumb.jpg" alt="">
</label>
</div>
<div class="col-md-6">
<label class="layoutRadio">
<input ng-model="newWallOptions.layoutStyle" value="3" name="layoutStyle" type="radio"></input>
<img src="images/cot-layout-thumb.jpg" alt="">
</label>
</div>
<div class="col-md-6">
<label class="layoutRadio">
<input ng-model="newWallOptions.layoutStyle" value="4" name="layoutStyle" type="radio"></input>
<img src="images/map-layout-thumb.jpg" alt="">
</label>
</div>
</div>
<div class="row design-box">
<div>
<div class="col-xs-6 form-group">
<label>Set Header Colour</label>
<div class="input-group">
<span ng-style="{'background-color':newWallOptions.headerColour}" class="input-group-addon"></span>
<input ng-model="newWallOptions.headerColour" colorpicker type="text" class="form-control">
</div>
</div>
<div class="col-xs-6 form-group">
<label>Show Header on</label>
<select ng-model="newWallOptions.headerPosition" class="form-control">
<option>Top</option>
<option>Bottom</option>
</select>
</div>
<div class="col-xs-6 form-group">
<label>Leaderboard</label>
<br>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.showStatistics">
</toggle-switch>
</div>
<div class="col-xs-6 form-group">
<label>Show Loklak logo</label>
<br>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.showLoklakLogo">
</toggle-switch>
</div>
<div class="col-xs-6 form-group">
<label>Show event name</label>
<br>
<toggle-switch class="wall-toggle-switch" on-label="YES" off-label="NO" ng-model="newWallOptions.showEventName">
</toggle-switch>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 wall-preview animate-switch-container" ng-switch on="newWallOptions.headerPosition">
<div ng-switch-when="Top" ng-style="{'background-color': newWallOptions.headerColour} " class="row wall-preview-header">
<div ng-style="{'color': newWallOptions.headerForeColour} " class="preview-hashtag col-md-4">{{newWallOptions.mainHashtag}}</div>
<div ng-style="{'color': newWallOptions.headerForeColour} " class="preview-event-name col-md-4">
<div><img class="wall-preview-logo" ng-if="newWallOptions.logo" data-ng-src="data:{{newWallOptions.logo.filetype}};base64,{{newWallOptions.logo.base64}}">
<div ng-hide="!newWallOptions.showEventName" class="wall-header-eventname">{{newWallOptions.eventName}}</div>
</div>
</div>
<div ng-hide="!newWallOptions.showLoklakLogo" ng-style="{'color': newWallOptions.headerForeColour} " class="preview-banner col-md-4">Loklak</div>
</div>
<div class="row animate-switch-container" ng-switch on="newWallOptions.layoutStyle">
<img ng-switch-when="1" class="img-responsive animate-switch" ng-src="{{newWallOptions.showStatistics?'/images/leaderboardlinear-layout.jpg':'/images/linear-layout.jpg'}}" alt="">
<img ng-switch-when="2" class="img-responsive animate-switch" ng-src="{{newWallOptions.showStatistics?'/images/leaderboardmasonry-layout.jpg':'/images/masonry-layout.jpg'}}" alt="">
<img ng-switch-when="3" class="img-responsive animate-switch" ng-src="{{newWallOptions.showStatistics?'/images/leaderboardcoa-layout.jpg':'/images/coa-layout.jpg'}}" alt="">
<img ng-switch-when="4" class="img-responsive animate-switch" ng-src="{{newWallOptions.showStatistics?'/images/leaderboardmap-layout.jpg':'/images/map-layout.jpg'}}" alt="">
</div>
<div ng-switch-when="Bottom" ng-style="{'background-color': newWallOptions.headerColour} " class="row wall-preview-header">
<div ng-style="{'color': newWallOptions.headerForeColour} " class="preview-hashtag col-md-4">{{newWallOptions.mainHashtag}}</div>
<div ng-style="{'color': newWallOptions.headerForeColour} " class="preview-event-name col-md-4">
<div><img class="wall-preview-logo" ng-if="newWallOptions.logo" data-ng-src="data:{{newWallOptions.logo.filetype}};base64,{{newWallOptions.logo.base64}}">
<div ng-hide="!newWallOptions.showEventName" class="wall-header-eventname">{{newWallOptions.eventName}}</div>
</div>
</div>
<div ng-hide="!newWallOptions.showLoklakLogo" ng-style="{'color': newWallOptions.headerForeColour} " class="preview-banner col-md-4">Loklak</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div style="float:left;" class="col-xs-offset-2">
<a ng-show="showNext" ng-click="proceed()" type="submit" class="btn btn-loklak-blue">Next Step</a>
<!-- <a ng-click="proceed()" type="submit" class="btn btn-primary">Save and Close</a> -->
<a ng-hide="showNext" ng-disabled="!(newWallOptions.eventName && newWallOptions.mainHashtagText)" type="submit" class="btn btn-loklak-blue" ng-click="!(newWallOptions.eventName && newWallOptions.mainHashtagText) || start()">Start twitter wall</a>
<span ng-show="(!showNext) && ((step1.eventNameInput.$invalid) || (step1.hashtagInput.$invalid))" style="color:red;">Enter an event name and your event's main hashtag</span>
</div>
</div>
</div>
</div>
</div>