mcloud-images-all

index.html

<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 Images </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> Images </h1>
              <div ng-repeat="image in response.data.slice().reverse() track by $index"
                   class="bottom-border">
                 <div class="row">
                   <div class="col-xs-6">
                       <div>
                            <img class="img-responsive" ng-src="https://mcloud-api.herokuapp.com/api/v1/images/{{image.sub[1].path}}" alt="image.path" />
                       </div>
                   </div>
                   <div class="col-xs-6">
                     <table class="table table-bordered">
                       <tr>
                         <td>_id</td>
                         <td>{{ image._id }}</td>
                       </tr>
                       <tr>
                         <td>uuid</td>
                         <td>{{ image.uuid }}</td>
                       </tr>
                       <tr>
                         <td>explicit</td>
                         <td>{{ image.explicit }}</td>
                       </tr>
                       <tr>
                         <td>tags</td>
                         <td>
                             <span ng-repeat="tag in image.tags track by $index"
                                   class="label label-warning label-as-badge">
                             {{ tag }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>labels</td>
                         <td>
                             <span ng-repeat="label in image.labels track by $index"
                                   class="label label-info label-as-badge">
                             {{ label }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>sizes</td>
                         <td>
                             <span ng-repeat="sub in image.sub track by $index">
                             <a href="https://mcloud-api.herokuapp.com/api/v1/images/{{sub.path}}">
                                 {{ sub.name }}
                             </a>
                           </span>
                         </td>
                       </tr>
                    </table>
                   </div>
                </div>
              </div>

            </div>
        </div>
        <div class="col-md-2">
        </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-images-all.markdown

mcloud-images-all

A Pen by James Delibas on CodePen.

License.

script.js

//
// 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/images/',
                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;
              });
        }

    }
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.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>

style.css

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;
}

styles

<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" />