moves the timeclock cooldown check to tgui (#16733)

* moves the timeclock cooldown check to tgui

* .

code/game/machinery/computer/timeclock_vr.dm

@@ -88,9 +88,11 @@
 	data["job_datum"] = null
 	data["allow_change_job"] = null
 	data["job_choices"] = null
+	data["on_cooldown"] = null
 	if(card)
 		data["card"] = "[card]"
 		data["assignment"] = card.assignment
+		data["card_cooldown"] = getCooldown()
 		var/datum/job/job = job_master.GetJob(card.rank)
 		if(job)
 			data["job_datum"] = list(
@@ -216,12 +218,15 @@
 /obj/machinery/computer/timeclock/proc/checkCardCooldown(var/mob/user)
 	if(!card)
 		return FALSE
-	var/time_left = 10 MINUTES - (world.time - card.last_job_switch)
+	var/time_left = getCooldown()
 	if(time_left > 0)
 		to_chat(user, "You need to wait another [round((time_left/10)/60, 1)] minute\s before you can switch.")
 		return FALSE
 	return TRUE
 
+/obj/machinery/computer/timeclock/proc/getCooldown()
+	return 10 MINUTES - (world.time - card.last_job_switch)
+
 /obj/machinery/computer/timeclock/proc/checkFace(var/mob/user)
 	if(!card)
 		to_chat(user, span_notice("No ID is inserted."))

tgui/packages/tgui/interfaces/TimeClock.tsx

@@ -10,6 +10,7 @@ import {
   NoticeBox,
   Section,
 } from '../components';
+import { formatTime } from '../format';
 import { Window } from '../layouts';
 import { RankIcon } from './common/RankIcon';
 
@@ -18,6 +19,7 @@ type Data = {
   department_hours: Record<string, number> | undefined;
   user_name: string;
   assignment: string | null;
+  card_cooldown: number;
   job_datum: {
     title: string;
     departments: string;
@@ -37,6 +39,7 @@ export const TimeClock = (props) => {
     department_hours,
     user_name,
     card,
+    card_cooldown,
     assignment,
     job_datum,
     allow_change_job,
@@ -128,6 +131,13 @@ export const TimeClock = (props) => {
                 department_hours[job_datum.pto_department] > 0 && (
                   <Button
                     fluid
+                    disabled={card_cooldown > 0}
+                    tooltip={
+                      card_cooldown > 0
+                        ? "You've recently modified your card, please wait " +
+                          formatTime(card_cooldown, 'short')
+                        : 'Clock out!'
+                    }
                     icon="exclamation-triangle"
                     onClick={() => act('switch-to-offduty')}
                   >
@@ -147,6 +157,13 @@ export const TimeClock = (props) => {
                   return alt_titles.map((title) => (
                     <Button
                       key={title}
+                      disabled={card_cooldown > 0}
+                      tooltip={
+                        card_cooldown > 0
+                          ? "You've recently modified your card, please wait " +
+                            formatTime(card_cooldown, 'short')
+                          : 'Clock in!'
+                      }
                       icon="suitcase"
                       onClick={() =>
                         act('switch-to-onduty-rank', {