Ekapp/skolehjem/resources/views/app/settings/index.blade.php

182 lines
5.7 KiB
PHP

@extends("app.layout.base")
@section("title")
Settings
@endsection
@section("content")
<style>
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #00788A;
}
input:focus + .slider {
box-shadow: 0 0 1px #00788A;
}
input:checked + .slider:before {
transform: translateX(32px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script>
<main class="justify-unset">
<label for="langu" class="mt-2">Sprog / Languages:</label>
<select name="langName" id="lang">
@if(request()->cookie('languagesSetting') == "dk")
<option class="text-black" selected name="langDK" value="dk">Dansk</option>
@else
<option class="text-black" name="langDK" value="dk">Dansk</option>
@endif
@if(request()->cookie('languagesSetting') == "en")
<option selected class="text-black" name="langEN" value="en">English</option>
@else
<option name="langEN" class="text-black" value="en">English</option>
@endif
</select>
<label for="dark">Tema / Theme:</label>
<select name="light" id="darkmode">
@if(request()->cookie('mode') == "light")
<option selected name="ligthmode" class="text-black" value="Light">{{ __("msg.lys") }}</option>
@else
<option name="light" class="text-black" value="light">{{ __("msg.lys") }}</option>
@endif
@if(request()->cookie('mode') == "dark")
<option selected name="darkmode" class="text-black" value="dark">{{ __("msg.mørk") }}</option>
@else
<option name="dark" class="text-black" value="dark">{{ __("msg.mørk") }}</option>
@endif
</select>
<label for="dark">E-mail Notifikationer / E-mail Notifications:</label>
<div>
<label class="switch">
@if(\App\User::query()->where('id', '=', auth()->user()->id)->first()->wants_emails == true)
<input type="checkbox" onclick="ajaxCall(this)" checked>
@else
<input type="checkbox" onclick="ajaxCall(this)">
@endif
<span class="slider round"></span>
</label>
</div>
<div id="snackbar"></div>
</main>
<script>
$(document).ready(function (){
$('#lang').change(function () {
$value = $('#lang').find(":selected").val();
$.ajax({
type: 'get',
url: '{{route('users.setLanguages')}}',
data: {'lang':$value},
success:function (data) {
console.log($value);
location.reload();
},
error:function (data) {
console.log(data);
}
});
})
$('#darkmode').change(function () {
$darkmodeON = $('#darkmode').find(":selected").val();
$.ajax({
type: 'get',
url: '{{route('users.setDarkMode')}}',
data: {'darkmode':$darkmodeON},
success:function (data) {
console.log($darkmodeON);
location.reload();
},
error:function (data) {
console.log(data);
}
});
})
})
function snackbar(data) {
var x = document.getElementById("snackbar");
x.innerHTML = data;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function ajaxCall(el) {
if (el.hasAttribute('checked')) {
axios.post("{{ route("users.createajaxcancel") }}", {}
).then(function (response) {
var data = response.data;
snackbar(data);
el.removeAttribute('checked');
}).catch(function (error) {
console.log(error);
});
} else {
axios.post("{{ route("users.createajax") }}", {}
).then(function (response) {
var data = response.data;
snackbar(data);
el.setAttribute('checked', 'checked');
}).catch(function (error) {
console.log(error);
});
}
}
</script>
@endsection