Skip to content

Instantly share code, notes, and snippets.

@jdelibas

jdelibas/index.html

Last active Jul 12, 2016
Embed
What would you like to do?
mcloud-shows-all
<div ng-app="mcloud-pen"
ng-controller="mainController"
class="form-mini-container"
>
<div class="row">
<div class="col-xs-2 col-md-4">
</div>
<div class="col-xs-8 col-md-4">
<div class="white-box">
<form method="post"
action="#">
<h1> All Shows </h1>
<div class="form-row">
<label for="token">Auth Token (sent via header)</label>
<input class="form-control"
name="token"
ng-model="token"
placeholder="required" />
</div>
<div class="form-row form-last-row">
<div class="row">
<div class="col-xs-6">
<button type="submit"
class="btn btn-primary"
ng-click="onSubmit()"
ng-disabled="disableSubmit">Submit</button>
</div>
<div class="col-xs-6">
<p ng-if="requesting && (!response && !errors)">
Waiting for api response
</p>
<p ng-if="response || errors">
Response complete, view details below
</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-xs-2 col-md-4">
</div>
</div>
<div class="row" ng-show="response" ng-cloak>
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-8">
<div class="white-box">
<h1> Response </h1>
<p ng-if="!response">
No response
</p>
<json-formatter ng-if="response"
json="response"
open="3">
</json-formatter>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row" ng-show="errors" ng-cloak>
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-6">
<div class="white-box">
<h1> Errors </h1>
<p ng-if="errors">
No errors
</p>
<json-formatter json="errors"
open="3">
</json-formatter>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div>
//
// mcloud-pen main module
//
(function() {
'use strict';
angular
.module('mcloud-pen', [
'angular-loading-bar',
'toastr',
'jsonFormatter'
])
.controller('mainController', mainController);
mainController.$inject = ['$scope', '$http', 'toastr',];
function mainController($scope, $http, toastr) {
var token = localStorage.getItem('mcloud-staging-token');
if (token) {
$scope.token = token;
}
$scope.onSubmit = onSubmit;
$scope.disableSubmit = false;
$scope.response = null;
$scope.errors = null;
$scope.requesting = null;
function onSubmit() {
$scope.requesting = true;
$scope.response = null;
$scope.errors = null;
$scope.disableSubmit = true;
$http({
method: 'GET',
url: 'https://mcloud-api.herokuapp.com/api/v1/shows/',
headers: {
'Authorization': $scope.token
}
})
.then(function(resp) {
toastr.success('good job');
$scope.requesting = null;
$scope.disableSubmit = false
$scope.response = resp.data;
localStorage.setItem('mcloud-staging-token', $scope.token);
})
.catch(function(err) {
toastr.error(err.status);
$scope.requesting = null;
$scope.errors = err.data;
$scope.disableSubmit = false;
});
}
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.js"></script>
html,
body {
background-color: #f3f3f3;
}
.form-mini-container {
font: normal 14px sans-serif;
text-align: center;
color: #5f5f5f;
}
.form-mini-container h1 {
color: #4c565e;
font-size: 24px;
padding-bottom: 30px;
border-bottom: 2px solid #6caee0;
font-weight: bold;
margin: 0;
}
.white-box {
overflow: auto;
padding: 12px;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.form-row {
display: block;
text-align: left;
margin-bottom: 23px;
}
/* Making the form responsive. Remove this media query
if you don't need the form to work on mobile devices. */
@media (max-width: 600px) {
.form-mini-container {
margin-top: 0;
}
}
/*
100% height columns using flex
*/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin: 1em 1em;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.json-formatter-row {
text-align: left;
}
.json-formatter-row .string {
white-space: initial;
}
.label-as-badge {
border-radius: 0.3em;
display: inline-block;
margin: 0 0.1em;
}
.bottom-border {
border-bottom: 1px solid #6caee0;
}
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment