Я занимаюсь разработкой веб-сайта по куриной птице с использованием Laravel, Vue и Moinjs.У меня есть план, но я не знаю, как подать заявку на мой веб-сайт.
Это - это изображение модального цикла cyclmodal .Модал состоит из 1 указателя даты, 2 текстовых полей и 6 отключенных текстовых полей.
Это код моего модального сообщения
<div class="modal fade" tabindex="-1" role="dialog" id="cycle_modal" aria-labelledby="cycle_modal_label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 v-show="editmode" class="modal_title">Update Cycle's Info</h4>
<h4 v-show="!editmode" class="modal_title">Add New Cycle</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<form @submit.prevent="editmode ? updateCycle() :addCycle()">
<div class="modal-body">
<div class="form-group">
<label for="names">Start date of Raising</label>
<picker-wrapper v-model="form.date_start_raise" :isDateDisabled="isFutureDate" name="date_start_raise" class="form-control" placeholder="Select Date" :inputAttributes="{readonly: true}" :class="{'is-invalid': form.errors.has('date_start_raise')}"></picker-wrapper>
<has-error :form="form" field="date_start_raise"></has-error>
</div>
<div class="form-group">
<label for="names">Population</label>
<input v-model="form.population" type="text" name="population" placeholder="Chicken's Population" class="form-control" :class="{'is-invalid': form.errors.has('population')}">
<has-error :form="form" field="population"></has-error>
</div>
<div class="form-group">
<label for="names">Raising Days</label>
<input v-model="form.raising_days" type="text" name="raising_days" placeholder="Number of days" class="form-control" :class="{'is-invalid': form.errors.has('raising_days')}">
<has-error :form="form" field="raising_days"></has-error>
</div>
<div class="form-group">
<label>End Date of Raising</label>
<input v-model="form.date_end_raise" type="text" name="date_end_raise" placeholder="End Date of Raising Chickens" class="form-control" :class="{'is-invalid': form.errors.has('date_end_raise')}" disabled>
<has-error :form="form" field="date_end_raise"></has-error>
</div>
<div class="form-group">
<label> Start of Manure Collection</label>
<input v-model="form.date_manure_collection" type="text" name="date_manure_collection" placeholder="Date for Manure Collection" class="form-control" :class="{'is-invalid': form.errors.has('date_manure_collection')}" disabled>
<has-error :form="form" field="date_manure_collection"></has-error>
</div>
<div class="form-group">
<label> Start of Cleaning</label>
<input v-model="form.date_cleaning" type="text" name="date_cleaning" placeholder="Date for Cleaning" class="form-control" :class="{'is-invalid': form.errors.has('date_cleaning')}" disabled>
<has-error :form="form" field="date_cleaning"></has-error>
</div>
<div class="form-group">
<label> Start of Disinfection</label>
<input v-model="form.date_disinfection" type="text" name="date_disinfection" placeholder="Date for Disinfection" class="form-control" :class="{'is-invalid': form.errors.has('date_disinfection')}" disabled>
<has-error :form="form" field="date_disinfection"></has-error>
</div>
<div class="form-group">
<label> Start of Rest</label>
<input v-model="form.date_rest_day" type="text" name="date_rest_day" placeholder="Date for Rest" class="form-control" :class="{'is-invalid': form.errors.has('date_rest_day')}" disabled>
<has-error :form="form" field="date_rest_day"></has-error>
</div>
<div class="form-group">
<label> Start of Preparation</label>
<input v-model="form.date_preparation" type="text" name="date_preparation" placeholder="Date for Preparation" class="form-control" :class="{'is-invalid': form.errors.has('date_preparation')}" disabled>
<has-error :form="form" field="date_preparation"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button v-show="editmode" type="submit" class="btn btn-primary">Update</button>
<button v-show="!editmode" type="submit" class="btn btn-primary">Add</button>
</div>
</form><!-- /.form -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
Этот код отображает содержимое сценария
<script>
export default {
data(){
return{
editmode: false,
cycles : {},
form: new Form({
id: "",
date_start_raise: '',
population: '',
raising_days: '',
date_end_raise: '',
date_manure_collection:'',
date_cleaning: '',
date_disinfection: '',
date_rest_day: '',
date_preparation: '',
user_id:'',
})
}
},
methods:{
getResults(page = 1) {
axios.get('api/cycle?page=' + page)
.then(response => {
this.cycles = response.data;
});
},
isFutureDate(date_start_raise) {
const currentDate = new Date();
return date_start_raise > currentDate;
},
loadCycles(){
axios.get("api/cycle").then(({ data }) => (this.cycles = data ));
},
editModal(cycle){
this.editmode = true;
this.form.reset();
$('#cycle_modal').modal('show');
this.form.fill(cycle);
},
openModal(){
this.editmode = false;
this.form.reset();
$('#cycle_modal').modal('show');
},
updateCycle(){
this.$Progress.start();
this.form.put('api/cycle/'+this.form.id)
.then(() =>{
// success
$('#cycle_modal').modal('hide');
swal(
'Updated!',
'Information has been updated.',
'success'
)
this.$Progress.finish();
Fire.$emit('AfterCreate');
})
.catch(() =>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
});
},
deleteCycle(id){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
// Send request to the server
if (result.value) {
this.form.delete('api/cycle/'+id).then(()=>{
swal(
'Deleted!',
'Your data has been deleted.',
'success'
)
Fire.$emit('AfterCreate');
}).catch(()=> {
swal("Failed!", "There was something wrong.", "warning");
});
}
})
},
addCycle(){
this.$Progress.start();
this.form.post('api/cycle')
.then(()=>{
Fire.$emit('AfterCreate');
$('#cycle_modal').modal('hide')
toast({
type: 'success',
title: 'New Cycle added in successfully'
})
this.$Progress.finish();
})
.catch(()=>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
})
}
},
created() {
this.loadCycles();
Fire.$on('AfterCreate',() => {
this.loadCycles();
});
}
}
</script>
Это мой план содержания моего мода.
Выбор даты
- date_start_raise - Пользователь вводит дату начала дляразведение цыплят
текстовое поле
популяция - пользователь вводит популяцию курицы
ising_days - пользователь вводит количество дней, в которые он выращивает цыплят
Текстовое поле (отключено)
date_end_raise - Будет автоматически отображаться дата окончания выращивания цыплят.Уравнение этого текстового поля представляет собой сумму date_start_raise и climbing_days.
date_manure_collection - Это автоматически отобразит дату сбора навоза.Уравнение этого текстового поля представляет собой сумму date_end_raise и 2 дней.
date_cleaning - Это автоматически отобразит дату очистки.Уравнение этого текстового поля представляет собой сумму date_end_raise и 9 дней
date_disinfection - Это автоматически отобразит дату дезинфекции.Уравнение этого текстового поля представляет собой сумму date_end_raise и 10 дней.
date_rest_day - Это автоматически отобразит дату отдыха.Уравнение этого текстового поля представляет собой сумму date_end_raise и 20 дней.
date_preparation - Это автоматически отобразит дату для подготовки.Уравнение этого текстового поля представляет собой сумму date_end_raise и 21 дней.
Если пользователь завершит применение своих данных, он / она отправит все данные, нажав кнопку Добавитьи данные будут отправлены в базу данных.
Как мне достичь моего плана для моего сайта (особенно отключенные текстовые поля)?
Это мой пробный код с использованием моментов, но я не знаю, как его применить, или это был неправильный код.
Импорт моментов в app.js
import moment from 'moment';
Код сценария
methods:{
isEndRaiseDate() {
date_end_raise = moment(date_start_raise).add(raising_days,'day');
return date_end_raise;
},
isManureCollectionDate() {
date_manure_collection = moment(date_end_raise).add(2,'day');
return date_manure_collection;
},
isCleaningDate() {
date_cleaning = moment(date_end_raise).add(9,'day');
return date_cleaning;
},
isDisinfectionDate() {
date_disinfection = moment(date_end_raise).add(10,'day');
return date_disinfection;
},
isRestDate() {
date_rest_day = moment(date_end_raise).add(20,'day');
return date_rest_day;
},
isPreparationDate() {
date_preparation = moment(date_end_raise).add(21,'day');
return date_preparation;
}
}