statping/frontend/src/forms/CoreSettings.vue

109 lines
4.5 KiB
Vue

<template>
<form @submit.prevent="saveSettings">
<div class="card">
<div class="card-header">Statping Settings</div>
<div class="card-body">
<div class="form-group">
<label>{{ $t('project_name') }}</label>
<input v-model="core.name" type="text" class="form-control" placeholder="Great Uptime" id="project">
</div>
<div class="form-group">
<label>{{ $t('description') }}</label>
<input v-model="core.description" type="text" class="form-control" placeholder="Great Uptime" id="description">
</div>
<div class="form-group row">
<div class="col-8 col-sm-9">
<label>{{ $t('domain') }}</label>
<input v-model="core.domain" type="url" class="form-control" id="domain">
</div>
<div class="col-4 col-sm-3 mt-sm-1 mt-0">
<label class="d-inline d-sm-none">{{$t('enable_cdn')}}</label>
<label class="d-none d-sm-block">{{$t('enable_cdn')}}</label>
<span @click="core.using_cdn = !!core.using_cdn" class="switch" id="using_cdn">
<input v-model="core.using_cdn" type="checkbox" name="using_cdn" class="switch" id="switch-normal" :checked="core.using_cdn">
<label for="switch-normal"></label>
</span>
</div>
</div>
<div class="form-group">
<label>{{ $t('footer') }}</label>
<textarea v-model="core.footer" rows="4" class="form-control" id="footer">{{core.footer}}</textarea>
<small class="form-text text-muted">{{ $t('footer_notes') }}</small>
</div>
<div class="form-group">
<label>{{ $t('language') }}</label>
<select v-model="core.language" class="form-control">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="ru">Russian</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="it">Italian</option>
<option value="ko">Korean</option>
<option value="zh">Chinese</option>
</select>
</div>
<div class="form-group row mt-3">
<label class="col-sm-10 col-form-label">{{ $t('send_reports') }}</label>
<div class="col-sm-2 float-right">
<span @click="core.allow_reports = !!core.allow_reports" class="switch" id="allow_report">
<input v-model="core.allow_reports" type="checkbox" name="allow_report" class="switch" id="switch_allow_report" :checked="core.allow_reports">
<label for="switch_allow_report"></label>
</span>
</div>
<div class="col-12">
<small>{{ $t('send_reports_desc') }}</small>
</div>
</div>
</div>
<div class="card-footer">
<button @click.prevent="saveSettings" id="save_core" type="submit" class="btn btn-primary btn-block" v-bind:disabled="loading">
<font-awesome-icon v-if="loading" icon="circle-notch" class="mr-2" spin/>{{ $t('save_settings') }}
</button>
</div>
</div>
</form>
</template>
<script>
import Api from '../API'
export default {
name: 'CoreSettings',
data () {
return {
loading: false
}
},
computed: {
core() {
return this.$store.getters.core
}
},
methods: {
async saveSettings() {
this.loading = true
const c = this.core
await Api.core_save(c)
this.$store.commit('setCore', c)
this.$i18n.locale = c.language || "en";
this.loading = false
},
selectAll() {
this.$refs.input.select();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>