diff --git a/octoprint/server.py b/octoprint/server.py index f620266..3698506 100644 --- a/octoprint/server.py +++ b/octoprint/server.py @@ -2,9 +2,11 @@ __author__ = "Gina Häußge " __license__ = 'GNU Affero General Public License http://www.gnu.org/licenses/agpl.html' -from flask import Flask, request, render_template, jsonify, send_from_directory, abort, url_for from werkzeug.utils import secure_filename import tornadio2 +from flask import Flask, request, render_template, jsonify, send_from_directory, url_for, current_app, session, abort +from flask.ext.login import LoginManager, login_user, logout_user, login_required, current_user +from flask.ext.principal import Principal, Permission, RoleNeed, Identity, identity_changed, AnonymousIdentity, identity_loaded, UserNeed import os import threading @@ -12,23 +14,30 @@ import logging, logging.config import subprocess from octoprint.printer import Printer, getConnectionOptions -from octoprint.settings import settings +from octoprint.settings import settings, valid_boolean_trues import octoprint.timelapse as timelapse import octoprint.gcodefiles as gcodefiles import octoprint.util as util +import octoprint.users as users SUCCESS = {} BASEURL = "/ajax/" + app = Flask("octoprint") # Only instantiated by the Server().run() method # In order that threads don't start too early when running as a Daemon printer = None gcodeManager = None +userManager = None + +principals = Principal(app) +admin_permission = Permission(RoleNeed("admin")) +user_permission = Permission(RoleNeed("user")) #~~ Printer state class PrinterStateConnection(tornadio2.SocketConnection): - def __init__(self, session, endpoint=None): + def __init__(self, printer, gcodeManager, userManager, session, endpoint=None): tornadio2.SocketConnection.__init__(self, session, endpoint) self._logger = logging.getLogger(__name__) @@ -40,6 +49,10 @@ class PrinterStateConnection(tornadio2.SocketConnection): self._messageBacklog = [] self._messageBacklogMutex = threading.Lock() + self._printer = printer + self._gcodeManager = gcodeManager + self._userManager = userManager + def on_open(self, info): self._logger.info("New connection from client") # Use of global here is smelly @@ -99,40 +112,43 @@ class PrinterStateConnection(tornadio2.SocketConnection): @app.route("/") def index(): return render_template( - "index.html", + "index.jinja2", + ajaxBaseUrl=BASEURL, webcamStream=settings().get(["webcam", "stream"]), enableTimelapse=(settings().get(["webcam", "snapshot"]) is not None and settings().get(["webcam", "ffmpeg"]) is not None), enableGCodeVisualizer=settings().get(["feature", "gCodeVisualizer"]), - enableSystemMenu=settings().get(["system"]) is not None and settings().get(["system", "actions"]) is not None and len(settings().get(["system", "actions"])) > 0 + enableSystemMenu=settings().get(["system"]) is not None and settings().get(["system", "actions"]) is not None and len(settings().get(["system", "actions"])) > 0, + enableAccessControl=userManager is not None ) #~~ Printer control -@app.route(BASEURL + "control/connectionOptions", methods=["GET"]) +@app.route(BASEURL + "control/connection/options", methods=["GET"]) def connectionOptions(): return jsonify(getConnectionOptions()) -@app.route(BASEURL + "control/connect", methods=["POST"]) +@app.route(BASEURL + "control/connection", methods=["POST"]) +@login_required def connect(): - port = None - baudrate = None - if "port" in request.values.keys(): - port = request.values["port"] - if "baudrate" in request.values.keys(): - baudrate = request.values["baudrate"] - if "save" in request.values.keys(): - settings().set(["serial", "port"], port) - settings().setInt(["serial", "baudrate"], baudrate) - settings().save() - printer.connect(port=port, baudrate=baudrate) - return jsonify(state="Connecting") + if "command" in request.values.keys() and request.values["command"] == "connect": + port = None + baudrate = None + if "port" in request.values.keys(): + port = request.values["port"] + if "baudrate" in request.values.keys(): + baudrate = request.values["baudrate"] + if "save" in request.values.keys(): + settings().set(["serial", "port"], port) + settings().setInt(["serial", "baudrate"], baudrate) + settings().save() + printer.connect(port=port, baudrate=baudrate) + elif "command" in request.values.keys() and request.values["command"] == "disconnect": + printer.disconnect() -@app.route(BASEURL + "control/disconnect", methods=["POST"]) -def disconnect(): - printer.disconnect() - return jsonify(state="Offline") + return jsonify(SUCCESS) @app.route(BASEURL + "control/command", methods=["POST"]) +@login_required def printerCommand(): if "application/json" in request.headers["Content-Type"]: data = request.json @@ -155,32 +171,27 @@ def printerCommand(): return jsonify(SUCCESS) -@app.route(BASEURL + "control/print", methods=["POST"]) -def printGcode(): - printer.startPrint() - return jsonify(SUCCESS) - -@app.route(BASEURL + "control/pause", methods=["POST"]) -def pausePrint(): - printer.togglePausePrint() - return jsonify(SUCCESS) - -@app.route(BASEURL + "control/cancel", methods=["POST"]) -def cancelPrint(): - printer.cancelPrint() +@app.route(BASEURL + "control/job", methods=["POST"]) +@login_required +def printJobControl(): + if "command" in request.values.keys(): + if request.values["command"] == "start": + printer.startPrint() + elif request.values["command"] == "pause": + printer.togglePausePrint() + elif request.values["command"] == "cancel": + printer.cancelPrint() return jsonify(SUCCESS) @app.route(BASEURL + "control/temperature", methods=["POST"]) +@login_required def setTargetTemperature(): - if not printer.isOperational(): - return jsonify(SUCCESS) - - elif request.values.has_key("temp"): - # set target temperature + if "temp" in request.values.keys(): + # set target temperature temp = request.values["temp"] printer.command("M104 S" + temp) - elif request.values.has_key("bedTemp"): + if "bedTemp" in request.values.keys(): # set target bed temperature bedTemp = request.values["bedTemp"] printer.command("M140 S" + bedTemp) @@ -188,6 +199,7 @@ def setTargetTemperature(): return jsonify(SUCCESS) @app.route(BASEURL + "control/jog", methods=["POST"]) +@login_required def jog(): if not printer.isOperational() or printer.isPrinting(): # do not jog when a print job is running or we don't have a connection @@ -224,6 +236,7 @@ def getSpeedValues(): return jsonify(feedrate=printer.feedrateState()) @app.route(BASEURL + "control/speed", methods=["POST"]) +@login_required def speed(): if not printer.isOperational(): return jsonify(SUCCESS) @@ -251,6 +264,7 @@ def readGcodeFile(filename): return send_from_directory(settings().getBaseFolder("uploads"), filename, as_attachment=True) @app.route(BASEURL + "gcodefiles/upload", methods=["POST"]) +@login_required def uploadGcodeFile(): filename = None if "gcode_file" in request.files.keys(): @@ -259,10 +273,11 @@ def uploadGcodeFile(): return jsonify(files=gcodeManager.getAllFileData(), filename=filename) @app.route(BASEURL + "gcodefiles/load", methods=["POST"]) +@login_required def loadGcodeFile(): if "filename" in request.values.keys(): printAfterLoading = False - if "print" in request.values.keys() and request.values["print"]: + if "print" in request.values.keys() and request.values["print"] in valid_boolean_trues: printAfterLoading = True filename = gcodeManager.getAbsolutePath(request.values["filename"]) if filename is not None: @@ -270,6 +285,7 @@ def loadGcodeFile(): return jsonify(SUCCESS) @app.route(BASEURL + "gcodefiles/delete", methods=["POST"]) +@login_required def deleteGcodeFile(): if "filename" in request.values.keys(): filename = request.values["filename"] @@ -308,6 +324,7 @@ def downloadTimelapse(filename): return send_from_directory(settings().getBaseFolder("timelapse"), filename, as_attachment=True) @app.route(BASEURL + "timelapse/", methods=["DELETE"]) +@login_required def deleteTimelapse(filename): if util.isAllowedFile(filename, set(["mpg"])): secure = os.path.join(settings().getBaseFolder("timelapse"), secure_filename(filename)) @@ -315,7 +332,8 @@ def deleteTimelapse(filename): os.remove(secure) return getTimelapseData() -@app.route(BASEURL + "timelapse/config", methods=["POST"]) +@app.route(BASEURL + "timelapse", methods=["POST"]) +@login_required def setTimelapseConfig(): if request.values.has_key("type"): type = request.values["type"] @@ -381,6 +399,8 @@ def getSettings(): }) @app.route(BASEURL + "settings", methods=["POST"]) +@login_required +@admin_permission.require(403) def setSettings(): if "application/json" in request.headers["Content-Type"]: data = request.json @@ -425,9 +445,117 @@ def setSettings(): return getSettings() +#~~ user settings + +@app.route(BASEURL + "users", methods=["GET"]) +@login_required +@admin_permission.require(403) +def getUsers(): + if userManager is None: + return jsonify(SUCCESS) + + return jsonify({"users": userManager.getAllUsers()}) + +@app.route(BASEURL + "users", methods=["POST"]) +@login_required +@admin_permission.require(403) +def addUser(): + if userManager is None: + return jsonify(SUCCESS) + + if "application/json" in request.headers["Content-Type"]: + data = request.json + + name = data["name"] + password = data["password"] + active = data["active"] + + roles = ["user"] + if "admin" in data.keys() and data["admin"]: + roles.append("admin") + + try: + userManager.addUser(name, password, active, roles) + except users.UserAlreadyExists: + abort(409) + return getUsers() + +@app.route(BASEURL + "users/", methods=["GET"]) +@login_required +def getUser(username): + if userManager is None: + return jsonify(SUCCESS) + + if current_user is not None and not current_user.is_anonymous() and (current_user.get_name() == username or current_user.is_admin()): + user = userManager.findUser(username) + if user is not None: + return jsonify(user.asDict()) + else: + abort(404) + else: + abort(403) + +@app.route(BASEURL + "users/", methods=["PUT"]) +@login_required +@admin_permission.require(403) +def updateUser(username): + if userManager is None: + return jsonify(SUCCESS) + + user = userManager.findUser(username) + if user is not None: + if "application/json" in request.headers["Content-Type"]: + data = request.json + + # change roles + roles = ["user"] + if "admin" in data.keys() and data["admin"]: + roles.append("admin") + userManager.changeUserRoles(username, roles) + + # change activation + if "active" in data.keys(): + userManager.changeUserActivation(username, data["active"]) + return getUsers() + else: + abort(404) + +@app.route(BASEURL + "users/", methods=["DELETE"]) +@login_required +@admin_permission.require(http_exception=403) +def removeUser(username): + if userManager is None: + return jsonify(SUCCESS) + + try: + userManager.removeUser(username) + return getUsers() + except users.UnknownUser: + abort(404) + +@app.route(BASEURL + "users//password", methods=["PUT"]) +@login_required +def changePasswordForUser(username): + if userManager is None: + return jsonify(SUCCESS) + + if current_user is not None and not current_user.is_anonymous() and (current_user.get_name() == username or current_user.is_admin()): + if "application/json" in request.headers["Content-Type"]: + data = request.json + if "password" in data.keys() and data["password"]: + try: + userManager.changeUserPassword(username, data["password"]) + except users.UnknownUser: + return app.make_response(("Unknown user: %s" % username, 404, [])) + return jsonify(SUCCESS) + else: + return app.make_response(("Forbidden", 403, [])) + #~~ system control @app.route(BASEURL + "system", methods=["POST"]) +@login_required +@admin_permission.require(403) def performSystemAction(): logger = logging.getLogger(__name__) if request.values.has_key("action"): @@ -446,6 +574,61 @@ def performSystemAction(): return app.make_response(("Command failed: %r" % ex, 500, [])) return jsonify(SUCCESS) +#~~ Login/user handling + +@app.route(BASEURL + "login", methods=["POST"]) +def login(): + if userManager is not None and "user" in request.values.keys() and "pass" in request.values.keys(): + username = request.values["user"] + password = request.values["pass"] + + if "remember" in request.values.keys() and request.values["remember"]: + remember = True + else: + remember = False + + user = userManager.findUser(username) + if user is not None: + if user.check_password(users.UserManager.createPasswordHash(password)): + login_user(user, remember=remember) + identity_changed.send(current_app._get_current_object(), identity=Identity(user.get_id())) + return jsonify(user.asDict()) + return app.make_response(("User unknown or password incorrect", 401, [])) + elif "passive" in request.values.keys(): + user = current_user + if user is not None and not user.is_anonymous(): + return jsonify(user.asDict()) + return jsonify(SUCCESS) + +@app.route(BASEURL + "logout", methods=["POST"]) +@login_required +def logout(): + # Remove session keys set by Flask-Principal + for key in ('identity.name', 'identity.auth_type'): + del session[key] + identity_changed.send(current_app._get_current_object(), identity=AnonymousIdentity()) + + logout_user() + + return jsonify(SUCCESS) + +@identity_loaded.connect_via(app) +def on_identity_loaded(sender, identity): + user = load_user(identity.id) + if user is None: + return + + identity.provides.add(UserNeed(user.get_name())) + if user.is_user(): + identity.provides.add(RoleNeed("user")) + if user.is_admin(): + identity.provides.add(RoleNeed("admin")) + +def load_user(id): + if userManager is not None: + return userManager.findUser(id) + return users.DummyUser() + #~~ startup code class Server(): def __init__(self, configfile=None, basedir=None, host="0.0.0.0", port=5000, debug=False): @@ -459,6 +642,7 @@ class Server(): # Global as I can't work out a way to get it into PrinterStateConnection global printer global gcodeManager + global userManager from tornado.wsgi import WSGIContainer from tornado.httpserver import HTTPServer @@ -470,19 +654,37 @@ class Server(): # then initialize logging self._initLogging(self._debug) + logger = logging.getLogger(__name__) gcodeManager = gcodefiles.GcodeManager() printer = Printer(gcodeManager) + if settings().getBoolean(["accessControl", "enabled"]): + userManagerName = settings().get(["accessControl", "userManager"]) + try: + clazz = util.getClass(userManagerName) + userManager = clazz() + except AttributeError, e: + logger.exception("Could not instantiate user manager %s, will run with accessControl disabled!" % userManagerName) + + app.secret_key = "k3PuVYgtxNm8DXKKTw2nWmFQQun9qceV" + login_manager = LoginManager() + login_manager.session_protection = "strong" + login_manager.user_callback = load_user + if userManager is None: + login_manager.anonymous_user = users.DummyUser + principals.identity_loaders.appendleft(users.dummy_identity_loader) + login_manager.init_app(app) + if self._host is None: self._host = settings().get(["server", "host"]) if self._port is None: self._port = settings().getInt(["server", "port"]) - logging.getLogger(__name__).info("Listening on http://%s:%d" % (self._host, self._port)) + logger.info("Listening on http://%s:%d" % (self._host, self._port)) app.debug = self._debug - self._router = tornadio2.TornadioRouter(PrinterStateConnection) + self._router = tornadio2.TornadioRouter(self._createSocketConnection) self._tornado_app = Application(self._router.urls + [ (".*", FallbackHandler, {"fallback": WSGIContainer(app)}) @@ -491,11 +693,15 @@ class Server(): self._server.listen(self._port, address=self._host) IOLoop.instance().start() + def _createSocketConnection(self, session, endpoint=None): + global printer, gcodeManager, userManager + return PrinterStateConnection(printer, gcodeManager, userManager, session, endpoint) + def _initSettings(self, configfile, basedir): s = settings(init=True, basedir=basedir, configfile=configfile) def _initLogging(self, debug): - self._config = { + config = { "version": 1, "formatters": { "simple": { @@ -534,13 +740,13 @@ class Server(): } if debug: - self._config["loggers"]["SERIAL"] = { + config["loggers"]["SERIAL"] = { "level": "DEBUG", "handlers": ["serialFile"], "propagate": False } - logging.config.dictConfig(self._config) + logging.config.dictConfig(config) if __name__ == "__main__": octoprint = Server() diff --git a/octoprint/settings.py b/octoprint/settings.py index 10e99b4..ed1c788 100644 --- a/octoprint/settings.py +++ b/octoprint/settings.py @@ -72,6 +72,11 @@ default_settings = { "controls": [], "system": { "actions": [] + }, + "accessControl": { + "enabled": False, + "userManager": "octoprint.users.FilebasedUserManager", + "userfile": None } } diff --git a/octoprint/static/css/bootstrap-modal.css b/octoprint/static/css/bootstrap-modal.css new file mode 100644 index 0000000..76e3be2 --- /dev/null +++ b/octoprint/static/css/bootstrap-modal.css @@ -0,0 +1,214 @@ +/*! + * Bootstrap Modal + * + * Copyright Jordan Schroter + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + */ + +.modal-open { + overflow: hidden; +} + + +/* add a scroll bar to stop page from jerking around */ +.modal-open.page-overflow .page-container, +.modal-open.page-overflow .page-container .navbar-fixed-top, +.modal-open.page-overflow .page-container .navbar-fixed-bottom, +.modal-open.page-overflow .modal-scrollable { + overflow-y: scroll; +} + +@media (max-width: 979px) { + .modal-open.page-overflow .page-container .navbar-fixed-top, + .modal-open.page-overflow .page-container .navbar-fixed-bottom { + overflow-y: visible; + } +} + + +.modal-scrollable { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: auto; +} + +.modal { + outline: none; + position: absolute; + margin-top: 0; + top: 50%; + overflow: visible; /* allow content to popup out (i.e tooltips) */ +} + +.modal.fade { + top: -100%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; +} + +.modal.fade.in { + top: 50%; +} + +.modal-body { + max-height: none; + overflow: visible; +} + +.modal.modal-absolute { + position: absolute; + z-index: 950; +} + +.modal .loading-mask { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #fff; + border-radius: 6px; +} + +.modal-backdrop.modal-absolute{ + position: absolute; + z-index: 940; +} + +.modal-backdrop, +.modal-backdrop.fade.in{ + opacity: 0.7; + filter: alpha(opacity=70); + background: #fff; +} + +.modal.container { + width: 940px; + margin-left: -470px; +} + +/* Modal Overflow */ + +.modal-overflow.modal { + top: 1%; +} + +.modal-overflow.modal.fade { + top: -100%; +} + +.modal-overflow.modal.fade.in { + top: 1%; +} + +.modal-overflow .modal-body { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +/* Responsive */ + +@media (min-width: 1200px) { + .modal.container { + width: 1170px; + margin-left: -585px; + } +} + +@media (max-width: 979px) { + .modal, + .modal.container, + .modal.modal-overflow { + top: 1%; + right: 1%; + left: 1%; + bottom: auto; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + } + + .modal.fade.in, + .modal.container.fade.in, + .modal.modal-overflow.fade.in { + top: 1%; + bottom: auto; + } + + .modal-body, + .modal-overflow .modal-body { + position: static; + margin: 0; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + .modal-footer, + .modal-overflow .modal-footer { + position: static; + } +} + +.loading-spinner { + position: absolute; + top: 50%; + left: 50%; + margin: -12px 0 0 -12px; +} + +/* +Animate.css - http://daneden.me/animate +Licensed under the ☺ license (http://licence.visualidiot.com/) + +Copyright (c) 2012 Dan Eden*/ + +.animated { + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes shake { + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} +} + +@-moz-keyframes shake { + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} +} + +@-o-keyframes shake { + 0%, 100% {-o-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} +} + +@keyframes shake { + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} +} + +.shake { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} diff --git a/octoprint/static/css/octoprint.less b/octoprint/static/css/octoprint.less index b66ef6f..2f8c258 100644 --- a/octoprint/static/css/octoprint.less +++ b/octoprint/static/css/octoprint.less @@ -113,7 +113,20 @@ body { .accordion-heading { .settings-trigger { float: right; - padding: 0px 15px; + + .dropdown-toggle { + display: inline-block; + padding: 8px 15px; + font-size: 14px; + line-height: 20px; + color: #000; + text-decoration: none; + background: none; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } } a.accordion-toggle { @@ -181,6 +194,42 @@ table { &.timelapse_files_action { text-align: center; width: 45px; + + a { + text-decoration: none; + color: #000; + + &.disabled { + color: #ccc; + cursor: default; + } + } + } + + // user settings + &.settings_users_name { + text-overflow: ellipsis; + text-align: left; + } + + &.settings_users_active, &.settings_users_admin { + text-align: center; + width: 55px; + } + + &.settings_users_actions { + text-align: center; + width: 60px; + + a { + text-decoration: none; + color: #000; + + &.disabled { + color: #ccc; + cursor: default; + } + } } } } @@ -274,9 +323,9 @@ ul.dropdown-menu li a { } } -/** Controls */ +/** Control tab */ -#controls { +#control { overflow: hidden; .jog-panel { @@ -324,7 +373,6 @@ ul.dropdown-menu li a { /** Settings dialog */ #settings_dialog { - width: 650px; } /** Footer */ diff --git a/octoprint/static/gcodeviewer/js/ui.js b/octoprint/static/gcodeviewer/js/ui.js index f780c81..4a6e32d 100644 --- a/octoprint/static/gcodeviewer/js/ui.js +++ b/octoprint/static/gcodeviewer/js/ui.js @@ -239,7 +239,7 @@ GCODE.ui = (function(){ }); if(!Modernizr.canvas)fatal.push("
  • Your browser doesn't seem to support HTML5 Canvas, this application won't work without it.
    • "); - if(!Modernizr.filereader)fatal.push("
  • Your browser doesn't seem to support HTML5 File API, this application won't work without it.
    • "); + //if(!Modernizr.filereader)fatal.push("
  • Your browser doesn't seem to support HTML5 File API, this application won't work without it.
    • "); if(!Modernizr.webworkers)fatal.push("
  • Your browser doesn't seem to support HTML5 Web Workers, this application won't work without it.
    • "); if(!Modernizr.svg)fatal.push("
  • Your browser doesn't seem to support HTML5 SVG, this application won't work without it.
    • "); @@ -249,7 +249,7 @@ GCODE.ui = (function(){ return false; } - if(!Modernizr.webgl){ + if(!Modernizr.webgl && GCODE.renderer3d){ warnings.push("
  • Your browser doesn't seem to support HTML5 Web GL, 3d mode is not recommended, going to be SLOW!
    • "); GCODE.renderer3d.setOption({rendererType: "canvas"}); } diff --git a/octoprint/static/js/bootstrap/bootstrap-modal.js b/octoprint/static/js/bootstrap/bootstrap-modal.js new file mode 100644 index 0000000..c125bd5 --- /dev/null +++ b/octoprint/static/js/bootstrap/bootstrap-modal.js @@ -0,0 +1,374 @@ +/* =========================================================== + * bootstrap-modal.js v2.1 + * =========================================================== + * Copyright 2012 Jordan Schroter + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + /* MODAL CLASS DEFINITION + * ====================== */ + + var Modal = function (element, options) { + this.init(element, options); + }; + + Modal.prototype = { + + constructor: Modal, + + init: function (element, options) { + this.options = options; + + this.$element = $(element) + .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)); + + this.options.remote && this.$element.find('.modal-body').load(this.options.remote); + + var manager = typeof this.options.manager === 'function' ? + this.options.manager.call(this) : this.options.manager; + + manager = manager.appendModal ? + manager : $(manager).modalmanager().data('modalmanager'); + + manager.appendModal(this); + }, + + toggle: function () { + return this[!this.isShown ? 'show' : 'hide'](); + }, + + show: function () { + var e = $.Event('show'); + + if (this.isShown) return; + + this.$element.trigger(e); + + if (e.isDefaultPrevented()) return; + + this.escape(); + + this.tab(); + + this.options.loading && this.loading(); + }, + + hide: function (e) { + e && e.preventDefault(); + + e = $.Event('hide'); + + this.$element.trigger(e); + + if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = false); + + this.isShown = false; + + this.escape(); + + this.tab(); + + this.isLoading && this.loading(); + + $(document).off('focusin.modal'); + + this.$element + .removeClass('in') + .removeClass('animated') + .removeClass(this.options.attentionAnimation) + .removeClass('modal-overflow') + .attr('aria-hidden', true); + + $.support.transition && this.$element.hasClass('fade') ? + this.hideWithTransition() : + this.hideModal(); + }, + + layout: function () { + var prop = this.options.height ? 'height' : 'max-height', + value = this.options.height || this.options.maxHeight; + + if (this.options.width){ + this.$element.css('width', this.options.width); + + var that = this; + this.$element.css('margin-left', function () { + if (/%/ig.test(that.options.width)){ + return -(parseInt(that.options.width) / 2) + '%'; + } else { + return -($(this).width() / 2) + 'px'; + } + }); + } else { + this.$element.css('width', ''); + this.$element.css('margin-left', ''); + } + + this.$element.find('.modal-body') + .css('overflow', '') + .css(prop, ''); + + var modalOverflow = $(window).height() - 10 < this.$element.height(); + + if (value){ + this.$element.find('.modal-body') + .css('overflow', 'auto') + .css(prop, value); + } + + if (modalOverflow || this.options.modalOverflow) { + this.$element + .css('margin-top', 0) + .addClass('modal-overflow'); + } else { + this.$element + .css('margin-top', 0 - this.$element.height() / 2) + .removeClass('modal-overflow'); + } + }, + + tab: function () { + var that = this; + + if (this.isShown && this.options.consumeTab) { + this.$element.on('keydown.tabindex.modal', '[data-tabindex]', function (e) { + if (e.keyCode && e.keyCode == 9){ + var $next = $(this), + $rollover = $(this); + + that.$element.find('[data-tabindex]:enabled:not([readonly])').each(function (e) { + if (!e.shiftKey){ + $next = $next.data('tabindex') < $(this).data('tabindex') ? + $next = $(this) : + $rollover = $(this); + } else { + $next = $next.data('tabindex') > $(this).data('tabindex') ? + $next = $(this) : + $rollover = $(this); + } + }); + + $next[0] !== $(this)[0] ? + $next.focus() : $rollover.focus(); + + e.preventDefault(); + } + }); + } else if (!this.isShown) { + this.$element.off('keydown.tabindex.modal'); + } + }, + + escape: function () { + var that = this; + if (this.isShown && this.options.keyboard) { + if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1); + + this.$element.on('keyup.dismiss.modal', function (e) { + e.which == 27 && that.hide(); + }); + } else if (!this.isShown) { + this.$element.off('keyup.dismiss.modal') + } + }, + + hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end); + that.hideModal(); + }, 500); + + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout); + that.hideModal(); + }); + }, + + hideModal: function () { + this.$element + .hide() + .trigger('hidden'); + + var prop = this.options.height ? 'height' : 'max-height'; + var value = this.options.height || this.options.maxHeight; + + if (value){ + this.$element.find('.modal-body') + .css('overflow', '') + .css(prop, ''); + } + + }, + + removeLoading: function () { + this.$loading.remove(); + this.$loading = null; + this.isLoading = false; + }, + + loading: function (callback) { + callback = callback || function () {}; + + var animate = this.$element.hasClass('fade') ? 'fade' : ''; + + if (!this.isLoading) { + var doAnimate = $.support.transition && animate; + + this.$loading = $('
    ') + .append(this.options.spinner) + .appendTo(this.$element); + + if (doAnimate) this.$loading[0].offsetWidth; // force reflow + + this.$loading.addClass('in'); + + this.isLoading = true; + + doAnimate ? + this.$loading.one($.support.transition.end, callback) : + callback(); + + } else if (this.isLoading && this.$loading) { + this.$loading.removeClass('in'); + + var that = this; + $.support.transition && this.$element.hasClass('fade')? + this.$loading.one($.support.transition.end, function () { that.removeLoading() }) : + that.removeLoading(); + + } else if (callback) { + callback(this.isLoading); + } + }, + + focus: function () { + var $focusElem = this.$element.find(this.options.focusOn); + + $focusElem = $focusElem.length ? $focusElem : this.$element; + + $focusElem.focus(); + }, + + attention: function (){ + // NOTE: transitionEnd with keyframes causes odd behaviour + + if (this.options.attentionAnimation){ + this.$element + .removeClass('animated') + .removeClass(this.options.attentionAnimation); + + var that = this; + + setTimeout(function () { + that.$element + .addClass('animated') + .addClass(that.options.attentionAnimation); + }, 0); + } + + + this.focus(); + }, + + + destroy: function () { + var e = $.Event('destroy'); + this.$element.trigger(e); + if (e.isDefaultPrevented()) return; + + this.teardown(); + }, + + teardown: function () { + if (!this.$parent.length){ + this.$element.remove(); + this.$element = null; + return; + } + + if (this.$parent !== this.$element.parent()){ + this.$element.appendTo(this.$parent); + } + + this.$element.off('.modal'); + this.$element.removeData('modal'); + this.$element + .removeClass('in') + .attr('aria-hidden', true); + } + }; + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.modal = function (option, args) { + return this.each(function () { + var $this = $(this), + data = $this.data('modal'), + options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option); + + if (!data) $this.data('modal', (data = new Modal(this, options))); + if (typeof option == 'string') data[option].apply(data, [].concat(args)); + else if (options.show) data.show() + }) + }; + + $.fn.modal.defaults = { + keyboard: true, + backdrop: true, + loading: false, + show: true, + width: null, + height: null, + maxHeight: null, + modalOverflow: false, + consumeTab: true, + focusOn: null, + replace: false, + resize: false, + attentionAnimation: 'shake', + manager: 'body', + spinner: '' + }; + + $.fn.modal.Constructor = Modal; + + + /* MODAL DATA-API + * ============== */ + + $(function () { + $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { + var $this = $(this), + href = $this.attr('href'), + $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7 + option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()); + + e.preventDefault(); + $target + .modal(option) + .one('hide', function () { + $this.focus(); + }) + }); + }); + +}(window.jQuery); diff --git a/octoprint/static/js/bootstrap/bootstrap-modalmanager.js b/octoprint/static/js/bootstrap/bootstrap-modalmanager.js new file mode 100644 index 0000000..1982975 --- /dev/null +++ b/octoprint/static/js/bootstrap/bootstrap-modalmanager.js @@ -0,0 +1,412 @@ +/* =========================================================== + * bootstrap-modalmanager.js v2.1 + * =========================================================== + * Copyright 2012 Jordan Schroter. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +!function ($) { + + "use strict"; // jshint ;_; + + /* MODAL MANAGER CLASS DEFINITION + * ====================== */ + + var ModalManager = function (element, options) { + this.init(element, options); + }; + + ModalManager.prototype = { + + constructor: ModalManager, + + init: function (element, options) { + this.$element = $(element); + this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options); + this.stack = []; + this.backdropCount = 0; + + if (this.options.resize) { + var resizeTimeout, + that = this; + + $(window).on('resize.modal', function(){ + resizeTimeout && clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(function(){ + for (var i = 0; i < that.stack.length; i++){ + that.stack[i].isShown && that.stack[i].layout(); + } + }, 10); + }); + } + }, + + createModal: function (element, options) { + $(element).modal($.extend({ manager: this }, options)); + }, + + appendModal: function (modal) { + this.stack.push(modal); + + var that = this; + + modal.$element.on('show.modalmanager', targetIsSelf(function (e) { + + var showModal = function(){ + modal.isShown = true; + + var transition = $.support.transition && modal.$element.hasClass('fade'); + + that.$element + .toggleClass('modal-open', that.hasOpenModal()) + .toggleClass('page-overflow', $(window).height() < that.$element.height()); + + modal.$parent = modal.$element.parent(); + + modal.$container = that.createContainer(modal); + + modal.$element.appendTo(modal.$container); + + that.backdrop(modal, function () { + + modal.$element.show(); + + if (transition) { + //modal.$element[0].style.display = 'run-in'; + modal.$element[0].offsetWidth; + //modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' }); + } + + modal.layout(); + + modal.$element + .addClass('in') + .attr('aria-hidden', false); + + var complete = function () { + that.setFocus(); + modal.$element.trigger('shown'); + }; + + transition ? + modal.$element.one($.support.transition.end, complete) : + complete(); + }); + }; + + modal.options.replace ? + that.replace(showModal) : + showModal(); + })); + + modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) { + + that.backdrop(modal); + + if (modal.$backdrop){ + $.support.transition && modal.$element.hasClass('fade') ? + modal.$backdrop.one($.support.transition.end, function () { that.destroyModal(modal) }) : + that.destroyModal(modal); + } else { + that.destroyModal(modal); + } + + })); + + modal.$element.on('destroy.modalmanager', targetIsSelf(function (e) { + that.removeModal(modal); + })); + + }, + + destroyModal: function (modal) { + + modal.destroy(); + + var hasOpenModal = this.hasOpenModal(); + + this.$element.toggleClass('modal-open', hasOpenModal); + + if (!hasOpenModal){ + this.$element.removeClass('page-overflow'); + } + + this.removeContainer(modal); + + this.setFocus(); + }, + + hasOpenModal: function () { + for (var i = 0; i < this.stack.length; i++){ + if (this.stack[i].isShown) return true; + } + + return false; + }, + + setFocus: function () { + var topModal; + + for (var i = 0; i < this.stack.length; i++){ + if (this.stack[i].isShown) topModal = this.stack[i]; + } + + if (!topModal) return; + + topModal.focus(); + + }, + + removeModal: function (modal) { + modal.$element.off('.modalmanager'); + if (modal.$backdrop) this.removeBackdrop.call(modal); + this.stack.splice(this.getIndexOfModal(modal), 1); + }, + + getModalAt: function (index) { + return this.stack[index]; + }, + + getIndexOfModal: function (modal) { + for (var i = 0; i < this.stack.length; i++){ + if (modal === this.stack[i]) return i; + } + }, + + replace: function (callback) { + var topModal; + + for (var i = 0; i < this.stack.length; i++){ + if (this.stack[i].isShown) topModal = this.stack[i]; + } + + if (topModal) { + this.$backdropHandle = topModal.$backdrop; + topModal.$backdrop = null; + + callback && topModal.$element.one('hidden', + targetIsSelf( $.proxy(callback, this) )); + + topModal.hide(); + } else if (callback) { + callback(); + } + }, + + removeBackdrop: function (modal) { + modal.$backdrop.remove(); + modal.$backdrop = null; + }, + + createBackdrop: function (animate) { + var $backdrop; + + if (!this.$backdropHandle) { + $backdrop = $('
    ') + .appendTo(this.$element); + } else { + $backdrop = this.$backdropHandle; + $backdrop.off('.modalmanager'); + this.$backdropHandle = null; + this.isLoading && this.removeSpinner(); + } + + return $backdrop + }, + + removeContainer: function (modal) { + modal.$container.remove(); + modal.$container = null; + }, + + createContainer: function (modal) { + var $container; + + $container = $('
    ') + .css('z-index', getzIndex( 'modal', + modal ? this.getIndexOfModal(modal) : this.stack.length )) + .appendTo(this.$element); + + if (modal && modal.options.backdrop != 'static') { + $container.on('click.modal', targetIsSelf(function (e) { + modal.hide(); + })); + } else if (modal) { + $container.on('click.modal', targetIsSelf(function (e) { + modal.attention(); + })); + } + + return $container; + + }, + + backdrop: function (modal, callback) { + var animate = modal.$element.hasClass('fade') ? 'fade' : '', + showBackdrop = modal.options.backdrop && + this.backdropCount < this.options.backdropLimit; + + if (modal.isShown && showBackdrop) { + var doAnimate = $.support.transition && animate && !this.$backdropHandle; + + modal.$backdrop = this.createBackdrop(animate); + + modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getIndexOfModal(modal) )); + + if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow + + modal.$backdrop.addClass('in'); + + this.backdropCount += 1; + + doAnimate ? + modal.$backdrop.one($.support.transition.end, callback) : + callback(); + + } else if (!modal.isShown && modal.$backdrop) { + modal.$backdrop.removeClass('in'); + + this.backdropCount -= 1; + + var that = this; + + $.support.transition && modal.$element.hasClass('fade')? + modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) : + that.removeBackdrop(modal); + + } else if (callback) { + callback(); + } + }, + + removeSpinner: function(){ + this.$spinner && this.$spinner.remove(); + this.$spinner = null; + this.isLoading = false; + }, + + removeLoading: function () { + this.$backdropHandle && this.$backdropHandle.remove(); + this.$backdropHandle = null; + this.removeSpinner(); + }, + + loading: function (callback) { + callback = callback || function () { }; + + this.$element + .toggleClass('modal-open', !this.isLoading || this.hasOpenModal()) + .toggleClass('page-overflow', $(window).height() < this.$element.height()); + + if (!this.isLoading) { + + this.$backdropHandle = this.createBackdrop('fade'); + + this.$backdropHandle[0].offsetWidth; // force reflow + + this.$backdropHandle + .css('z-index', getzIndex('backdrop', this.stack.length)) + .addClass('in'); + + var $spinner = $(this.options.spinner) + .css('z-index', getzIndex('modal', this.stack.length)) + .appendTo(this.$element) + .addClass('in'); + + this.$spinner = $(this.createContainer()) + .append($spinner) + .on('click.modalmanager', $.proxy(this.loading, this)); + + this.isLoading = true; + + $.support.transition ? + this.$backdropHandle.one($.support.transition.end, callback) : + callback(); + + } else if (this.isLoading && this.$backdropHandle) { + this.$backdropHandle.removeClass('in'); + + var that = this; + $.support.transition ? + this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) : + that.removeLoading(); + + } else if (callback) { + callback(this.isLoading); + } + } + }; + + /* PRIVATE METHODS + * ======================= */ + + // computes and caches the zindexes + var getzIndex = (function () { + var zIndexFactor, + baseIndex = {}; + + return function (type, pos) { + + if (typeof zIndexFactor === 'undefined'){ + var $baseModal = $('
    ').appendTo('body'), + $baseBackdrop = $('
    ').appendTo('body'); + + baseIndex['modal'] = +$baseModal.css('z-index'); + baseIndex['backdrop'] = +$baseBackdrop.css('z-index'); + zIndexFactor = baseIndex['modal'] - baseIndex['backdrop']; + + $baseModal.remove(); + $baseBackdrop.remove(); + $baseBackdrop = $baseModal = null; + } + + return baseIndex[type] + (zIndexFactor * pos); + + } + }()); + + // make sure the event target is the modal itself in order to prevent + // other components such as tabsfrom triggering the modal manager. + // if Boostsrap namespaced events, this would not be needed. + function targetIsSelf(callback){ + return function (e) { + if (this === e.target){ + return callback.apply(this, arguments); + } + } + } + + + /* MODAL MANAGER PLUGIN DEFINITION + * ======================= */ + + $.fn.modalmanager = function (option, args) { + return this.each(function () { + var $this = $(this), + data = $this.data('modalmanager'); + + if (!data) $this.data('modalmanager', (data = new ModalManager(this, option))); + if (typeof option === 'string') data[option].apply(data, [].concat(args)) + }) + }; + + $.fn.modalmanager.defaults = { + backdropLimit: 999, + resize: true, + spinner: '' + }; + + $.fn.modalmanager.Constructor = ModalManager + +}(jQuery); diff --git a/octoprint/static/js/bootstrap.js b/octoprint/static/js/bootstrap/bootstrap.js similarity index 100% rename from octoprint/static/js/bootstrap.js rename to octoprint/static/js/bootstrap/bootstrap.js diff --git a/octoprint/static/js/bootstrap.min.js b/octoprint/static/js/bootstrap/bootstrap.min.js similarity index 100% rename from octoprint/static/js/bootstrap.min.js rename to octoprint/static/js/bootstrap/bootstrap.min.js diff --git a/octoprint/static/js/jquery.fileupload.js b/octoprint/static/js/jquery/jquery.fileupload.js similarity index 99% rename from octoprint/static/js/jquery.fileupload.js rename to octoprint/static/js/jquery/jquery.fileupload.js index bc96a07..10f20d3 100644 --- a/octoprint/static/js/jquery.fileupload.js +++ b/octoprint/static/js/jquery/jquery.fileupload.js @@ -18,7 +18,7 @@ // Register as an anonymous AMD module: define([ 'jquery', - 'jquery.ui.widget' + 'jquery.ui.widget.js' ], factory); } else { // Browser globals: diff --git a/octoprint/static/js/jquery.flot.js b/octoprint/static/js/jquery/jquery.flot.js similarity index 100% rename from octoprint/static/js/jquery.flot.js rename to octoprint/static/js/jquery/jquery.flot.js diff --git a/octoprint/static/js/jquery.iframe-transport.js b/octoprint/static/js/jquery/jquery.iframe-transport.js similarity index 100% rename from octoprint/static/js/jquery.iframe-transport.js rename to octoprint/static/js/jquery/jquery.iframe-transport.js diff --git a/octoprint/static/js/jquery.pnotify.min.js b/octoprint/static/js/jquery/jquery.pnotify.min.js similarity index 100% rename from octoprint/static/js/jquery.pnotify.min.js rename to octoprint/static/js/jquery/jquery.pnotify.min.js diff --git a/octoprint/static/js/jquery.ui.core.js b/octoprint/static/js/jquery/jquery.ui.core.js similarity index 100% rename from octoprint/static/js/jquery.ui.core.js rename to octoprint/static/js/jquery/jquery.ui.core.js diff --git a/octoprint/static/js/jquery.ui.mouse.js b/octoprint/static/js/jquery/jquery.ui.mouse.js similarity index 100% rename from octoprint/static/js/jquery.ui.mouse.js rename to octoprint/static/js/jquery/jquery.ui.mouse.js diff --git a/octoprint/static/js/jquery.ui.slider.js b/octoprint/static/js/jquery/jquery.ui.slider.js similarity index 100% rename from octoprint/static/js/jquery.ui.slider.js rename to octoprint/static/js/jquery/jquery.ui.slider.js diff --git a/octoprint/static/js/jquery.ui.widget.js b/octoprint/static/js/jquery/jquery.ui.widget.js similarity index 100% rename from octoprint/static/js/jquery.ui.widget.js rename to octoprint/static/js/jquery/jquery.ui.widget.js diff --git a/octoprint/static/js/knockout-2.2.1.js b/octoprint/static/js/knockout.js similarity index 100% rename from octoprint/static/js/knockout-2.2.1.js rename to octoprint/static/js/knockout.js diff --git a/octoprint/static/js/WebSocketMain.swf b/octoprint/static/js/socket.io/WebSocketMain.swf similarity index 100% rename from octoprint/static/js/WebSocketMain.swf rename to octoprint/static/js/socket.io/WebSocketMain.swf diff --git a/octoprint/static/js/WebSocketMainInsecure.swf b/octoprint/static/js/socket.io/WebSocketMainInsecure.swf similarity index 100% rename from octoprint/static/js/WebSocketMainInsecure.swf rename to octoprint/static/js/socket.io/WebSocketMainInsecure.swf diff --git a/octoprint/static/js/socket.io.js b/octoprint/static/js/socket.io/socket.io.js similarity index 100% rename from octoprint/static/js/socket.io.js rename to octoprint/static/js/socket.io/socket.io.js diff --git a/octoprint/static/js/socket.io.min.js b/octoprint/static/js/socket.io/socket.io.min.js similarity index 100% rename from octoprint/static/js/socket.io.min.js rename to octoprint/static/js/socket.io/socket.io.min.js diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js index 222df2b..0d34400 100644 --- a/octoprint/static/js/ui.js +++ b/octoprint/static/js/ui.js @@ -1,8 +1,99 @@ //~~ View models -function ConnectionViewModel() { +function LoginStateViewModel() { var self = this; + self.loggedIn = ko.observable(false); + self.username = ko.observable(undefined); + self.isAdmin = ko.observable(false); + self.isUser = ko.observable(false); + + self.currentUser = ko.observable(undefined); + + self.userMenuText = ko.computed(function() { + if (self.loggedIn()) { + return "\"" + self.username() + "\""; + } else { + return "Login"; + } + }) + + self.subscribers = []; + self.subscribe = function(callback) { + self.subscribers.push(callback); + } + + self.requestData = function() { + $.ajax({ + url: AJAX_BASEURL + "login", + type: "POST", + data: {"passive": true}, + success: self.fromResponse + }) + } + + self.fromResponse = function(response) { + if (response && response.name) { + self.loggedIn(true); + self.username(response.name); + self.isUser(response.user); + self.isAdmin(response.admin); + + self.currentUser(response); + + _.each(self.subscribers, function(callback) { callback("login", response); }); + } else { + self.loggedIn(false); + self.username(undefined); + self.isUser(false); + self.isAdmin(false); + + self.currentUser(undefined); + + _.each(self.subscribers, function(callback) { callback("logout", {}); }); + } + } + + self.login = function() { + var username = $("#login_user").val(); + var password = $("#login_pass").val(); + var remember = $("#login_remember").is(":checked"); + + $("#login_user").val(""); + $("#login_pass").val(""); + $("#login_remember").prop("checked", false); + + $.ajax({ + url: AJAX_BASEURL + "login", + type: "POST", + data: {"user": username, "pass": password, "remember": remember}, + success: function(response) { + $.pnotify({title: "Login successful", text: "You are now logged in as \"" + response.name + "\"", type: "success"}); + self.fromResponse(response); + }, + error: function(jqXHR, textStatus, errorThrown) { + $.pnotify({title: "Login failed", text: "User unknown or wrong password", type: "error"}); + } + }) + } + + self.logout = function() { + $.ajax({ + url: AJAX_BASEURL + "logout", + type: "POST", + success: function(response) { + $.pnotify({title: "Logout successful", text: "You are now logged out", type: "success"}); + self.fromResponse(response); + } + }) + } +} + +function ConnectionViewModel(loginStateViewModel) { + var self = this; + + self.loginState = loginStateViewModel; + self.portOptions = ko.observableArray(undefined); self.baudrateOptions = ko.observableArray(undefined); self.selectedPort = ko.observable(undefined); @@ -28,7 +119,7 @@ function ConnectionViewModel() { self.requestData = function() { $.ajax({ - url: AJAX_BASEURL + "control/connectionOptions", + url: AJAX_BASEURL + "control/connection/options", method: "GET", dataType: "json", success: function(response) { @@ -83,6 +174,7 @@ function ConnectionViewModel() { self.connect = function() { if (self.isErrorOrClosed()) { var data = { + "command": "connect", "port": self.selectedPort(), "baudrate": self.selectedBaudrate() }; @@ -91,7 +183,7 @@ function ConnectionViewModel() { data["save"] = true; $.ajax({ - url: AJAX_BASEURL + "control/connect", + url: AJAX_BASEURL + "control/connection", type: "POST", dataType: "json", data: data @@ -99,17 +191,20 @@ function ConnectionViewModel() { } else { self.requestData(); $.ajax({ - url: AJAX_BASEURL + "control/disconnect", + url: AJAX_BASEURL + "control/connection", type: "POST", - dataType: "json" + dataType: "json", + data: {"command": "disconnect"} }) } } } -function PrinterStateViewModel() { +function PrinterStateViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.stateString = ko.observable(undefined); self.isErrorOrClosed = ko.observable(undefined); self.isOperational = ko.observable(undefined); @@ -200,11 +295,45 @@ function PrinterStateViewModel() { self._processZData = function(data) { self.currentHeight(data); } + + self.print = function() { + var printAction = function() { + self._jobCommand("start"); + } + + if (self.isPaused()) { + $("#confirmation_dialog .confirmation_dialog_message").text("This will restart the print job from the beginning."); + $("#confirmation_dialog .confirmation_dialog_acknowledge").click(function(e) {e.preventDefault(); $("#confirmation_dialog").modal("hide"); printAction(); }); + $("#confirmation_dialog").modal("show"); + } else { + printAction(); + } + + } + + self.pause = function() { + self._jobCommand("pause"); + } + + self.cancel = function() { + self._jobCommand("cancel"); + } + + self._jobCommand = function(command) { + $.ajax({ + url: AJAX_BASEURL + "control/job", + type: "POST", + dataType: "json", + data: {command: command} + }); + } } -function TemperatureViewModel(settingsViewModel) { +function TemperatureViewModel(loginStateViewModel, settingsViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.temp = ko.observable(undefined); self.bedTemp = ko.observable(undefined); self.targetTemp = ko.observable(undefined); @@ -376,9 +505,11 @@ function TemperatureViewModel(settingsViewModel) { } } -function ControlsViewModel() { +function ControlViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.isErrorOrClosed = ko.observable(undefined); self.isOperational = ko.observable(undefined); self.isPrinting = ko.observable(undefined); @@ -531,66 +662,10 @@ function ControlsViewModel() { } -function SpeedViewModel() { +function TerminalViewModel(loginStateViewModel) { var self = this; - self.outerWall = ko.observable(undefined); - self.innerWall = ko.observable(undefined); - self.fill = ko.observable(undefined); - self.support = ko.observable(undefined); - - self.isErrorOrClosed = ko.observable(undefined); - self.isOperational = ko.observable(undefined); - self.isPrinting = ko.observable(undefined); - self.isPaused = ko.observable(undefined); - self.isError = ko.observable(undefined); - self.isReady = ko.observable(undefined); - self.isLoading = ko.observable(undefined); - - self._fromCurrentData = function(data) { - self._processStateData(data.state); - } - - self._fromHistoryData = function(data) { - self._processStateData(data.state); - } - - self._processStateData = function(data) { - self.isErrorOrClosed(data.flags.closedOrError); - self.isOperational(data.flags.operational); - self.isPaused(data.flags.paused); - self.isPrinting(data.flags.printing); - self.isError(data.flags.error); - self.isReady(data.flags.ready); - self.isLoading(data.flags.loading); - } - - self.requestData = function() { - $.ajax({ - url: AJAX_BASEURL + "control/speed", - type: "GET", - dataType: "json", - success: self._fromResponse - }); - } - - self._fromResponse = function(response) { - if (response.feedrate) { - self.outerWall(response.feedrate.outerWall); - self.innerWall(response.feedrate.innerWall); - self.fill(response.feedrate.fill); - self.support(response.feedrate.support); - } else { - self.outerWall(undefined); - self.innerWall(undefined); - self.fill(undefined); - self.support(undefined); - } - } -} - -function TerminalViewModel() { - var self = this; + self.loginState = loginStateViewModel; self.log = []; @@ -655,9 +730,11 @@ function TerminalViewModel() { } } -function GcodeFilesViewModel() { +function GcodeFilesViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.isErrorOrClosed = ko.observable(undefined); self.isOperational = ko.observable(undefined); self.isPrinting = ko.observable(undefined); @@ -700,11 +777,11 @@ function GcodeFilesViewModel() { ); self.isLoadActionPossible = ko.computed(function() { - return !self.isPrinting() && !self.isPaused() && !self.isLoading(); + return self.loginState.isUser() && !self.isPrinting() && !self.isPaused() && !self.isLoading(); }); self.isLoadAndPrintActionPossible = ko.computed(function() { - return self.isOperational() && self.isLoadActionPossible(); + return self.loginState.isUser() && self.isOperational() && self.isLoadActionPossible(); }); self.fromCurrentData = function(data) { @@ -789,9 +866,11 @@ function GcodeFilesViewModel() { } -function WebcamViewModel() { +function TimelapseViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.timelapseType = ko.observable(undefined); self.timelapseTimedInterval = ko.observable(undefined); @@ -848,7 +927,6 @@ function WebcamViewModel() { dataType: "json", success: self.fromResponse }); - $("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime()); } self.fromResponse = function(response) { @@ -909,9 +987,11 @@ function WebcamViewModel() { } } -function GcodeViewModel() { +function GcodeViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + self.loadedFilename = undefined; self.status = 'idle'; self.enabled = false; @@ -972,9 +1052,202 @@ function GcodeViewModel() { } -function SettingsViewModel() { +function UsersViewModel(loginStateViewModel) { var self = this; + self.loginState = loginStateViewModel; + + // initialize list helper + self.listHelper = new ItemListHelper( + "users", + { + "name": function(a, b) { + // sorts ascending + if (a["name"].toLocaleLowerCase() < b["name"].toLocaleLowerCase()) return -1; + if (a["name"].toLocaleLowerCase() > b["name"].toLocaleLowerCase()) return 1; + return 0; + } + }, + {}, + "name", + [], + CONFIG_USERSPERPAGE + ); + + self.emptyUser = {name: "", admin: false, active: false}; + + self.currentUser = ko.observable(self.emptyUser); + + self.editorUsername = ko.observable(undefined); + self.editorPassword = ko.observable(undefined); + self.editorRepeatedPassword = ko.observable(undefined); + self.editorAdmin = ko.observable(undefined); + self.editorActive = ko.observable(undefined); + + self.currentUser.subscribe(function(newValue) { + if (newValue === undefined) { + self.editorUsername(undefined); + self.editorAdmin(undefined); + self.editorActive(undefined); + } else { + self.editorUsername(newValue.name); + self.editorAdmin(newValue.admin); + self.editorActive(newValue.active); + } + self.editorPassword(undefined); + self.editorRepeatedPassword(undefined); + }); + + self.editorPasswordMismatch = ko.computed(function() { + return self.editorPassword() != self.editorRepeatedPassword(); + }); + + self.requestData = function() { + if (!CONFIG_ACCESS_CONTROL) return; + + $.ajax({ + url: AJAX_BASEURL + "users", + type: "GET", + dataType: "json", + success: self.fromResponse + }); + } + + self.fromResponse = function(response) { + self.listHelper.updateItems(response.users); + } + + self.showAddUserDialog = function() { + if (!CONFIG_ACCESS_CONTROL) return; + + self.currentUser(undefined); + self.editorActive(true); + $("#settings-usersDialogAddUser").modal("show"); + } + + self.confirmAddUser = function() { + if (!CONFIG_ACCESS_CONTROL) return; + + var user = {name: self.editorUsername(), password: self.editorPassword(), admin: self.editorAdmin(), active: self.editorActive()}; + self.addUser(user, function() { + // close dialog + self.currentUser(undefined); + $("#settings-usersDialogAddUser").modal("hide"); + }); + } + + self.showEditUserDialog = function(user) { + if (!CONFIG_ACCESS_CONTROL) return; + + self.currentUser(user); + $("#settings-usersDialogEditUser").modal("show"); + } + + self.confirmEditUser = function() { + if (!CONFIG_ACCESS_CONTROL) return; + + var user = self.currentUser(); + user.active = self.editorActive(); + user.admin = self.editorAdmin(); + + // make AJAX call + self.updateUser(user, function() { + // close dialog + self.currentUser(undefined); + $("#settings-usersDialogEditUser").modal("hide"); + }); + } + + self.showChangePasswordDialog = function(user) { + if (!CONFIG_ACCESS_CONTROL) return; + + self.currentUser(user); + $("#settings-usersDialogChangePassword").modal("show"); + } + + self.confirmChangePassword = function() { + if (!CONFIG_ACCESS_CONTROL) return; + + self.updatePassword(self.currentUser().name, self.editorPassword(), function() { + // close dialog + self.currentUser(undefined); + $("#settings-usersDialogChangePassword").modal("hide"); + }); + } + + //~~ AJAX calls + + self.addUser = function(user, callback) { + if (!CONFIG_ACCESS_CONTROL) return; + if (user === undefined) return; + + $.ajax({ + url: AJAX_BASEURL + "users", + type: "POST", + contentType: "application/json; charset=UTF-8", + data: JSON.stringify(user), + success: function(response) { + self.fromResponse(response); + callback(); + } + }); + } + + self.removeUser = function(user, callback) { + if (!CONFIG_ACCESS_CONTROL) return; + if (user === undefined) return; + + if (user.name == loginStateViewModel.username()) { + // we do not allow to delete ourself + $.pnotify({title: "Not possible", text: "You may not delete your own account.", type: "error"}); + return; + } + + $.ajax({ + url: AJAX_BASEURL + "users/" + user.name, + type: "DELETE", + success: function(response) { + self.fromResponse(response); + callback(); + } + }); + } + + self.updateUser = function(user, callback) { + if (!CONFIG_ACCESS_CONTROL) return; + if (user === undefined) return; + + $.ajax({ + url: AJAX_BASEURL + "users/" + user.name, + type: "PUT", + contentType: "application/json; charset=UTF-8", + data: JSON.stringify(user), + success: function(response) { + self.fromResponse(response); + callback(); + } + }); + } + + self.updatePassword = function(username, password, callback) { + if (!CONFIG_ACCESS_CONTROL) return; + + $.ajax({ + url: AJAX_BASEURL + "users/" + username + "/password", + type: "PUT", + contentType: "application/json; charset=UTF-8", + data: JSON.stringify({password: password}), + success: callback + }); + } +} + +function SettingsViewModel(loginStateViewModel, usersViewModel) { + var self = this; + + self.loginState = loginStateViewModel; + self.users = usersViewModel; + self.appearance_name = ko.observable(undefined); self.appearance_color = ko.observable(undefined); @@ -1020,7 +1293,7 @@ function SettingsViewModel() { type: "GET", dataType: "json", success: self.fromResponse - }) + }); } self.fromResponse = function(response) { @@ -1107,11 +1380,13 @@ function SettingsViewModel() { } -function NavigationViewModel(appearanceViewModel, settingsViewModel) { +function NavigationViewModel(loginStateViewModel, appearanceViewModel, settingsViewModel, usersViewModel) { var self = this; + self.loginState = loginStateViewModel; self.appearance = appearanceViewModel; self.systemActions = settingsViewModel.system_actions; + self.users = usersViewModel; self.triggerAction = function(action) { var callback = function() { @@ -1138,24 +1413,26 @@ function NavigationViewModel(appearanceViewModel, settingsViewModel) { } } -function DataUpdater(connectionViewModel, printerStateViewModel, temperatureViewModel, controlsViewModel, speedViewModel, terminalViewModel, gcodeFilesViewModel, webcamViewModel, gcodeViewModel) { +function DataUpdater(loginStateViewModel, connectionViewModel, printerStateViewModel, temperatureViewModel, controlViewModel, terminalViewModel, gcodeFilesViewModel, timelapseViewModel, gcodeViewModel) { var self = this; + self.loginStateViewModel = loginStateViewModel; self.connectionViewModel = connectionViewModel; self.printerStateViewModel = printerStateViewModel; self.temperatureViewModel = temperatureViewModel; - self.controlsViewModel = controlsViewModel; + self.controlViewModel = controlViewModel; self.terminalViewModel = terminalViewModel; - self.speedViewModel = speedViewModel; self.gcodeFilesViewModel = gcodeFilesViewModel; - self.webcamViewModel = webcamViewModel; + self.timelapseViewModel = timelapseViewModel; self.gcodeViewModel = gcodeViewModel; self._socket = io.connect(); self._socket.on("connect", function() { if ($("#offline_overlay").is(":visible")) { $("#offline_overlay").hide(); - self.webcamViewModel.requestData(); + self.timelapseViewModel.requestData(); + $("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime()); + self.loginStateViewModel.requestData(); } }) self._socket.on("disconnect", function() { @@ -1177,9 +1454,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView self.connectionViewModel.fromHistoryData(data); self.printerStateViewModel.fromHistoryData(data); self.temperatureViewModel.fromHistoryData(data); - self.controlsViewModel.fromHistoryData(data); + self.controlViewModel.fromHistoryData(data); self.terminalViewModel.fromHistoryData(data); - self.webcamViewModel.fromHistoryData(data); + self.timelapseViewModel.fromHistoryData(data); self.gcodeViewModel.fromHistoryData(data); self.gcodeFilesViewModel.fromCurrentData(data); }) @@ -1187,9 +1464,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView self.connectionViewModel.fromCurrentData(data); self.printerStateViewModel.fromCurrentData(data); self.temperatureViewModel.fromCurrentData(data); - self.controlsViewModel.fromCurrentData(data); + self.controlViewModel.fromCurrentData(data); self.terminalViewModel.fromCurrentData(data); - self.webcamViewModel.fromCurrentData(data); + self.timelapseViewModel.fromCurrentData(data); self.gcodeViewModel.fromCurrentData(data); self.gcodeFilesViewModel.fromCurrentData(data); }) @@ -1451,36 +1728,38 @@ function AppearanceViewModel(settingsViewModel) { $(function() { //~~ View models - var connectionViewModel = new ConnectionViewModel(); - var printerStateViewModel = new PrinterStateViewModel(); - var settingsViewModel = new SettingsViewModel(); + var loginStateViewModel = new LoginStateViewModel(loginStateViewModel); + var usersViewModel = new UsersViewModel(loginStateViewModel); + var connectionViewModel = new ConnectionViewModel(loginStateViewModel); + var printerStateViewModel = new PrinterStateViewModel(loginStateViewModel); + var settingsViewModel = new SettingsViewModel(loginStateViewModel, usersViewModel); var appearanceViewModel = new AppearanceViewModel(settingsViewModel); - var temperatureViewModel = new TemperatureViewModel(settingsViewModel); - var controlsViewModel = new ControlsViewModel(); - var speedViewModel = new SpeedViewModel(); - var terminalViewModel = new TerminalViewModel(); - var gcodeFilesViewModel = new GcodeFilesViewModel(); - var webcamViewModel = new WebcamViewModel(); - var gcodeViewModel = new GcodeViewModel(); - var navigationViewModel = new NavigationViewModel(appearanceViewModel, settingsViewModel); + var temperatureViewModel = new TemperatureViewModel(loginStateViewModel, settingsViewModel); + var controlViewModel = new ControlViewModel(loginStateViewModel); + var terminalViewModel = new TerminalViewModel(loginStateViewModel); + var gcodeFilesViewModel = new GcodeFilesViewModel(loginStateViewModel); + var timelapseViewModel = new TimelapseViewModel(loginStateViewModel); + var gcodeViewModel = new GcodeViewModel(loginStateViewModel); + var navigationViewModel = new NavigationViewModel(loginStateViewModel, appearanceViewModel, settingsViewModel, usersViewModel); var dataUpdater = new DataUpdater( + loginStateViewModel, connectionViewModel, printerStateViewModel, temperatureViewModel, - controlsViewModel, - speedViewModel, + controlViewModel, terminalViewModel, gcodeFilesViewModel, - webcamViewModel, + timelapseViewModel, gcodeViewModel ); - //work around a stupid iOS6 bug where ajax requests get cached and only work once, as described at http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results + // work around a stupid iOS6 bug where ajax requests get cached and only work once, as described at + // http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results $.ajaxSetup({ - type: 'POST', - headers: { "cache-control": "no-cache" } - }); + type: 'POST', + headers: { "cache-control": "no-cache" } + }); //~~ Show settings - to ensure centered $('#navbar_show_settings').click(function() { @@ -1492,31 +1771,7 @@ $(function() { return false; }) - //~~ Print job control - - $("#job_print").click(function() { - $.ajax({ - url: AJAX_BASEURL + "control/print", - type: "POST", - dataType: "json", - success: function(){} - }) - }) - $("#job_pause").click(function() { - $("#job_pause").button("toggle"); - $.ajax({ - url: AJAX_BASEURL + "control/pause", - type: "POST", - dataType: "json" - }) - }) - $("#job_cancel").click(function() { - $.ajax({ - url: AJAX_BASEURL + "control/cancel", - type: "POST", - dataType: "json" - }) - }) + //~~ Print job control (should move to PrinterStateViewModel) //~~ Temperature control (should really move to knockout click binding) @@ -1542,34 +1797,22 @@ $(function() { }) $('#tabs a[data-toggle="tab"]').on('shown', function (e) { temperatureViewModel.updatePlot(); + terminalViewModel.updateOutput(); }); - //~~ Speed controls - - function speedCommand(structure) { - var speedSetting = $("#speed_" + structure).val(); - if (speedSetting) { - $.ajax({ - url: AJAX_BASEURL + "control/speed", - type: "POST", - dataType: "json", - data: structure + "=" + speedSetting, - success: function(response) { - $("#speed_" + structure).val("") - speedViewModel.fromResponse(response); - } - }) - } - } - $("#speed_outerWall_set").click(function() {speedCommand("outerWall")}); - $("#speed_innerWall_set").click(function() {speedCommand("innerWall")}); - $("#speed_support_set").click(function() {speedCommand("support")}); - $("#speed_fill_set").click(function() {speedCommand("fill")}); - //~~ Terminal $("#terminal-send").click(function () { var command = $("#terminal-command").val(); + + /* + var re = /^([gm][0-9]+)(\s.*)?/; + var commandMatch = command.match(re); + if (commandMatch != null) { + command = commandMatch[1].toUpperCase() + ((commandMatch[2] !== undefined) ? commandMatch[2] : ""); + } + */ + if (command) { $.ajax({ url: AJAX_BASEURL + "control/command", @@ -1613,23 +1856,6 @@ $(function() { //~~ Offline overlay $("#offline_overlay_reconnect").click(function() {dataUpdater.reconnect()}); - //~~ Alert - - /* - function displayAlert(text, timeout, type) { - var placeholder = $("#alert_placeholder"); - - var alertType = ""; - if (type == "success" || type == "error" || type == "info") { - alertType = " alert-" + type; - } - - placeholder.append($("

    " + text + "

    ")); - placeholder.fadeIn(); - $("#activeAlert").delay(timeout).fadeOut("slow", function() {$(this).remove(); $("#alert_placeholder").hide();}); - } - */ - //~~ knockout.js bindings ko.bindingHandlers.popover = { @@ -1649,34 +1875,46 @@ $(function() { } } - ko.applyBindings(connectionViewModel, document.getElementById("connection")); - ko.applyBindings(printerStateViewModel, document.getElementById("state")); - ko.applyBindings(gcodeFilesViewModel, document.getElementById("files")); - ko.applyBindings(gcodeFilesViewModel, document.getElementById("files-heading")); + ko.applyBindings(connectionViewModel, document.getElementById("connection_accordion")); + ko.applyBindings(printerStateViewModel, document.getElementById("state_accordion")); + ko.applyBindings(gcodeFilesViewModel, document.getElementById("files_accordion")); ko.applyBindings(temperatureViewModel, document.getElementById("temp")); - ko.applyBindings(controlsViewModel, document.getElementById("controls")); + ko.applyBindings(controlViewModel, document.getElementById("control")); ko.applyBindings(terminalViewModel, document.getElementById("term")); - ko.applyBindings(speedViewModel, document.getElementById("speed")); ko.applyBindings(gcodeViewModel, document.getElementById("gcode")); ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog")); ko.applyBindings(navigationViewModel, document.getElementById("navbar")); ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]); - var webcamElement = document.getElementById("webcam"); - if (webcamElement) { - ko.applyBindings(webcamViewModel, document.getElementById("webcam")); + var timelapseElement = document.getElementById("timelapse"); + if (timelapseElement) { + ko.applyBindings(timelapseViewModel, timelapseElement); } var gCodeVisualizerElement = document.getElementById("gcode"); - if(gCodeVisualizerElement){ + if (gCodeVisualizerElement) { gcodeViewModel.initialize(); } + //~~ startup commands + loginStateViewModel.requestData(); connectionViewModel.requestData(); - controlsViewModel.requestData(); + controlViewModel.requestData(); gcodeFilesViewModel.requestData(); - webcamViewModel.requestData(); - settingsViewModel.requestData(); + timelapseViewModel.requestData(); + + loginStateViewModel.subscribe(function(change, data) { + if ("login" == change) { + $("#gcode_upload").fileupload("enable"); + + settingsViewModel.requestData(); + if (data.admin) { + usersViewModel.requestData(); + } + } else { + $("#gcode_upload").fileupload("disable"); + } + }) //~~ UI stuff @@ -1692,6 +1930,16 @@ $(function() { $.pnotify.defaults.history = false; + $.fn.modal.defaults.maxHeight = function(){ + // subtract the height of the modal header and footer + return $(window).height() - 165; + } + + // Fix input element click problem on login dialog + $('.dropdown input, .dropdown label').click(function(e) { + e.stopPropagation(); + }); + } ); diff --git a/octoprint/static/js/underscore-min.js b/octoprint/static/js/underscore.js similarity index 100% rename from octoprint/static/js/underscore-min.js rename to octoprint/static/js/underscore.js diff --git a/octoprint/templates/dialogs.html b/octoprint/templates/dialogs.jinja2 similarity index 100% rename from octoprint/templates/dialogs.html rename to octoprint/templates/dialogs.jinja2 diff --git a/octoprint/templates/index.html b/octoprint/templates/index.jinja2 similarity index 62% rename from octoprint/templates/index.html rename to octoprint/templates/index.jinja2 index ed22f68..df10b19 100644 --- a/octoprint/templates/index.html +++ b/octoprint/templates/index.jinja2 @@ -8,6 +8,7 @@ + @@ -16,12 +17,15 @@ @@ -33,9 +37,13 @@ OctoPrint
    {% endif %} + {% if enableAccessControl %} +
  • + + Login + + + + +
    • + {% endif %}
    @@ -53,24 +83,24 @@
    -
    +
    Connection
    - - - - + + + + - +
    -
    +
    State
    @@ -89,21 +119,21 @@
    -
    - - - +
    -
    -
    +
    +
    Files
    - +
    - - - Upload - - -
    -
    -
    -
    - Hint: You can also drag and drop files on this page to upload them. +
    + + + Upload + + +
    +
    +
    +
    + Hint: You can also drag and drop files on this page to upload them. +
    -
    +
    @@ -184,27 +215,29 @@ - -
    - - °C -
    -
    - - -
      - -
    • - -
      • - -
    • -
    • - Off -
      • -
    +
    + +
    + + °C +
    +
    + + +
      + +
    • + +
      • + +
    • +
    • + Off +
      • +
    +
    @@ -214,95 +247,103 @@ - -
    - - °C -
    -
    - - -
      - -
    • - -
      • - -
    • -
    • - Off -
      • -
    +
    + +
    + + °C +
    +
    + + +
      + +
    • + +
      • + +
    • +
    • + Off +
      • +
    +
    -
    -
    +
    + {% if webcamStream %} +
    + +
    + {% endif %} + + -
    + -
    + -
    +
    -
    -
    - -
    - - % - -
    - - -
    - - % - -
    - - -
    - - % - -
    - - -
    - - % - -
    -
    -
    @@ -451,37 +461,34 @@ Autoscroll -
    - - +
    - {% if webcamStream %} -
    -
    - -
    + {% if enableTimelapse %} +
    +
    +

    Timelapse Configuration

    - {% if enableTimelapse %} -

    Timelapse Configuration

    + + - - - -
    - -
    - - sec +
    + +
    + + sec +
    -
    -
    - +
    + +

    Finished Timelapses

    @@ -491,18 +498,18 @@
    - - - - - + + + + + - - - - - + + + + +
    NameSizeAction
    NameSizeAction
     | 
     | 
    - {% endif %}
    {% endif %}
    @@ -532,24 +538,27 @@
    - {% include 'settings.html' %} - {% include 'dialogs.html' %} + {% include 'settings.jinja2' %} + {% include 'dialogs.jinja2' %} - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/octoprint/templates/settings.html b/octoprint/templates/settings.jinja2 similarity index 53% rename from octoprint/templates/settings.html rename to octoprint/templates/settings.jinja2 index f9bc048..179095c 100644 --- a/octoprint/templates/settings.html +++ b/octoprint/templates/settings.jinja2 @@ -1,20 +1,21 @@ -