c_meyer/KasperskyLab-TinyCheck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Starting update interface implementation

Browse Source
This commit is contained in:
Félix Aime
2021-02-18 22:17:29 +01:00
parent 5334f30edf
commit 9382a1fd9f
6 changed files with 261 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/frontend/src/assets/custom.css
View File

@ -683,6 +683,39 @@ ul {
opacity: 0.1;
}
.no-update-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDBkYjU1IiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj48L2ZvcmVpZ25PYmplY3Q+PGcgaTpleHRyYW5lb3VzPSJzZWxmIj48cGF0aCBkPSJNNTAsMi41QzIzLjgsMi41LDIuNSwyMy44LDIuNSw1MGMwLDI2LjIsMjEuMyw0Ny41LDQ3LjUsNDcuNVM5Ny41LDc2LjIsOTcuNSw1MEM5Ny41LDIzLjgsNzYuMiwyLjUsNTAsMi41eiBNNzMsMzkuMyAgICBMNDUuNyw2OS40Yy0wLjcsMC44LTIsMC44LTIuOCwwLjFMMjUuOSw1Mi40Yy0wLjgtMC44LTAuOC0yLDAtMi43bDUtNWMwLjgtMC44LDItMC44LDIuNywwTDQ0LDU1LjJMNjUsMzIgICAgYzAuNy0wLjgsMS45LTAuOCwyLjctMC4xbDUuMiw0LjdDNzMuNywzNy4zLDczLjcsMzguNSw3MywzOS4zeiI+PC9wYXRoPjwvZz48L3N3aXRjaD48L3N2Zz4=");
width: 30px;
height: 30px;
display: block;
margin-right: 10px;
margin-top: 10px;
background-size: cover;
opacity: 0.1;
}
.update-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmY4YjAwIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj48L2ZvcmVpZ25PYmplY3Q+PGcgaTpleHRyYW5lb3VzPSJzZWxmIj48Zz48cGF0aCBkPSJNNTI3My4xLDI0MDAuMXYtMmMwLTIuOC01LTQtOS43LTRzLTkuNywxLjMtOS43LDR2MmMwLDEuOCwwLjcsMy42LDIsNC45bDUsNC45YzAuMywwLjMsMC40LDAuNiwwLjQsMXY2LjQgICAgIGMwLDAuNCwwLjIsMC43LDAuNiwwLjhsMi45LDAuOWMwLjUsMC4xLDEtMC4yLDEtMC44di03LjJjMC0wLjQsMC4yLTAuNywwLjQtMWw1LjEtNUM1MjcyLjQsMjQwMy43LDUyNzMuMSwyNDAxLjksNTI3My4xLDI0MDAuMXogICAgICBNNTI2My40LDI0MDBjLTQuOCwwLTcuNC0xLjMtNy41LTEuOHYwYzAuMS0wLjUsMi43LTEuOCw3LjUtMS44YzQuOCwwLDcuMywxLjMsNy41LDEuOEM1MjcwLjcsMjM5OC43LDUyNjguMiwyNDAwLDUyNjMuNCwyNDAweiI+PC9wYXRoPjxwYXRoIGQ9Ik01MjY4LjQsMjQxMC4zYy0wLjYsMC0xLDAuNC0xLDFjMCwwLjYsMC40LDEsMSwxaDQuM2MwLjYsMCwxLTAuNCwxLTFjMC0wLjYtMC40LTEtMS0xSDUyNjguNHoiPjwvcGF0aD48cGF0aCBkPSJNNTI3Mi43LDI0MTMuN2gtNC4zYy0wLjYsMC0xLDAuNC0xLDFjMCwwLjYsMC40LDEsMSwxaDQuM2MwLjYsMCwxLTAuNCwxLTFDNTI3My43LDI0MTQuMSw1MjczLjMsMjQxMy43LDUyNzIuNywyNDEzLjd6Ij48L3BhdGg+PHBhdGggZD0iTTUyNzIuNywyNDE3aC00LjNjLTAuNiwwLTEsMC40LTEsMWMwLDAuNiwwLjQsMSwxLDFoNC4zYzAuNiwwLDEtMC40LDEtMUM1MjczLjcsMjQxNy41LDUyNzMuMywyNDE3LDUyNzIuNywyNDE3eiI+PC9wYXRoPjwvZz48cGF0aCBkPSJNNTAsMi41QzIzLjgsMi41LDIuNSwyMy44LDIuNSw1MGMwLDI2LjIsMjEuMyw0Ny41LDQ3LjUsNDcuNVM5Ny41LDc2LjIsOTcuNSw1MEM5Ny41LDIzLjgsNzYuMiwyLjUsNTAsMi41eiBNNDQuNywyNi4zICAgIGMwLTIuOSwyLjQtNS4zLDUuMy01LjNjMi45LDAsNS4zLDIuNCw1LjMsNS4zdjI2LjVjMCwyLjktMi40LDUuMy01LjMsNS4zYy0yLjksMC01LjMtMi40LTUuMy01LjNWMjYuM3ogTTUwLDc4LjcgICAgYy0zLjgsMC02LjktMy4xLTYuOS02LjlzMy4xLTYuOSw2LjktNi45czYuOSwzLjEsNi45LDYuOVM1My44LDc4LjcsNTAsNzguN3oiPjwvcGF0aD48L2c+PC9zd2l0Y2g+PC9zdmc+");
width: 30px;
height: 30px;
display: block;
margin-right: 10px;
margin-top: 10px;
background-size: cover;
opacity: 0.2;
}
.fail-update-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMzUzNTM1IiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj48L2ZvcmVpZ25PYmplY3Q+PGcgaTpleHRyYW5lb3VzPSJzZWxmIj48cGF0aCBkPSJNNTAsMi41QzIzLjgsMi41LDIuNSwyMy44LDIuNSw1MGMwLDI2LjIsMjEuMyw0Ny41LDQ3LjUsNDcuNVM5Ny41LDc2LjIsOTcuNSw1MEM5Ny41LDIzLjgsNzYuMiwyLjUsNTAsMi41eiBNNzMsMzkuMyAgICBMNDUuNyw2OS40Yy0wLjcsMC44LTIsMC44LTIuOCwwLjFMMjUuOSw1Mi40Yy0wLjgtMC44LTAuOC0yLDAtMi43bDUtNWMwLjgtMC44LDItMC44LDIuNywwTDQ0LDU1LjJMNjUsMzIgICAgYzAuNy0wLjgsMS45LTAuOCwyLjctMC4xbDUuMiw0LjdDNzMuNywzNy4zLDczLjcsMzguNSw3MywzOS4zeiI+PC9wYXRoPjwvZz48L3N3aXRjaD48L3N2Zz4=");
width: 30px;
height: 30px;
display: block;
margin-right: 10px;
margin-top: 10px;
background-size: cover;
opacity: 0.2;
}
.off-icon:hover {
opacity: 0.3;
cursor:pointer;
@ -691,4 +724,28 @@ ul {
.quit-icon:hover {
opacity: 0.3;
cursor:pointer;
}
.no-update-icon:hover {
opacity: 0.3;
cursor:pointer;
}
.fail-update-icon:hover {
opacity: 0.3;
cursor:pointer;
}
.update-icon:hover {
opacity: 0.4;
cursor:pointer;
}
.green-strong {
font-weight: bold;
color: #54dc4b;
}
.orange-strong {
font-weight: bold;
color: #f57d16cf;
}

45
app/frontend/src/components/Controls.vue
View File

@ -1,19 +1,22 @@
<template>
<div class="controls">
<i class="off-icon" v-on:click="action('shutdown')" v-if="off_available && off_display"></i>
<i class="quit-icon" v-on:click="action('quit')" v-if="quit_available && quit_display"></i>
<div class="controls" v-if="display">
<i class="off-icon" v-on:click="action('shutdown')" v-if="off_available"></i>
<i class="quit-icon" v-on:click="action('quit')" v-if="quit_available"></i>
<i :class="[ update_available ? 'update-icon' :'no-update-icon' ]" v-if="update_possibe" @click="$router.push({ name: 'update' })"></i>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Controls',
data: function (){
return {
off_available : false,
off_display : false,
display: true,
update_available: false,
update_possible: true,
quit_available: false,
quit_display : false
off_available: false
}
},
methods: {
@ -25,6 +28,23 @@ export default {
})
.catch(error => { console.log(error) });
},
check_update: function() {
axios.get('/api/update/check', { timeout: 60000 })
.then(response => {
if(response.data.status) {
if(response.data.message == "A new version is available"){
this.update_available = true
this.update_possible = true
} else if(response.data.message == "This is the latest version"){
this.update_available = false
this.update_possible = true
}
} else {
this.update_possible = false
}
})
.catch(error => { console.log(error) });
},
load_config: function() {
axios.get(`/api/misc/config`, { timeout: 60000 })
.then(response => {
@ -36,17 +56,16 @@ export default {
},
watch: {
$route (){
if ( ["capture", "report"].includes(this.$router.currentRoute.name) || screen.height != window.innerHeight ){
this.off_display = false;
this.quit_display = false;
if ( ["capture", "report", "update", "loader"].includes(this.$router.currentRoute.name)){
this.display = false;
} else {
this.off_display = (this.off_available)? true : false;
this.quit_display = (this.quit_available)? true : false;
this.display = true;
}
}
},
created: function() {
this.load_config()
},
this.load_config();
this.check_update();
}
}
</script>

6
app/frontend/src/router/index.js
View File

@ -17,6 +17,12 @@ const routes = [
component: () => import('../views/home.vue'),
props: true
},
{
path: '/update',
name: 'update',
component: () => import('../views/update.vue'),
props: true
},
{
path: '/wifi-select',
name: 'wifi-select',

74
app/frontend/src/views/update.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="center">
<div v-if="update_possible">
<div v-if="update_available">
<p><span class="orange-strong">TinyCheck needs to be updated.</span><br />
<span v-if="!update_launched">Please click on the button below to update it.</span>
<span v-else>The process can take few minutes, please wait...</span>
</p>
<button class="btn btn-primary" :class="[ update_launched ? 'loading' : '' ]" v-on:click="launch_update()">Update it now</button>
</div>
<div v-else>
<p><span class="green-strong">Your TinyCheck instance is up-to-date!</span><br />You'll be redirected in few seconds.</p>
</div>
</div>
<div v-else>
<p><strong>You dont have Internet or the rights to update Tinycheck.</strong><br />You'll be redirected in few seconds.</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'update',
data() {
return {
translation: {},
update_available: null,
update_possible: true,
update_launched: null,
check_interval: null
}
},
methods: {
check_update: function() {
axios.get('/api/update/check', { timeout: 60000 })
.then(response => {
console.log(response.data.status)
if(response.data.status) {
if(response.data.message == "A new version is available"){
this.update_available = true
this.update_possible = true
} else if (response.data.message == "This is the latest version"){
this.update_available = false
this.update_possible = true
clearInterval(this.check_interval);
setTimeout(function () { window.location.href = "/"; }.bind(this), 3000);
}
} else {
this.update_possible = false
setTimeout(function () { window.location.href = "/"; }.bind(this), 3000);
}
})
.catch(error => { console.log(error) });
},
launch_update: function() {
axios.get(`/api/update/process`, { timeout: 60000 })
.then(response => {
if(response.data.status) {
if(response.data.message == "Update successfully launched"){
this.update_launched = true
this.check_interval = setInterval(function(){ this.check_update(); }.bind(this), 3000);
}
}
})
.catch(error => { console.log(error) });
}
},
created: function() {
this.check_update();
}
}
</script>