Merge branch 'master' of https://gitlab.com/mohit.panjvani/crater-web into namespace-changes

This commit is contained in:
jayvirsinh_gohil
2019-11-15 18:46:50 +05:30
9 changed files with 133 additions and 56 deletions

View File

@@ -668,8 +668,13 @@ export default {
}, },
update_app: { update_app: {
title: 'Update App', title: 'Update App',
description: 'update app description', description: 'You can easily update Crater by checking for a new update by clicking the button below',
update: 'Update' check_update: 'Check for updates',
avail_update: 'New Update available',
next_version: 'Next version',
update: 'Update',
update_progress: 'Update in progress...',
progress_text: 'It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes'
} }
}, },
wizard: { wizard: {

View File

@@ -6,50 +6,89 @@
<p class="page-sub-title"> <p class="page-sub-title">
{{ $t('settings.update_app.description') }} {{ $t('settings.update_app.description') }}
</p> </p>
<base-button size="large" icon="sync-alt" color="theme" @click="onUpdateApp"> <label class="input-label">Current version</label><br>
{{ $t('settings.update_app.update') }} <label class="version">1.0.0</label>
<base-button :outline="true" size="large" color="theme" @click="checkUpdate">
<font-awesome-icon :class="{'update': isUpdateAvail}" style="margin-right: 5px;" icon="sync-alt" />
{{ $t('settings.update_app.check_update') }}
</base-button> </base-button>
<div v-if="isShowProgressBar" class="progress mt-4"> <hr>
<div <div class="mt-4 content">
:style="[{'width': progress+'%'}]" <h3 class="page-title">{{ $t('settings.update_app.avail_update') }}</h3>
class="progress-bar progress-bar-striped progress-bar-animated" <label class="input-label">{{ $t('settings.update_app.next_version') }}</label><br>
role="progressbar" <label class="version">{{ updateData.version }}</label>
aria-valuenow="0" <p class="page-sub-title">
aria-valuemin="0" {{ description }}
aria-valuemax="100" </p>
/> <base-button size="large" color="theme" @click="onUpdateApp">
{{ $t('settings.update_app.update') }}
</base-button>
</div> </div>
<!-- <div>
<h3 class="page-title">{{ $t('settings.update_app.update_progress') }}</h3>
<p class="page-sub-title">
{{ $t('settings.update_app.progress_text') }}
</p>
<font-awesome-icon icon="spinner" class="fa-spin"/>
</div> -->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from 'vuex'
export default { export default {
data () { data () {
return { return {
isShowProgressBar: false, isShowProgressBar: false,
isUpdateAvail: false,
progress: 10, progress: 10,
interval: null interval: null,
description: '',
updateData: {
isMinor: Boolean,
installed: '',
version: ''
}
} }
}, },
computed: {
},
watch: { watch: {
}, },
mounted () { mounted () {
}, },
methods: { methods: {
onUpdateApp () { async onUpdateApp () {
this.isShowProgressBar = true const data = this.updateData
this.interval = setInterval(() => { let response = await axios.post('/api/update', data)
if (this.progress >= 100) { console.log(response.data)
clearInterval(this.interval) },
setTimeout(() => { async checkUpdate () {
this.isShowProgressBar = false let response = await axios.get('/api/check/update')
}, 1000) console.log(response.data)
} if (response.data) {
this.progress += 10 this.updateData.isMinor = response.data.is_minor
}, 250) this.updateData.version = response.data.version.version
this.updateData.description = response.data.version.description
}
} }
} }
} }
</script> </script>
<style scoped>
.update {
transform: rotate(360deg);
animation: rotating 1s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>

View File

@@ -150,6 +150,15 @@
overflow: hidden; overflow: hidden;
} }
} }
.version {
background: #EAF1FB;
border: 1px solid #EAF1FB;
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
}
} }
@media(max-width: $x-small-breakpoint ) { @media(max-width: $x-small-breakpoint ) {

View File

@@ -35,7 +35,7 @@
width: 100%; width: 100%;
height: 90px; height: 90px;
left: 0px; left: 0px;
top: 0px; top: -50px;
} }
.header-logo { .header-logo {
@@ -69,10 +69,15 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
@page {
margin-top: 60px !important;
}
.wrapper { .wrapper {
display: block; display: block;
padding-top: 60px; margin-top: 0px;
padding-bottom: 60px; padding-top: 16px;
padding-bottom: 20px;
} }
.address { .address {
@@ -343,6 +348,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {
@@ -375,8 +381,8 @@
</td> </td>
</tr> </tr>
</table> </table>
<hr class="header-line" style="border: 0.620315px solid #E8E8E8;" />
</div> </div>
<hr class="header-line" />
<div class="wrapper"> <div class="wrapper">
<div class="address"> <div class="address">
<div class="company"> <div class="company">
@@ -413,7 +419,9 @@
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
@include('app.pdf.estimate.partials.table') <div style="position:relative">
@include('app.pdf.estimate.partials.table')
</div>
@include('app.pdf.estimate.partials.notes') @include('app.pdf.estimate.partials.notes')
</div> </div>
</body> </body>

View File

@@ -23,15 +23,17 @@
display:inline-block; display:inline-block;
width:30%; width:30%;
} }
@page {
margin-top: 60px !important;
}
.header-table { .header-table {
background: #817AE3; background: #817AE3;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 141px; height: 141px;
left: 0px; left: 0px;
top: 0px; top: -60px;
} }
.header-logo { .header-logo {
position: absolute; position: absolute;
@@ -73,8 +75,8 @@
.wrapper { .wrapper {
display: block; display: block;
padding-top: 110px; margin-top: 60px;
padding-bottom: 60px; padding-bottom: 20px;
} }
.address { .address {
@@ -371,6 +373,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {

View File

@@ -19,7 +19,7 @@
hr { hr {
color:rgba(0, 0, 0, 0.2); color:rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
top: 140px; top: 80px;
left: 0px; left: 0px;
right: -70px; right: -70px;
width: 100%; width: 100%;
@@ -37,9 +37,7 @@
width: 100%; width: 100%;
height: 150px; height: 150px;
left: 0px; left: 0px;
top: 0px; top: -60px;
} }
.header-logo { .header-logo {
position: absolute; position: absolute;
@@ -77,10 +75,14 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
@page {
margin-top: 60px !important;
}
.wrapper { .wrapper {
display: block; display: block;
padding-top: 110px; padding-top: 50px;
padding-bottom: 60px; padding-bottom: 20px;
} }
.address { .address {
@@ -379,6 +381,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {
@@ -416,7 +419,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<hr> <hr style="border: 0.620315px solid #E8E8E8;">
<div class="wrapper"> <div class="wrapper">
<div class="address"> <div class="address">
<div class="bill-add"> <div class="bill-add">

View File

@@ -70,10 +70,15 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
@page {
margin-top: 60px !important;
}
.wrapper { .wrapper {
display: block; display: block;
margin-top: 0px;
padding-top: 16px; padding-top: 16px;
padding-bottom: 60px; padding-bottom: 20px;
} }
.address { .address {
@@ -350,6 +355,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {

View File

@@ -23,15 +23,16 @@
display:inline-block; display:inline-block;
width:30%; width:30%;
} }
@page {
margin-top: 60px !important;
}
.header-table { .header-table {
background: #817AE3; background: #817AE3;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 141px; height: 141px;
left: 0px; left: 0px;
top: 0px; top: -60px;
} }
.header-logo { .header-logo {
position: absolute; position: absolute;
@@ -73,8 +74,8 @@
.wrapper { .wrapper {
display: block; display: block;
padding-top: 110px; margin-top: 60px;
padding-bottom: 60px; padding-bottom: 20px;
} }
.address { .address {
@@ -381,6 +382,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {

View File

@@ -19,7 +19,7 @@
hr { hr {
color:rgba(0, 0, 0, 0.2); color:rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
top: 140px; top: 80px;
left: 0px; left: 0px;
right: -70px; right: -70px;
width: 100%; width: 100%;
@@ -37,9 +37,7 @@
width: 100%; width: 100%;
height: 150px; height: 150px;
left: 0px; left: 0px;
top: 0px; top: -60px;
} }
.header-logo { .header-logo {
position: absolute; position: absolute;
@@ -77,10 +75,13 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
@page {
margin-top: 60px !important;
}
.wrapper { .wrapper {
display: block; display: block;
padding-top: 110px; padding-top: 50px;
padding-bottom: 60px; padding-bottom: 20px;
} }
.address { .address {
@@ -390,6 +391,7 @@
margin-left: 30px; margin-left: 30px;
width: 442px; width: 442px;
text-align: left; text-align: left;
page-break-inside: avoid;
} }
.notes-label { .notes-label {
@@ -427,7 +429,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<hr> <hr style="border: 0.620315px solid #E8E8E8;">
<div class="wrapper"> <div class="wrapper">
<div class="address"> <div class="address">
<div class="bill-add"> <div class="bill-add">