Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial AngularJS implementation of the services list.

  • Loading branch information...
commit b5105053e41d3ecf22bcf6101a18e7c2dcd1a6c9 1 parent 075d48b
@danpalmer danpalmer authored
View
2  public/assets/css/saif.css
@@ -24,7 +24,7 @@ h1 {
line-height: 40px;
}
-select {
+select.instances {
-webkit-appearance: none;
border: none;
View
17 public/assets/js/modules/Instance.js
@@ -0,0 +1,17 @@
+/**
+ * Instance module handles interaction with the API
+ */
+angular.module('instance', ['ngResource']).factory('Instance', function($resource) {
+ var Instance = $resource('locationUrl',
+ {}, // query parameters, i.e. auth
+ {
+ update: { method: 'PUT' },
+ destroy: { method: 'DELETE' },
+ all: { method:'GET', isArray:true }
+ }
+ );
+
+ Instance.prototype.update = function(callback) {
+ //return Instance.update()
+ };
+});
View
19 public/assets/js/modules/Service.js
@@ -0,0 +1,19 @@
+/**
+ * Service module handles interaction with the API
+ */
+angular.module('service', ['ngResource']).factory('Service', function($resource) {
+ var Service = $resource('/v1/services/:name',
+ {}, // query parameters, i.e. auth
+ {
+ update: { method: 'PUT' },
+ destroy: { method: 'DELETE' },
+ all: { method:'GET', isArray:true }
+ }
+ );
+
+ Service.prototype.update = function(callback) {
+ //return Service.update()
+ };
+
+ return Service;
+});
View
44 public/assets/js/seif.js
@@ -0,0 +1,44 @@
+/**
+ * Define the main module Seif that holds routing config
+ */
+angular.module('seif', ['service']).config(function($routeProvider) {
+ $routeProvider.
+ when('/', {
+ controller:ServiceList, templateUrl:'/assets/partials/services.html'}).
+ when('/service/:id', {
+ controller:ServiceController, templateUrl:'/assets/partials/service.html'}).
+ otherwise({redirectTo:'/'});
+});
+
+/**
+ * Controller for handling the services list
+ */
+function ServiceList($scope, Service) {
+ $scope.services = Service.all();
+}
+
+function ServiceController($scope, $location, $routeParams, Service) {
+ var self = this;
+
+ Service.get({name: $routeParams.name}, function(service) {
+ self.original = service;
+ $scope.service = new Service(self.original);
+ });
+
+ $scope.destroy = function() {
+ self.original.destroy(function() {
+ $location.path('/');
+ });
+ };
+
+ $scope.save = function() {
+ self.service.update(function() {
+ $location.path('/');
+ });
+ };
+}
+
+function InstanceList($scope) {
+ $scope.instances = Instance.query();
+}
+
View
17 public/assets/partials/service.html
@@ -0,0 +1,17 @@
+<header>
+ <h1 ng-model="service.name"></h1>
+</header>
+
+<p ng-model="service.description"></p>
+
+<h4>Tags</h4>
+<p>tag, tag, tag</p>
+
+<h4>Profile</h4>
+key => value<br/>
+key => value<br/>
+
+<h4>Repository</h4>
+<b>URL:</b> {{service.repository.url}}<br/>
+<b>Directory:</b> {{service.repository.subdir}}<br/>
+<b>URL:</b> {{service.repository.type}}
View
26 public/assets/partials/services.html
@@ -0,0 +1,26 @@
+<header>
+ <h1>Showing all services</h1>
+
+ <select class="instances">
+ <option selected>All</option>
+ <option>nodejs-1</option>
+ <option>nodejs-2</option>
+ <option>nodejs-3</option>
+ <option>aspnet-1</option>
+ <option>aspnet-2</option>
+ <option>php-1</option>
+ </select>
+</header>
+
+<ul class="services">
+ <li ng-repeat="service in services | orderBy:'name'">
+ <a href="#/service/{{service.name}}">
+ <h2>{{service.name}}</h2>
+ <p>{{service.description}}</p>
+
+ <small><b>Used on:</b>
+ <span class="tag" ng-repeat="tag in service.tags">{{tag}}</span>
+ </small>
+ </a>
+ </li>
+</ul>
View
55 public/index.html
@@ -2,62 +2,27 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>Saif</title>
-
+ <title>Seif</title>
+ <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
+ <script src="http://code.angularjs.org/angular-resource-1.0.1.min.js"></script>
+ <script src="/assets/js/seif.js"></script>
+ <script src="/assets/js/modules/Service.js"></script>
+ <script src="/assets/js/modules/Instance.js"></script>
<link rel="stylesheet" href="assets/css/saif.css">
</head>
- <body class="login">
+ <body class="login" ng-app="seif">
<header id="top">
<img id="logo" src="assets/img/logo.png" alt="Saif">
<ul>
- <li class="active"><a href="#">Instances</a></li>
- <li><a href="#">Services</a></li>
+ <li class="active"><a href="#">Services</a></li>
+ <li><a href="#">Instances</a></li>
<li><a href="#">Owners</a></li>
</ul>
</header>
- <section id="content">
- <header>
- <h1>Showing all services</h1>
-
- <select class="services">
- <option selected>All</option>
- <option>nodejs-1</option>
- <option>nodejs-2</option>
- <option>nodejs-3</option>
- <option>aspnet-1</option>
- <option>aspnet-2</option>
- <option>php-1</option>
- </select>
- </header>
+ <section id="content" ng-view>
- <ul class="services">
- <li class="nodejs-1 php-1">
- <a href="service.html">
- <h2>Casa</h2>
- <p>This is just a little description of Casa. Neat, huh?</p>
-
- <small><b>Used on:</b> nodejs-1, php-1</small>
- </a>
- </li>
- <li class="nodejs-1 nodejs-2 php-1">
- <a href="service.html">
- <h2>Casa</h2>
- <p>This is just a little description of Casa. Neat, huh?</p>
-
- <small><b>Used on:</b> nodejs-1, nodejs-2, php-1</small>
- </a>
- </li>
- <li class="nodejs-1 nodejs-2">
- <a href="service.html">
- <h2>Casa</h2>
- <p>This is just a little description of Casa. Neat, huh?</p>
-
- <small><b>Used on:</b> nodejs-1, nodejs-2</small>
- </a>
- </li>
- </ul>
</section>
<footer>Nothing interesting here.</footer>
View
30 public/service.html
@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Saif</title>
-
- <link rel="stylesheet" href="assets/css/saif.css">
- </head>
- <body class="login">
- <header id="top">
- <img id="logo" src="assets/img/logo.png" alt="Saif">
-
- <ul>
- <li class="active"><a href="#">Instances</a></li>
- <li><a href="#">Services</a></li>
- <li><a href="#">Owners</a></li>
- </ul>
- </header>
-
- <section id="content">
- <header>
- <h1>nodejs-1</h1>
- </header>
-
- <p>Fuck this, I'm just the guy who makes things pretty.</p>
- </section>
-
- <footer>Nothing interesting here.</footer>
- </body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.