[UPDT] BASE: Time format selection

This commit is contained in:
Horilla
2023-12-27 17:25:59 +05:30
parent ccbc6b3ac0
commit 34c38e7d5f
10 changed files with 244 additions and 8 deletions

View File

@@ -345,7 +345,7 @@ class CompanyForm(ModelForm):
model = Company
fields = "__all__"
excluded_fields=["date_format"]
excluded_fields=["date_format", "time_format"]
def validate_image(self, file):

View File

@@ -1,4 +1,4 @@
from datetime import date, datetime
from datetime import date, datetime, time
import io
import json
import random
@@ -404,6 +404,40 @@ def export_data(request, model, form_class, filter_class, file_name):
value = " "
if field_name == "month":
value = _(value.title())
# Check if the type of 'value' is time
if isinstance(value, time):
user = request.user
employee = user.employee_get
# Taking the company_name of the user
info = EmployeeWorkInformation.objects.filter(employee_id=employee)
if info.exists():
for data in info:
employee_company = data.company_id
company_name = Company.objects.filter(id=employee_company.id)
emp_company = company_name.first()
# Access the date_format attribute directly
time_format = emp_company.time_format
else:
time_format = 'hh:mm A'
time_formats = {
'hh:mm A': '%I:%M %p', # 12-hour format
'HH:mm': '%H:%M', # 24-hour format
}
# Convert the string to a datetime.time object
check_in_time = datetime.strptime(str(value), '%H:%M:%S').time()
# Print the formatted time for each format
for format_name, format_string in time_formats.items():
if format_name == time_format:
value = check_in_time.strftime(format_string)
# Check if the type of 'value' is date
if type(value) == date:
user= request.user
employee = user.employee_get

View File

