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">
|
|
|
|
|
<title>yuzu Installer</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/bulma.css" type="text/css">
|
|
|
|
|
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2018-01-27 04:27:41 +01:00
|
|
|
<div id="app">
|
|
|
|
|
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
|
|
|
|
<div class="navbar-brand">
|
2018-01-26 13:29:28 +01:00
|
|
|
<span class="navbar-item">
|
2018-01-27 04:27:41 +01:00
|
|
|
<img src="/img/logo.png" v-bind:alt="config.general.name">
|
2018-01-26 13:29:28 +01:00
|
|
|
</span>
|
2018-01-27 04:27:41 +01:00
|
|
|
</div>
|
|
|
|
|
</nav>
|
2018-01-26 13:29:28 +01:00
|
|
|
|
2018-01-27 04:27:41 +01:00
|
|
|
<!-- Main content -->
|
|
|
|
|
<section class="section">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="columns">
|
|
|
|
|
<div class="column is-one-third">
|
|
|
|
|
<h1 class="title">
|
|
|
|
|
Welcome to the {{ config.general.name }} installer!
|
|
|
|
|
</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-01-27 05:31:43 +01:00
|
|
|
<div class="column" v-if="select_packages">
|
2018-01-27 04:27:41 +01:00
|
|
|
<h4 class="subtitle">Select your preferred settings:</h4>
|
2018-01-26 13:29:28 +01:00
|
|
|
|
2018-01-27 04:27:41 +01:00
|
|
|
<!-- 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">
|
2018-01-29 11:57:06 +01:00
|
|
|
<input type="checkbox" v-model="package.default" />
|
2018-01-27 04:27:41 +01:00
|
|
|
{{ package.name }}
|
|
|
|
|
</label>
|
|
|
|
|
<p>
|
|
|
|
|
{{ package.description }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2018-01-26 13:29:28 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-01-27 04:27:41 +01:00
|
|
|
|
2018-01-27 05:02:49 +01:00
|
|
|
<div class="subtitle is-6">Install Location</div>
|
|
|
|
|
<div class="field has-addons">
|
|
|
|
|
<div class="control is-expanded">
|
|
|
|
|
<input class="input" type="text" v-model="install_location"
|
2018-01-27 05:14:56 +01:00
|
|
|
placeholder="Enter a install path here">
|
2018-01-27 05:02:49 +01:00
|
|
|
</div>
|
2018-01-27 04:27:41 +01:00
|
|
|
<div class="control">
|
2018-01-27 05:02:49 +01:00
|
|
|
<a class="button is-info" v-on:click="select_file">
|
|
|
|
|
Select
|
|
|
|
|
</a>
|
2018-01-26 13:29:28 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-01-27 05:31:43 +01:00
|
|
|
<a class="button is-primary is-pulled-right" v-on:click="install">Install!</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="column" v-else-if="is_installing">
|
|
|
|
|
<h4 class="subtitle">Installing...</h4>
|
|
|
|
|
<div v-html="config.general.installing_message"></div>
|
|
|
|
|
<br />
|
|
|
|
|
|
2018-01-30 04:35:00 +01:00
|
|
|
<div v-html="progress_message"></div>
|
2018-01-27 05:31:43 +01:00
|
|
|
<progress class="progress is-info is-medium" v-bind:value="progress" max="100">
|
|
|
|
|
{{ progress }}%
|
|
|
|
|
</progress>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="column" v-else-if="is_finished">
|
|
|
|
|
<h4 class="subtitle">Thanks for installing {{ config.general.name }}!</h4>
|
|
|
|
|
|
|
|
|
|
<a class="button is-primary is-pulled-right" v-on:click="exit">Exit</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="column" v-else>
|
|
|
|
|
<h4 class="subtitle">Oh no!</h4>
|
|
|
|
|
<div>A error occured during installation. Please retry!</div>
|
2018-01-26 13:29:28 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-01-27 04:27:41 +01:00
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/api/config"></script>
|
2018-01-27 05:02:49 +01:00
|
|
|
<script src="/js/helpers.js"></script>
|
2018-01-27 04:27:41 +01:00
|
|
|
<script src="/js/vue.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
2018-01-27 05:02:49 +01:00
|
|
|
config : config,
|
2018-01-27 05:31:43 +01:00
|
|
|
install_location : "",
|
|
|
|
|
select_packages : true,
|
|
|
|
|
is_installing : false,
|
|
|
|
|
is_finished : false,
|
2018-01-30 04:35:00 +01:00
|
|
|
progress : 0,
|
|
|
|
|
progress_message : ""
|
2018-01-27 05:02:49 +01:00
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
"select_file": function() {
|
|
|
|
|
ajax("/api/file-select", function(e) {
|
|
|
|
|
if (e.path != null) {
|
|
|
|
|
app.install_location = e.path;
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-01-27 05:31:43 +01:00
|
|
|
},
|
|
|
|
|
"install": function() {
|
|
|
|
|
this.select_packages = false;
|
|
|
|
|
this.is_installing = true;
|
|
|
|
|
|
2018-01-29 11:57:06 +01:00
|
|
|
var results = {};
|
|
|
|
|
|
|
|
|
|
console.log(this.config.packages);
|
|
|
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
console.log(results);
|
|
|
|
|
|
2018-01-30 04:35:00 +01:00
|
|
|
stream_ajax("/api/start-install", function(line) {
|
|
|
|
|
console.log(line);
|
|
|
|
|
if (line.hasOwnProperty("Status")) {
|
|
|
|
|
app.progress_message = line.Status[0];
|
|
|
|
|
app.progress = line.Status[1] * 100;
|
|
|
|
|
}
|
|
|
|
|
}, function(e) {
|
|
|
|
|
app.is_installing = false;
|
|
|
|
|
app.is_finished = true;
|
2018-01-29 11:57:06 +01:00
|
|
|
}, undefined, results);
|
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
|
|
|
|
|
|
|
|
ajax("/api/default-path", function(e) {
|
|
|
|
|
if (e.path != null) {
|
|
|
|
|
app.install_location = e.path;
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-01-27 04:27:41 +01:00
|
|
|
</script>
|
2018-01-26 13:29:28 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
