2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { SyncStatus } from "farmbot/dist";
|
2019-03-04 15:14:35 -07:00
|
|
|
import { SyncButtonProps } from "./interfaces";
|
2017-06-29 12:54:02 -06:00
|
|
|
import { sync } from "../devices/actions";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../i18next_wrapper";
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2019-04-11 21:17:18 -06:00
|
|
|
const GRAY = "pseudo-disabled";
|
|
|
|
|
2017-06-29 12:54:02 -06:00
|
|
|
const COLOR_MAPPING: Record<SyncStatus, string> = {
|
|
|
|
"synced": "green",
|
|
|
|
"sync_now": "yellow",
|
|
|
|
"syncing": "yellow",
|
|
|
|
"sync_error": "red",
|
2019-04-11 21:17:18 -06:00
|
|
|
"booting": GRAY,
|
|
|
|
"maintenance": GRAY,
|
|
|
|
"unknown": GRAY
|
2017-06-29 12:54:02 -06:00
|
|
|
};
|
|
|
|
|
2019-04-11 21:17:18 -06:00
|
|
|
const TEXT_MAPPING = (autoSync: boolean): Record<SyncStatus, string> => ({
|
|
|
|
"synced": autoSync ? t("Synced") : t("SYNCED"),
|
|
|
|
"sync_now": autoSync ? t("Syncing...") : t("SYNC NOW"),
|
|
|
|
"syncing": autoSync ? t("Syncing...") : t("SYNCING"),
|
|
|
|
"sync_error": autoSync ? t("Sync error") : t("SYNC ERROR"),
|
|
|
|
"booting": autoSync ? t("Sync unknown") : t("UNKNOWN"),
|
|
|
|
"unknown": autoSync ? t("Sync unknown") : t("UNKNOWN"),
|
|
|
|
"maintenance": autoSync ? t("Sync unknown") : t("UNKNOWN")
|
2018-12-03 14:36:43 -07:00
|
|
|
});
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2018-03-14 20:50:51 -06:00
|
|
|
/** Animation during syncing action */
|
2018-03-14 20:26:54 -06:00
|
|
|
const spinner = <span className="btn-spinner sync" />;
|
|
|
|
|
2019-04-11 21:17:18 -06:00
|
|
|
export function SyncButton(props: SyncButtonProps) {
|
|
|
|
const { bot, dispatch, consistent, autoSync } = props;
|
2018-12-03 14:36:43 -07:00
|
|
|
const { sync_status } = bot.hardware.informational_settings;
|
|
|
|
const syncStatus = sync_status || "unknown";
|
2019-04-11 21:17:18 -06:00
|
|
|
const normalColor = COLOR_MAPPING[syncStatus] || GRAY;
|
2018-12-03 14:36:43 -07:00
|
|
|
const color = (!consistent && (syncStatus === "sync_now"))
|
2019-04-11 21:17:18 -06:00
|
|
|
? GRAY
|
2018-12-03 14:36:43 -07:00
|
|
|
: normalColor;
|
2019-04-11 21:17:18 -06:00
|
|
|
const text = TEXT_MAPPING(autoSync)[syncStatus] || syncStatus.replace("_", " ");
|
2018-12-03 14:36:43 -07:00
|
|
|
const spinnerEl = (syncStatus === "syncing") ? spinner : "";
|
2019-08-22 11:04:30 -06:00
|
|
|
const autoSyncfront = (syncStatus === "syncing") ? "auto-sync-busy" : "auto-sync";
|
2019-04-11 21:17:18 -06:00
|
|
|
const className = autoSync
|
2019-08-22 11:04:30 -06:00
|
|
|
? `nav-sync fb-button ${autoSyncfront}`
|
2019-04-11 21:17:18 -06:00
|
|
|
: `nav-sync ${color} fb-button`;
|
2018-03-14 20:26:54 -06:00
|
|
|
|
2018-01-20 07:46:44 -07:00
|
|
|
return <button
|
2019-04-11 21:17:18 -06:00
|
|
|
className={className}
|
2020-02-28 09:34:28 -07:00
|
|
|
title={t("sync")}
|
2018-01-20 07:46:44 -07:00
|
|
|
onClick={() => dispatch(sync())}>
|
2018-03-14 20:26:54 -06:00
|
|
|
{text} {spinnerEl}
|
2018-01-20 07:46:44 -07:00
|
|
|
</button>;
|
2017-07-04 07:20:51 -06:00
|
|
|
}
|