equivalent functionality using angular and restful json

This commit is contained in:
Noah Levitt 2015-09-25 19:15:20 +00:00
parent 1ca17f204b
commit 69a25bc74a
4 changed files with 56 additions and 40 deletions

View File

@ -1,15 +1,25 @@
import flask
import rethinkstuff
import json
import logging
import sys
app = flask.Flask(__name__)
logging.basicConfig(stream=sys.stdout, level=logging.INFO,
format="%(asctime)s %(process)d %(levelname)s %(threadName)s %(name)s.%(funcName)s(%(filename)s:%(lineno)d) %(message)s")
app = flask.Flask(__name__, static_url_path="")
r = rethinkstuff.Rethinker(["wbgrp-svc020", "wbgrp-svc035", "wbgrp-svc036"],
db="archiveit_brozzler")
@app.route("/")
@app.route("/api/jobs")
def jobs():
return flask.render_template("jobs.html", jobs=r.table("jobs").run())
# return "\n".join(("{} ({})".format(j["id"], j["status"]) for j in jobs))
return flask.jsonify(jobs=list(r.table("jobs").run()))
@app.route("/")
def root():
return app.send_static_file("index.html")
if __name__ == "__main__":
app.run(host="0.0.0.0", port=8081, debug=True)

View File

@ -0,0 +1,11 @@
"use strict";
var brozzlerConsoleApp = angular.module("brozzlerConsoleApp", []);
brozzlerConsoleApp.controller("JobsAppController", ["$scope", "$http", function($scope, $http) {
$http.get("api/jobs").success(function(data) {
console.log(data);
$scope.jobs = data.jobs;
});
}]);

View File

@ -1,20 +1,20 @@
<!doctype html>
<html lang="en">
<html lang="en" ng-app="brozzlerConsoleApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brozzler Console: {% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<title>Brozzler Console: Jobs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.css">
<style>
body {
padding-top: 70px;
padding-bottom: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="controllers.js"></script>
</head>
<body role="document">
@ -41,8 +41,30 @@
</nav>
<div class="container" role="main">
{% block body %}{% endblock %}
<div ng-controller="JobsAppController">
<div class="page-header">
<h1>Jobs</h1>
</div>
<div class="row">
<div class="col-sm-6" ng-repeat="job in jobs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Job {{job.id}}: {{job.status}}</h3>
</div>
<div class="panel-body">
<h4> Seeds </h4>
<ul>
<li ng-repeat="seed in job.conf.seeds"> {{seed.url}} </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>

View File

@ -1,27 +0,0 @@
{% extends "layout.html" %}
{% block title %} Jobs {% endblock %}
{% block body %}
<div class="page-header">
<h1>Jobs</h1>
</div>
<div class="row">
{% for job in jobs %}
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Job {{job.id}}: {{job.status}}</h3>
</div>
<div class="panel-body">
<h4> Seeds </h4>
<ul>
{% for seed in job.conf.seeds %}
<li> {{seed.url}} </li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}