@@ -46,7 +46,9 @@ class Company(models.Model):
null=True,
)
objects = models.Manager()
date_format = models.CharField(max_length=10, blank=True, null=True)
date_format = models.CharField(max_length=30, blank=True, null=True)
time_format = models.CharField(max_length=20, blank=True, null=True)
class Meta:
"""

View File

@@ -0,0 +1,72 @@
class TimeFormattingUtility {
constructor() {
// Default time format
this.timeFormat = 'hh:mm A'; // Default to 12-hour format
}
setTimeFormat(format) {
// Save the selected format to localStorage
localStorage.setItem('selectedTimeFormat', format);
this.timeFormat = format;
}
getFormattedTime(time) {
if (localStorage.getItem('selectedTimeFormat')){
}
else{
function fetchData(callback) {
$.ajax({
url: '/settings/get-time-format/',
method: 'GET',
data: { csrfmiddlewaretoken: getCookie('csrftoken') },
success: function(response) {
var time_format = response.selected_format;
// Call the callback function and pass the value of 'time_format'
callback(time_format);
},
});
}
// Use the fetchData function with a callback
fetchData(function(time_format) {
// If any time format is found setting it to the local storage.
if(time_format){
localStorage.setItem('selectedTimeFormat', time_format);
}
// Setting a default time format hh:mm A
else{
localStorage.setItem('selectedTimeFormat', 'hh:mm A');
}
});
}
// Use the stored time format
const storedTimeFormat = localStorage.getItem('selectedTimeFormat') || 'hh:mm A';
// Format the time using moment.js
const formattedTime = moment(time, 'hh:mm A').format(storedTimeFormat);
return formattedTime;
}
// Additional method for getting formatted time in 12-hour format
getFormattedTime12Hour(time) {
return this.getFormattedTime(time).replace(/^(\d{1,2}:\d{2}):\d{2}$/, '$1');
}
}
// Create an instance of the TimeFormattingUtility
const timeFormatter = new TimeFormattingUtility();
// Retrieve the selected time format from localStorage
const storedTimeFormat = localStorage.getItem('selectedTimeFormat');
if (storedTimeFormat) {
// If a time format is stored, set it in the utility
timeFormatter.setTimeFormat(storedTimeFormat);
}

View File

@@ -0,0 +1,27 @@
function saveTimeFormat() {
var timeFormatSelector = document.getElementById('timeFormat');
const selectedTimeFormat = timeFormatSelector.value;
// Set the selected time format in the utility
timeFormatter.setTimeFormat(selectedTimeFormat);
// Save the time format to the backend
saveTimeFormatToBackend(selectedTimeFormat);
}
function saveTimeFormatToBackend(selectedTimeFormat) {
$.ajax({
url: '/settings/save-time/',
method: 'POST',
data: { 'selected_format': selectedTimeFormat, csrfmiddlewaretoken: getCookie('csrftoken') },
success: function(response) {
window.location.reload();
},
error: function(xhr, textStatus, errorThrown) {
// Handle the error here
console.error('Error:', errorThrown);
window.location.reload();
},
});
}

View File

@@ -26,22 +26,44 @@
<button onclick="saveDateFormat()"
class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
>{% trans "Save" %}</button>
>{% trans "Save Date Format" %}</button>
<div style=" font-size: 20px; color: hsl(8,77%,56%); margin-top:70px">
<div style=" font-size: 20px; color: hsl(8,77%,56%); margin-top:20px">
<b>{% trans "Current Date Format"%} &nbsp :</b> &nbsp
<span id="dateDisplay" style="font-size: 18px; color: black;" class='mt-3'></span>
</div>
<!-- Time format selection-->
<div class="oh-inner-sidebar-content__header" style="margin-top:80px">
<h2 class="oh-inner-sidebar-content__title">{% trans "Time Format" %}</h2>
</div>
<label for="timeFormat" class="settings-label mb-1">{% trans "Select Time Format:" %}</label>
<select id="timeFormat" class="oh-select oh-select-2">
<option value="">--------------</option>
<option value="hh:mm A">{% trans "12 Hr. (e.g., 06:00 AM or 06:00 PM)" %}</option>
<option value="HH:mm">{% trans "24 Hr. (e.g., 06:00 or 18:00)" %}</option>
</select>
<button onclick="saveTimeFormat()"
class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
>{% trans "Save Time Format" %}</button>
<div style="font-size: 20px; color: hsl(8, 77%, 56%); margin-top: 20px">
<b>{% trans "Current Time Format" %} &nbsp :</b> &nbsp
<span id="timeDisplay" style="font-size: 18px; color: black;" class='mt-3'></span>
</div>
<script src="{% static '/build/js/moment.js' %}"></script>
<script src="{% static 'base/date_formatting.js' %}"></script>
<script src="{% static 'base/date_settings.js' %}"></script>
<script src="{% static 'base/time_formatting.js' %}"></script>
<script src="{% static 'base/time_settings.js' %}"></script>
<script>
// To display the selected date format
const formatMapping = {
'DD-MM-YYYY': '{% trans "Day, Month, Year (e.g., 30-12-2023)" %}',
'DD.MM.YYYY': '{% trans "Day, Month, Year (e.g., 30.12.2023)" %}',
@@ -66,6 +88,20 @@ class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
document.getElementById('dateDisplay').textContent = `${selectedFormatDescription}`;
// To display the selected time format
const timeFormatMapping = {
'hh:mm A': '{% trans "12 Hr. (e.g., 06:00 AM or 06:00 PM)" %}',
'HH:mm': '{% trans "24 Hr. (e.g., 06:00 or 18:00)" %}',
};
// Get the current date and time
var currentDateTime = new Date();
// Format the current time according to the storedTimeFormat
var formattedTime = moment(currentDateTime).format(storedTimeFormat);
var selectedTimeFormatDescription = timeFormatMapping[storedTimeFormat];
document.getElementById('timeDisplay').textContent = `${selectedTimeFormatDescription}`;
</script>
{% endblock %}

View File

@@ -493,6 +493,8 @@ urlpatterns = [
path("settings/date/", views.date_settings, name="date-settings"),
path('settings/save-date/', views.save_date_format, name='save_date_format'),
path('settings/get-date-format/', views.get_date_format, name='get-date-format'),
path('settings/save-time/', views.save_time_format, name='save_time_format'),
path('settings/get-time-format/', views.get_time_format, name='get-time-format'),
path(
"settings/attendance-settings-view/",
views.validation_condition_view,

View File

@@ -3128,7 +3128,7 @@ def save_date_format(request):
selected_format = request.POST.get('selected_format')
if not len(selected_format):
messages.error(request, _('Please select a date format.'))
messages.error(request, _('Please select a valid date format.'))
else:
user= request.user
employee = user.employee_get
@@ -3179,6 +3179,66 @@ def get_date_format(request):
return JsonResponse({'selected_format': date_format})
@permission_required("base.change_company")
@csrf_exempt # Use this decorator if CSRF protection is enabled
def save_time_format(request):
if request.method == 'POST':
# Taking the selected Time Format
selected_format = request.POST.get('selected_format')
if not len(selected_format):
messages.error(request, _('Please select a valid time format.'))
else:
user= request.user
employee = user.employee_get
# Taking the company_name of the user
info = EmployeeWorkInformation.objects.filter(employee_id=employee)
# Employee workinformation will not exists if he/she chnged the company, So can't save the time format.
if info.exists():
for data in info:
employee_company = data.company_id
company_name = Company.objects.filter(company=employee_company)
emp_company = company_name.first()
# Save the selected format to the backend
emp_company.time_format = selected_format
emp_company.save()
messages.success(request, _('Time format saved successfully.'))
else:
messages.warning(request, _('Time format cannot saved. You are not in the company.'))
# Return a JSON response indicating success
return JsonResponse({'success': True})
# Return a JSON response for unsupported methods
return JsonResponse({'error': False, 'error': 'Unsupported method'}, status=405)
@login_required
def get_time_format(request):
user= request.user
employee = user.employee_get
# Taking the company_name of the user
info = EmployeeWorkInformation.objects.filter(employee_id=employee)
if info.exists():
for data in info:
employee_company = data.company_id
company_name = Company.objects.filter(company=employee_company)
emp_company = company_name.first()
# Access the date_format attribute directly
time_format = emp_company.time_format
else:
time_format = 'hh:mm A'
# Return the date format as JSON response
return JsonResponse({'selected_format': time_format})
@login_required
@permission_required("attendance.add_attendancevalidationcondition")
def validation_condition_view(request):

View File

@@ -577,6 +577,9 @@
<script src="{% static 'build/js/summernote-lite.min.js' %}" ></script>
<script src="{% static '/base/date_formatting.js' %}"></script>
<script src="{% static '/base/date_settings.js' %}"></script>
<script src="{% static '/base/time_formatting.js' %}"></script>
<script src="{% static '/base/time_settings.js' %}"></script>
<!-- This CDN is for date format change -->
<script src="{% static '/build/js/moment.js' %}"></script>
<script src="{% static 'attendance/actions.js' %}"></script>

View File

@@ -161,7 +161,7 @@
id="date"
href="{% url 'date-settings' %}"
class="oh-inner-sidebar__link oh-dropdown__link"
>{% trans "Date Format" %}</a
>{% trans "Date & Time Format" %}</a
>
</li>
</ul>