liftinstall/static/index.html

382 lines
16 KiB
HTML
Raw Normal View History

2018-01-26 13:29:28 +01:00
<!doctype html>
2018-01-27 05:02:49 +01:00
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
2018-01-26 13:29:28 +01:00
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
2018-08-04 14:17:00 +02:00
<title id="window-title">... Installer</title>
2018-01-26 13:29:28 +01:00
<link rel="icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/bulma.min.css" type="text/css">
2018-01-26 13:29:28 +01:00
<link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
<body>
2018-01-27 04:27:41 +01:00
<div id="app">
<!-- Main content -->
<section class="section">
<div class="container">
<div class="columns">
2018-08-07 12:18:09 +02:00
<div class="column is-one-third has-padding" v-if="!is_launcher">
2018-01-27 04:27:41 +01:00
<h1 class="title">
2018-08-07 07:34:57 +02:00
Welcome to the {{ attrs.name }} installer!
2018-01-27 04:27:41 +01:00
</h1>
<h2 class="subtitle">
We will have you up and running in just a few moments.
</h2>
</div>
2018-01-26 13:29:28 +01:00
2018-08-07 12:18:09 +02:00
<div class="column has-padding">
<div v-if="has_error">
<h4 class="subtitle">An error occurred:</h4>
2018-08-07 12:18:09 +02:00
<pre>{{ error }}</pre>
2018-08-07 12:18:09 +02:00
<a class="button is-dark is-pulled-right" v-on:click="back_to_packages">Back</a>
</div>
2018-08-07 07:34:57 +02:00
<div class="column" v-else-if="is_downloading_config">
<h4 class="subtitle">Downloading config...</h4>
<div v-html="progress_message"></div>
<progress class="progress is-info is-medium" v-bind:value="progress" max="100">
{{ progress }}%
</progress>
</div>
2018-08-07 12:18:09 +02:00
<div v-else-if="modify_install">
<h4 class="subtitle">Choose an option:</h4>
<div class="field is-grouped">
<p class="control">
<a class="button is-link" v-on:click="install">
Update
</a>
</p>
<p class="control">
<a class="button" v-on:click="modify_packages">
Modify
</a>
</p>
<p class="control">
<a class="button is-danger" v-on:click="prepare_uninstall">
Uninstall
</a>
</p>
</div>
</div>
2018-08-07 12:18:09 +02:00
<div v-else-if="select_packages">
<h4 class="subtitle">Select your preferred settings:</h4>
<!-- Build options -->
<div class="tile is-ancestor">
<div class="tile is-parent" v-for="package in config.packages" :index="package.name">
<div class="tile is-child">
<div class="box">
<label class="checkbox">
<input type="checkbox" v-model="package.default" />
{{ package.name }}
<span v-if="package.installed"><i>(installed)</i></span>
</label>
<p>
{{ package.description }}
</p>
</div>
2018-01-27 04:27:41 +01:00
</div>
2018-01-26 13:29:28 +01:00
</div>
</div>
2018-01-27 04:27:41 +01:00
2018-08-07 12:18:09 +02:00
<div class="subtitle is-6" v-if="show_install_location">Install Location</div>
<div class="field has-addons" v-if="show_install_location">
<div class="control is-expanded">
<input class="input" type="text" v-model="install_location"
placeholder="Enter a install path here">
</div>
<div class="control">
<a class="button is-dark" v-on:click="select_file">
Select
</a>
</div>
2018-01-26 13:29:28 +01:00
</div>
2018-08-07 12:18:09 +02:00
<a class="button is-dark is-pulled-right" v-if="show_install_location"
v-on:click="install">Install!</a>
<a class="button is-dark is-pulled-right" v-if="!show_install_location"
v-on:click="install">Modify</a>
<a class="button is-pulled-left" v-if="!show_install_location"
v-on:click="back_to_modify">Back</a>
2018-01-26 13:29:28 +01:00
</div>
2018-08-07 12:18:09 +02:00
<div v-else-if="is_installing">
<h4 class="subtitle" v-if="is_launcher">Checking for updates...</h4>
<h4 class="subtitle" v-else>Installing...</h4>
<div v-html="config.installing_message"></div>
2018-08-07 12:18:09 +02:00
<br />
2018-01-27 05:31:43 +01:00
2018-08-07 12:18:09 +02:00
<div v-html="progress_message"></div>
<br />
2018-01-27 05:31:43 +01:00
2018-08-07 12:18:09 +02:00
<progress class="progress is-info is-medium" v-bind:value="progress" max="100">
{{ progress }}%
</progress>
</div>
2018-01-27 05:31:43 +01:00
2018-08-07 12:18:09 +02:00
<div v-else-if="is_finished">
<h4 class="subtitle">Thanks for installing {{ attrs.name }}!</h4>
2018-01-27 05:31:43 +01:00
2018-08-07 12:18:09 +02:00
<a class="button is-dark is-pulled-right" v-on:click="exit">Exit</a>
</div>
2018-01-27 05:31:43 +01:00
2018-08-07 12:18:09 +02:00
<div v-else>
<h4 class="subtitle">Oh no!</h4>
<div>A error occurred during installation. Please retry!</div>
</div>
2018-01-26 13:29:28 +01:00
</div>
</div>
</div>
2018-01-27 04:27:41 +01:00
</section>
<div class="modal is-active" v-if="confirm_uninstall">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
2018-08-07 07:34:57 +02:00
<p class="modal-card-title">Are you sure you want to uninstall {{ attrs.name }}?</p>
</header>
<footer class="modal-card-foot">
2018-08-03 15:44:35 +02:00
<button class="button is-danger" v-on:click="uninstall">Yes</button>
<button class="button" v-on:click="cancel_uninstall">No</button>
</footer>
</div>
</div>
2018-01-27 04:27:41 +01:00
</div>
2018-08-07 07:34:57 +02:00
<script src="/api/attrs"></script>
2018-01-27 05:02:49 +01:00
<script src="/js/helpers.js"></script>
<script src="/js/vue.min.js"></script>
2018-01-27 04:27:41 +01:00
<script>
2018-08-04 15:35:56 +02:00
// Overwrite loggers with the logging backend
window.onerror = function(msg, url, line) {
window.external.invoke(JSON.stringify({
Log: {
kind: "error",
msg: msg + " @ " + url + ":" + line
}
}));
};
// Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
function intercept(method){
console[method] = function(){
var message = Array.prototype.slice.apply(arguments).join(' ');
window.external.invoke(JSON.stringify({
Log: {
kind: method,
msg: message
}
}));
}
}
var methods = ['log', 'warn', 'error'];
for (var i = 0; i < methods.length; i++) {
intercept(methods[i]);
}
2018-08-07 07:34:57 +02:00
document.getElementById("window-title").innerText = base_attributes.name + " Installer";
2018-08-04 14:17:00 +02:00
function selectFileCallback(name) {
app.install_location = name;
}
2018-01-27 04:27:41 +01:00
var app = new Vue({
el: '#app',
data: {
2018-08-07 07:34:57 +02:00
attrs: base_attributes,
config : {},
2018-01-27 05:31:43 +01:00
install_location : "",
2018-08-04 15:35:56 +02:00
// If the initial modify menu should be shown
modify_install : false,
2018-08-04 15:35:56 +02:00
// If the package selection screen should be shown
2018-01-27 05:31:43 +01:00
select_packages : true,
2018-08-04 15:35:56 +02:00
// If an installation operation is happening
2018-01-27 05:31:43 +01:00
is_installing : false,
2018-08-04 15:35:56 +02:00
// If an installation has completed successfully
2018-01-27 05:31:43 +01:00
is_finished : false,
2018-08-04 15:35:56 +02:00
// If the application should act as an launcher, rather than as an installer
is_launcher : false,
launcher_path : undefined,
// If a confirmation prompt should be shown
confirm_uninstall : false,
2018-08-07 07:34:57 +02:00
// If the downloading config page should be shown
is_downloading_config : false,
progress : 0,
progress_message : "",
has_error : false,
2018-08-04 15:35:56 +02:00
// If the option to pick an install location should be provided
show_install_location : true,
error : "",
metadata : {
database : [],
install_path : "",
preexisting_install : false
}
2018-01-27 05:02:49 +01:00
},
methods: {
2018-08-07 07:34:57 +02:00
"download_config": function() {
app.is_downloading_config = true;
ajax("/api/config", function(e) {
app.download_install_status();
app.config = e;
});
},
"download_install_status": function() {
ajax("/api/installation-status", function(e) {
app.is_downloading_config = false;
app.metadata = e;
if (e.preexisting_install) {
app.modify_install = true;
app.select_packages = false;
app.show_install_location = false;
app.install_location = e.install_path;
// Copy over installed packages
for (var x = 0; x < app.config.packages.length; x++) {
app.config.packages[x].default = false;
app.config.packages[x].installed = false;
}
for (var i = 0; i < app.metadata.database.length; i++) {
// Find this config package
for (var x = 0; x < app.config.packages.length; x++) {
if (app.config.packages[x].name === app.metadata.database[i].name) {
app.config.packages[x].default = true;
app.config.packages[x].installed = true;
}
}
}
if (e.is_launcher) {
2018-08-07 07:48:49 +02:00
document.getElementById("window-title").innerText = app.attrs.name + " Updater";
2018-08-07 07:34:57 +02:00
app.is_launcher = true;
app.install();
}
} else {
for (var x = 0; x < app.config.packages.length; x++) {
app.config.packages[x].installed = false;
}
ajax("/api/default-path", function(e) {
if (e.path != null) {
app.install_location = e.path;
}
});
}
});
},
2018-01-27 05:02:49 +01:00
"select_file": function() {
window.external.invoke(JSON.stringify({
SelectInstallDir: {
callback_name: "selectFileCallback"
2018-01-27 05:02:49 +01:00
}
}));
2018-01-27 05:31:43 +01:00
},
"install": function() {
this.is_installing = true;
2018-08-03 17:24:42 +02:00
this.modify_install = false;
this.select_packages = false;
2018-01-27 05:31:43 +01:00
2018-01-29 11:57:06 +01:00
var results = {};
for (var package_index = 0; package_index < this.config.packages.length; package_index++) {
var current_package = this.config.packages[package_index];
if (current_package.default != null) {
results[current_package.name] = current_package.default;
2018-01-27 05:31:43 +01:00
}
2018-01-29 11:57:06 +01:00
}
results["path"] = this.install_location;
stream_ajax("/api/start-install", function(line) {
if (line.hasOwnProperty("Status")) {
app.progress_message = line.Status[0];
app.progress = line.Status[1] * 100;
}
if (line.hasOwnProperty("Error")) {
app.is_installing = false;
app.has_error = true;
app.error = line.Error;
2018-08-04 15:35:56 +02:00
// Exit anyway - don't want to disturb the user
if (app.is_launcher) {
app.exit();
}
}
}, function(e) {
app.is_installing = false;
2018-08-04 15:35:56 +02:00
if (app.is_launcher) {
app.exit();
} else {
app.is_finished = true;
}
2018-01-29 11:57:06 +01:00
}, undefined, results);
2018-01-27 05:31:43 +01:00
},
"back_to_packages": function() {
app.select_packages = true;
app.has_error = false;
app.is_installing = false;
app.is_finished = false;
},
2018-05-03 15:28:28 +02:00
"prepare_uninstall": function() {
app.confirm_uninstall = true;
},
"cancel_uninstall": function() {
app.confirm_uninstall = false;
},
"modify_packages": function() {
app.select_packages = true;
app.modify_install = false;
},
2018-08-03 15:44:35 +02:00
"uninstall": function() {
2018-08-03 16:54:03 +02:00
app.is_installing = true;
2018-08-03 15:44:35 +02:00
app.confirm_uninstall = false;
2018-08-03 16:54:03 +02:00
app.modify_install = false;
app.select_packages = false;
2018-08-03 15:44:35 +02:00
stream_ajax("/api/uninstall", function(line) {
if (line.hasOwnProperty("Status")) {
app.progress_message = line.Status[0];
app.progress = line.Status[1] * 100;
}
if (line.hasOwnProperty("Error")) {
app.is_installing = false;
app.has_error = true;
app.error = line.Error;
}
}, function(e) {
app.is_installing = false;
app.is_finished = true;
}, undefined, {});
},
2018-08-07 12:18:09 +02:00
"back_to_modify": function() {
app.modify_install = true;
app.select_packages = false;
app.show_install_location = false;
},
2018-01-27 05:31:43 +01:00
"exit": function() {
ajax("/api/exit", function() {});
2018-01-27 05:02:49 +01:00
}
2018-01-27 04:27:41 +01:00
}
});
2018-01-27 05:14:56 +01:00
2018-08-07 07:34:57 +02:00
app.download_config();
2018-01-27 04:27:41 +01:00
</script>
2018-01-26 13:29:28 +01:00
</body>
</html>