+
+ {/* {showFeedback && (
+
+
-
User
-
+
+
{isLoggedIn && (
= ({
{isLoggedIn && isNotVerified && (
- Looks like your {{ userEmail }} email hasn't been verified
- yet.
+ Looks like your {{ userEmail } as any} email hasn't been
+ verified yet.
Refresh
@@ -130,20 +120,10 @@ const MenuMain: FC = ({
)}
-
- Settings
-
-
+
-
-
- App
-
-
-
-
Info
-
+
+
= ({
Privacy Policy
+
+
+
+
+
- Tap on the
+ Tap on the{' '} +
- Long-press
),
@@ -71,7 +78,7 @@ function useLongPressTip() {
const vibrate = () =>
isPlatform('hybrid') && Haptics.impact({ style: ImpactStyle.Light });
-const HomeController: FC = () => {
+const HomeController = () => {
const ionRouter = useIonRouter();
const { navigate } = useContext(NavContext);
@@ -112,7 +119,7 @@ const HomeController: FC = () => {
Home
- {
onClick={navigateToPrimarySurvey}
onLongClick={vibrate}
icon={addOutline}
- buttonProps={{ longClickDuration: 500 }}
>
-
+ App
+
+
+
+ Settings
+
+
);
diff --git a/src/Home/Menu/Main/styles.scss b/src/Home/Menu/Main/styles.scss
index d490998e..c2282421 100644
--- a/src/Home/Menu/Main/styles.scss
+++ b/src/Home/Menu/Main/styles.scss
@@ -4,14 +4,14 @@
}
#feedback-request {
- border-radius: var(--theme-border-radius);
box-shadow: none;
+ border-radius: var(--theme-border-radius);
}
.app-menu {
img {
- margin: 0 auto;
display: block;
+ margin: 0 auto;
height: 140px;
padding: 15px;
}
@@ -28,13 +28,13 @@
}
ion-button {
+ float: right;
+ color: #000000;
font-size: 0.9em;
+ --border-color: #000000;
&.md {
font-size: 0.7em;
}
- float: right;
- color: #000000;
- --border-color: #000000;
}
}
}
diff --git a/src/Home/Menu/index.tsx b/src/Home/Menu/index.tsx
index f9e113fa..00bc8ce2 100644
--- a/src/Home/Menu/index.tsx
+++ b/src/Home/Menu/index.tsx
@@ -1,9 +1,7 @@
-import { FC } from 'react';
import { observer } from 'mobx-react';
-import appModel from 'models/app';
-import userModel from 'models/user';
import { Trans as T } from 'react-i18next';
import { Page, useAlert, useLoader, useToast } from '@flumens';
+import userModel from 'models/user';
import Main from './Main';
const useConfirmationDialog = () => {
@@ -38,7 +36,7 @@ const useConfirmationDialog = () => {
return showConfirmationDialog;
};
-const Controller: FC = () => {
+const Controller = () => {
const showLogoutConfirmationDialog = useConfirmationDialog();
const toast = useToast();
const loader = useLoader();
@@ -81,7 +79,6 @@ const Controller: FC = () => {
+ Tap on the{' '} +
+
Other recording options
diff --git a/src/Home/styles.scss b/src/Home/styles.scss
index da489e11..8cde7eed 100644
--- a/src/Home/styles.scss
+++ b/src/Home/styles.scss
@@ -1,47 +1,32 @@
-ion-tab-bar {
- --color: var(--ion-color-dark);
-
- border-top: 1px solid var(--ion-color-light-shade);
- --background: #fffdef;
- padding: 5px 0;
-
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
-
- ion-button {
- background: white;
- border-radius: var(--theme-border-radius);
- height: 70px;
- width: 70px;
- margin-top: -20px;
- }
-
- ion-tab-button {
- font-family: 'Museo500';
- }
- ion-icon {
- font-size: 2rem;
- }
- ion-tab-button ion-icon {
- --ionicon-stroke-width: 20px;
- }
-}
-
#main {
ion-tab-bar {
contain: none;
+ --color: var(--ion-color-dark);
+ border-top: 1px solid rgba(var(--color-primary-700-rgb), 0.3);
+ padding: 5px 0;
padding-bottom: var(--ion-safe-area-bottom, 0);
+ --background: #fffdef;
ion-tab-button {
max-width: 20vw;
--padding-start: 3;
--padding-end: 3;
- // https://github.com/ionic-team/ionic-framework/issues/22511
- .on-click-container {
- display: flex;
- flex-direction: column;
+ ion-icon {
+ font-size: 2rem;
+ --ionicon-stroke-width: 20px;
+ }
+
+ &.tab-selected {
+ &:not(.activities-button-on) {
+ color: var(--color-primary-800);
+ }
+ ion-icon {
+ --ionicon-stroke-width: 28;
+ }
+ ion-label {
+ font-weight: bold;
+ }
}
}
@@ -49,41 +34,4 @@ ion-tab-bar {
color: var(--ion-color-secondary);
}
}
-
- £ > ion-router-outlet > div > div {
- display: inherit !important;
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- flex-direction: column;
- width: 100%;
- height: 100%;
- contain: size layout style;
- }
-
- .long-press-surveys-label {
- justify-content: center;
- display: flex;
- align-items: center;
- background: #424242;
- color: white;
- font-size: 0.8rem;
- }
-
- ion-fab-button {
- --background: white;
- ion-label {
- color: black;
- }
- }
-}
-
-.long-tap-tip-message-icon {
- background: var(--ion-color-primary);
- border-radius: 3px;
- padding: 3px;
- margin-bottom: -4px;
- color: white;
}
diff --git a/src/Info/About/styles.scss b/src/Info/About/styles.scss
index fabed390..60b96b06 100644
--- a/src/Info/About/styles.scss
+++ b/src/Info/About/styles.scss
@@ -15,8 +15,8 @@
}
ul {
- list-style-type: none;
padding-inline-start: 15px;
+ list-style-type: none;
}
li {
diff --git a/src/Info/BRCApproved/index.tsx b/src/Info/BRCApproved/index.tsx
index d9bbf0fd..1aed6fa8 100644
--- a/src/Info/BRCApproved/index.tsx
+++ b/src/Info/BRCApproved/index.tsx
@@ -1,5 +1,5 @@
-import { Page, Header, Main, Section } from '@flumens';
import { Trans as T } from 'react-i18next';
+import { Page, Header, Main, Section } from '@flumens';
import brcLogo from './BRC_approved_logo.png';
import './styles.scss';
diff --git a/src/Info/BRCApproved/styles.scss b/src/Info/BRCApproved/styles.scss
index d1ea4a58..d254c941 100644
--- a/src/Info/BRCApproved/styles.scss
+++ b/src/Info/BRCApproved/styles.scss
@@ -1,6 +1,6 @@
.brc-approved-logo {
- width: calc(100% - 20px);
- margin: 9px auto;
display: block;
+ margin: 9px auto;
border-radius: var(--theme-border-radius);
+ width: calc(100% - 20px);
}
diff --git a/src/Info/Credits/index.tsx b/src/Info/Credits/index.tsx
index 45ad8f26..fde360e6 100644
--- a/src/Info/Credits/index.tsx
+++ b/src/Info/Credits/index.tsx
@@ -1,4 +1,4 @@
-import { Page, Main, Header, Section } from '@flumens';
+import { Header, Main, Page, Section } from 'common/flumens';
import { Trans as T } from 'react-i18next';
import cehLogo from './images/cehLogo.png';
import shriLogo from './images/shriLogo.png';
diff --git a/src/Info/Help/index.tsx b/src/Info/Help/index.tsx
index 969848b3..3d61e527 100644
--- a/src/Info/Help/index.tsx
+++ b/src/Info/Help/index.tsx
@@ -1,7 +1,3 @@
-import { FC } from 'react';
-import CONFIG from 'common/config';
-import { Page, Collapse, Header, Main } from '@flumens';
-import { IonList, IonItemDivider, IonIcon, IonItem } from '@ionic/react';
import {
settingsOutline,
arrowUndoOutline,
@@ -18,30 +14,33 @@ import {
logOutOutline,
} from 'ionicons/icons';
import { Trans as T } from 'react-i18next';
-import './styles.scss';
-import deleteRecordImage from './swipe_record.png';
+import { Page, Collapse, Header, Main } from '@flumens';
+import { IonList, IonIcon, IonItem } from '@ionic/react';
+import CONFIG from 'common/config';
import imageRecognitionAgreeImg from './image_recognition_agree.jpg';
import imageRecognitionDisagreeImg from './image_recognition_disagree.jpg';
import suggestionsImg from './image_recognition_suggestions.jpg';
+import './styles.scss';
+import deleteRecordImage from './swipe_record.png';
-const Help: FC = () => (
+const Help = () => (
-
-
+
+
-
Records
-
+
+
-
+
+
-
-
+
+
-
+
+
@@ -229,7 +232,7 @@ const Help: FC = () => ( website .
-+
+
User
-
+
-
+
-
@@ -320,7 +323,7 @@ const Help: FC = () => (
logout
+
+
Other
-
+
+
-
@@ -400,7 +403,7 @@ const Help: FC = () => (
location page and from the settings{' '}
+
For more help please visit the iRecord{' '}
forum.
diff --git a/src/Info/Help/styles.scss b/src/Info/Help/styles.scss
index e2805019..20b2ab00 100644
--- a/src/Info/Help/styles.scss
+++ b/src/Info/Help/styles.scss
@@ -12,14 +12,6 @@
margin-top: 30px;
}
- .long-tap-tip-message-icon {
- background: var(--ion-color-primary);
- border-radius: 3px;
- padding: 3px;
- margin-bottom: -4px;
- color: white;
- }
-
ul li:first-child {
margin-bottom: 10px;
}
diff --git a/src/Info/SplashScreenRequired/images/welcome_1.jpg b/src/Info/OnboardingScreens/images/welcome_1.jpg
similarity index 100%
rename from src/Info/SplashScreenRequired/images/welcome_1.jpg
rename to src/Info/OnboardingScreens/images/welcome_1.jpg
diff --git a/src/Info/SplashScreenRequired/images/welcome_2.jpg b/src/Info/OnboardingScreens/images/welcome_2.jpg
similarity index 100%
rename from src/Info/SplashScreenRequired/images/welcome_2.jpg
rename to src/Info/OnboardingScreens/images/welcome_2.jpg
diff --git a/src/Info/SplashScreenRequired/images/welcome_3.jpg b/src/Info/OnboardingScreens/images/welcome_3.jpg
similarity index 100%
rename from src/Info/SplashScreenRequired/images/welcome_3.jpg
rename to src/Info/OnboardingScreens/images/welcome_3.jpg
diff --git a/src/Info/SplashScreenRequired/images/welcome_4.jpg b/src/Info/OnboardingScreens/images/welcome_4.jpg
similarity index 100%
rename from src/Info/SplashScreenRequired/images/welcome_4.jpg
rename to src/Info/OnboardingScreens/images/welcome_4.jpg
diff --git a/src/Info/SplashScreenRequired/index.tsx b/src/Info/OnboardingScreens/index.tsx
similarity index 93%
rename from src/Info/SplashScreenRequired/index.tsx
rename to src/Info/OnboardingScreens/index.tsx
index 8371a8e8..4bb257f2 100644
--- a/src/Info/SplashScreenRequired/index.tsx
+++ b/src/Info/OnboardingScreens/index.tsx
@@ -1,7 +1,12 @@
-import { FC, useState } from 'react';
-import appModel from 'models/app';
-import { Page, Main } from '@flumens';
+import { useState } from 'react';
import { observer } from 'mobx-react';
+import { arrowForward, checkmarkOutline } from 'ionicons/icons';
+import SwiperCore from 'swiper';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Page, Main } from '@flumens';
import {
IonButton,
IonToolbar,
@@ -9,16 +14,18 @@ import {
IonIcon,
IonFooter,
} from '@ionic/react';
-import SwiperCore, { Pagination } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { arrowForward, checkmarkOutline } from 'ionicons/icons';
-import './styles.scss';
+import appModel from 'models/app';
import welcomeBackground1 from './images/welcome_1.jpg';
import welcomeBackground2 from './images/welcome_2.jpg';
import welcomeBackground3 from './images/welcome_3.jpg';
import welcomeBackground4 from './images/welcome_4.jpg';
+import './styles.scss';
+
+type Props = {
+ children: any;
+};
-const OnBoardingScreens: FC = ({ children }) => {
+const OnBoardingScreens = ({ children }: Props) => {
const [moreSlidesExist, setMoreSlidesExist] = useState(true);
const [controlledSwiper, setControlledSwiper] = useState();
diff --git a/src/Info/SplashScreenRequired/styles.scss b/src/Info/OnboardingScreens/styles.scss
similarity index 91%
rename from src/Info/SplashScreenRequired/styles.scss
rename to src/Info/OnboardingScreens/styles.scss
index 95515af6..222be9a2 100644
--- a/src/Info/SplashScreenRequired/styles.scss
+++ b/src/Info/OnboardingScreens/styles.scss
@@ -1,12 +1,14 @@
@mixin slide {
flex-direction: column;
+ background-position: center;
+ background-size: cover;
.slide-header {
- background-size: cover;
- height: 100%;
- width: 100%;
position: absolute;
top: 0;
+ background-size: cover;
+ width: 100%;
+ height: 100%;
}
}
@@ -15,33 +17,29 @@
position: fixed !important;
top: 0;
left: 0;
+ background: white;
width: 100vw;
height: 100vh;
- background: white;
.message {
- max-width: 100%;
position: absolute;
- background: white;
- background-color: #ffffffe3;
- max-width: 90%;
- min-width: 90%;
- margin: 0 auto;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
+ margin: 0 auto;
border-radius: 10px;
- overflow: hidden;
+ background: white;
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgb(254, 255, 247) 0%, white 68%);
+ max-width: 90%;
+ overflow: hidden;
p {
- text-align: left;
- font-size: 1.1em;
- margin-bottom: 5px;
- color: var(--ion-color-dark);
- padding: 10px 20px 15px 20px;
margin: 0;
+ padding: 10px 20px 15px 20px;
+ color: var(--ion-color-dark);
+ font-size: 1.1em;
line-height: 1.5em;
+ text-align: left;
}
}
.first .message,
@@ -55,14 +53,14 @@
}
h2 {
- letter-spacing: 2px;
- font-size: 1.3rem;
margin: 0;
- text-align: center;
- color: var(--ion-color-light);
padding: 15px;
- font-weight: bold;
+ color: var(--ion-color-light);
color: var(--ion-color-primary);
+ font-weight: bold;
+ font-size: 1.3rem;
+ letter-spacing: 2px;
+ text-align: center;
}
.swiper-pagination-bullets {
@@ -70,76 +68,72 @@
.swiper-pagination-bullet {
opacity: 1;
+ --bullet-background: var(--ion-color-primary-contrast);
}
.swiper-pagination-bullet-active {
opacity: 0.8;
- background: var(--ion-color-primary);
+ background: var(--ion-color-primary-tint);
}
}
}
.app-name {
- font-family: 'Museo300';
- font-size: 25px;
+ position: absolute;
+ top: -16px;
+ left: 0;
+ z-index: 10000;
+ background: white;
+ padding: 10px;
+ padding-top: calc(var(--ion-safe-area-top, 0) + 10px);
+ width: 100%;
+ color: black;
font-weight: 400;
+ font-size: 25px;
text-align: center;
- color: black;
&.md {
padding: 0;
}
b {
- font-family: 'Museo700';
color: var(--ion-color-primary);
}
-
- position: absolute;
- top: -16px;
- left: 0;
- width: 100%;
- z-index: 10000;
- background: white;
- padding: 10px;
- padding-top: calc(var(--ion-safe-area-top, 0) + 10px);
}
.swiper-slide {
@include slide;
- background-size: cover;
- background-position: center;
.app-logo-wrapper {
- background-color: #ffffff47;
position: absolute;
- width: 100%;
- background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
+ background-color: #ffffff47;
+ background-color: rgba(255, 255, 255, 0.7);
+ width: 100%;
img {
display: block;
+ margin: 0 auto;
padding: 30px;
max-width: 90%;
- margin: 0 auto;
}
}
.slide-header {
- max-width: 90%;
background-position: center;
padding-top: calc(var(--ion-safe-area-top, 0) + 10px);
+ max-width: 90%;
}
.message-container {
position: absolute;
bottom: 100px;
- width: 100%;
- background-color: #ffffffad;
- max-width: 90%;
- margin: 0 auto;
backdrop-filter: blur(5px);
+ margin: 0 auto;
border-radius: 10px;
+ background-color: #ffffffad;
+ width: 100%;
+ max-width: 90%;
}
}
@@ -154,11 +148,11 @@
bottom: 0;
ion-button {
- height: 50px;
- width: 50px;
margin: 10px;
- border-radius: 50%;
box-shadow: 0 0 15px #00000099;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
}
}
}
diff --git a/src/Info/router.jsx b/src/Info/router.jsx
index d91d3b7c..9574e200 100644
--- a/src/Info/router.jsx
+++ b/src/Info/router.jsx
@@ -1,8 +1,8 @@
import { Route } from 'react-router-dom';
-import Credits from './Credits';
import About from './About';
-import Help from './Help';
import BRCApproved from './BRCApproved';
+import Credits from './Credits';
+import Help from './Help';
export default [
Are you sure you want to reset the application to its initial state?
-
- This will wipe all the locally stored app data!
-
+ Are you sure you want to delete your account?
+ Are you sure you want to remove all successfully synchronised local
+ records?
+
+ ),
buttons: [
{
text: 'Cancel',
@@ -130,11 +123,10 @@ type Props = {
geolocateSurveyEntries: boolean;
onToggle: any;
sendAnalytics?: boolean;
- useExperiments?: boolean;
useSpeciesImageClassifier: boolean;
};
-const MenuMain: FC = ({
+const MenuMain = ({
resetApp,
isLoggedIn,
deleteUser,
@@ -142,10 +134,9 @@ const MenuMain: FC = ({
onToggle,
useTraining,
sendAnalytics,
- useExperiments,
geolocateSurveyEntries,
useSpeciesImageClassifier,
-}) => {
+}: Props) => {
const showUserDeleteDialog = useUserDeleteDialog(deleteUser);
const showResetDialog = useResetDialog(resetApp);
const showDeleteAllSamplesDialog =
@@ -157,42 +148,46 @@ const MenuMain: FC = ({
onToggle('useTraining', checked);
const onGeolocateSurveyEntriesToggle = (checked: boolean) =>
onToggle('geolocateSurveyEntries', checked);
- const onUseExperiments = (checked: boolean) =>
- onToggle('useExperiments', checked);
+ // const onUseExperiments = (checked: boolean) =>
+ // onToggle('useExperiments', checked);
const onUseImageClassifier = (checked: boolean) =>
onToggle('useSpeciesImageClassifier', checked);
return (
-
+
-
+
+
${t('Note')}: ${t( - 'records on the server will not be touched.' - )}
`, + message: ( ++ Note: records on the server will not be touched. +
+
Location
-
+
+
Manage Saved
-
+ We will use GPS to obtain precise locations for species during
+ Species List surveys.
+
-
+
-
Application
-
-
+
+
+
Use image recognition to identify species from your photos.
{/*
@@ -206,47 +201,47 @@ const MenuMain: FC = ({
{t(countries[country])}
*/}
-
+
Mark any new records as 'training' and exclude from all reports.
-
+
Some features are in a trial state and are subject to change in
future releases.
-
+ */}
-
+
Share app crash data so we can make the app more reliable.
-
+
Remove Uploaded Surveys
-
+
You can remove uploaded surveys from this device.
@@ -256,7 +251,7 @@ const MenuMain: FC = ({
Reset app
-
+
You can reset the app data to its default settings.
@@ -268,7 +263,7 @@ const MenuMain: FC = ({
Delete account
-
+
You can delete your user account from the system.
@@ -276,7 +271,7 @@ const MenuMain: FC = ({
- ,
checked: boolean
) {
+ isPlatform('hybrid') && Haptics.impact({ style: ImpactStyle.Light });
appModel.attrs[setting] = checked;
appModel.save();
}
@@ -92,7 +94,6 @@ const Container = () => {
const {
sendAnalytics,
useTraining,
- useExperiments,
geolocateSurveyEntries,
useSpeciesImageClassifier,
} = appModel.attrs;
@@ -107,7 +108,6 @@ const Container = () => {
deleteUser={deleteUser}
sendAnalytics={sendAnalytics}
useTraining={useTraining}
- useExperiments={useExperiments}
geolocateSurveyEntries={geolocateSurveyEntries}
useSpeciesImageClassifier={useSpeciesImageClassifier}
resetApp={() => resetApp(toast)}
diff --git a/src/Settings/Survey/index.tsx b/src/Settings/Survey/index.tsx
index 439fb869..bcdda724 100644
--- a/src/Settings/Survey/index.tsx
+++ b/src/Settings/Survey/index.tsx
@@ -1,12 +1,12 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
import { observer } from 'mobx-react';
-import { NavContext } from '@ionic/react';
-import { Page, Attr, Header, Main, gridrefAccuracy } from '@flumens';
import { useTranslation } from 'react-i18next';
+import { Page, Attr, Header, Main, gridrefAccuracy } from '@flumens';
+import { NavContext } from '@ionic/react';
import appModel from 'models/app';
import './styles.scss';
-const GridType: FC = () => {
+const GridType = () => {
const { goBack } = useContext(NavContext);
const { t } = useTranslation();
diff --git a/src/Settings/router.jsx b/src/Settings/router.jsx
index d9c16a4d..95d9db01 100644
--- a/src/Settings/router.jsx
+++ b/src/Settings/router.jsx
@@ -1,8 +1,8 @@
import { Route } from 'react-router-dom';
import appModel from 'models/app';
import userModel from 'models/user';
-import Menu from './Menu';
import Locations from './Locations';
+import Menu from './Menu';
import Survey from './Survey';
export default [
diff --git a/src/Survey/Default/Home/Main/index.tsx b/src/Survey/Default/Home/Main/index.tsx
index 505fef63..b7ee8392 100644
--- a/src/Survey/Default/Home/Main/index.tsx
+++ b/src/Survey/Default/Home/Main/index.tsx
@@ -1,21 +1,19 @@
-import { FC } from 'react';
import { observer } from 'mobx-react';
-import { IonList, IonIcon, useIonViewDidEnter } from '@ionic/react';
-import appModel from 'models/app';
import { lockClosedOutline } from 'ionicons/icons';
+import { Trans as T } from 'react-i18next';
+import { useRouteMatch } from 'react-router';
import { Main, useAlert } from '@flumens';
+import { IonList, IonIcon, useIonViewDidEnter } from '@ionic/react';
+import appModel from 'models/app';
import Sample from 'models/sample';
-import { useRouteMatch } from 'react-router';
-import { Trans as T } from 'react-i18next';
-import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
+import DisabledRecordMessage from 'Survey/common/Components/DisabledRecordMessage';
import MenuAttr from 'Survey/common/Components/MenuAttr';
+import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
import MenuLocation from 'Survey/common/Components/MenuLocation';
-import DisabledRecordMessage from 'Survey/common/Components/DisabledRecordMessage';
import MenuTaxonItem from 'Survey/common/Components/MenuTaxonItem';
import PhotoPicker from 'Survey/common/Components/PhotoPicker';
import VerificationMessage from 'Survey/common/Components/VerificationMessage';
import lockScreenshot from './lock.png';
-
import './styles.scss';
interface Props {
@@ -60,7 +58,7 @@ const useAttributeLockingTip = (sample: Sample) => {
useIonViewDidEnter(showTip);
};
-const EditMain: FC = ({ sample }) => {
+const EditMain = ({ sample }: Props) => {
useAttributeLockingTip(sample);
const { url } = useRouteMatch();
@@ -73,34 +71,35 @@ const EditMain: FC = ({ sample }) => {
return (
-
+
{isDisabled && (
-
{`v${config.version} (${config.build})`}
+{`v${config.version} (${config.build})`}
); }; diff --git a/src/Settings/Menu/Main/styles.scss b/src/Settings/Menu/Main/styles.scss index 915be7d5..412fbf7b 100644 --- a/src/Settings/Menu/Main/styles.scss +++ b/src/Settings/Menu/Main/styles.scss @@ -1,23 +1,5 @@ #settings { ion-content { - --padding-top: 10px; - - .menu-attr-toggle { - ion-icon { - font-size: 18px; - } - } - - ion-item ion-toggle { - padding-right: 0; - } - - .rounded { - .menu-attr-toggle:first-of-type { - --border-radius: 15px 15px 0 0; - } - } - .destructive-item { ion-item ion-icon, ion-item:not(.info-message) ion-label { @@ -25,12 +7,6 @@ } } } - - .app-version { - margin: 0 10px 10px; - opacity: 0.7; - float: right; - } } ion-alert .info-message.destructive-warning { diff --git a/src/Settings/Menu/index.tsx b/src/Settings/Menu/index.tsx index 20d5606c..9e924bcd 100644 --- a/src/Settings/Menu/index.tsx +++ b/src/Settings/Menu/index.tsx @@ -1,10 +1,11 @@ import { useContext } from 'react'; -import appModel, { Attrs as AppModelAttrs } from 'models/app'; -import userModel from 'models/user'; import { observer } from 'mobx-react'; -import { NavContext } from '@ionic/react'; -import savedSamples, { removeAllSynced } from 'models/savedSamples'; +import { Haptics, ImpactStyle } from '@capacitor/haptics'; import { Page, Header, useToast, PickByType, useLoader } from '@flumens'; +import { NavContext, isPlatform } from '@ionic/react'; +import appModel, { Attrs as AppModelAttrs } from 'models/app'; +import savedSamples, { removeAllSynced } from 'models/savedSamples'; +import userModel from 'models/user'; import Main from './Main'; async function resetApp(toast: any) { @@ -82,6 +83,7 @@ function onToggle( setting: keyof PickByType
+
+
+
+
+
= ({ sample }) => {
+const DefaultHome = ({ sample }: Props) => {
const toast = useToast();
const { navigate } = useContext(NavContext);
const checkSampleStatus = useValidateCheck(sample);
@@ -44,11 +44,11 @@ const DefaultHome: FC = ({ sample }) => {
!sample.metadata.saved ? _processDraft() : _processSubmission();
const finishButton = (
-
diff --git a/src/Survey/Default/Taxon.tsx b/src/Survey/Default/Taxon.tsx
index 31312b8c..549ef82a 100644
--- a/src/Survey/Default/Taxon.tsx
+++ b/src/Survey/Default/Taxon.tsx
@@ -1,25 +1,25 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
import { observer } from 'mobx-react';
+import { useRouteMatch } from 'react-router';
import { Page, Header, Main } from '@flumens';
-import TaxonSearch, {
- TaxonSearchFilters,
-} from 'Survey/common/Components/TaxonSearch';
-import Sample from 'models/sample';
+import { NavContext } from '@ionic/react';
import appModel from 'models/app';
-import savedSamples from 'models/savedSamples';
import Occurrence from 'models/occurrence';
-import { useRouteMatch } from 'react-router';
+import Sample from 'models/sample';
+import savedSamples from 'models/savedSamples';
import surveyConfig from 'Survey/Default/config';
-import { NavContext } from '@ionic/react';
+import TaxonSearch, {
+ TaxonSearchFilters,
+} from 'Survey/common/Components/TaxonSearch';
const getNewSample = async (taxon: any) => {
- const newSample = await surveyConfig.create(Sample, Occurrence, { taxon });
+ const newSample = await surveyConfig.create({ Sample, Occurrence, taxon });
newSample.save();
savedSamples.push(newSample);
return newSample;
};
-const Taxon: FC = () => {
+const Taxon = () => {
const { navigate } = useContext(NavContext);
const match = useRouteMatch();
diff --git a/src/Survey/Default/config/__tests__/config-test.js b/src/Survey/Default/config/__tests__/config-test.js
index 669bc4db..75452739 100644
--- a/src/Survey/Default/config/__tests__/config-test.js
+++ b/src/Survey/Default/config/__tests__/config-test.js
@@ -1,13 +1,8 @@
-import defaultSurvey, {
- _getFullTaxaGroupSurvey,
- getTaxaGroupSurvey,
-} from '../';
-import birdsSurvey from '../birds';
-import dragonfliesSurvey from '../dragonflies';
-
import i18n from 'i18next';
-
import { initReactI18next } from 'react-i18next';
+import defaultSurvey, { _getFullTaxaGroupSurvey, getTaxaGroupSurvey } from '..';
+import birdsSurvey from '../birds';
+import dragonfliesSurvey from '../dragonflies';
i18n.use(initReactI18next).init({ lng: 'en' });
diff --git a/src/Survey/Default/config/arthropods.ts b/src/Survey/Default/config/arthropods.ts
index a7432f0d..22f7ce36 100644
--- a/src/Survey/Default/config/arthropods.ts
+++ b/src/Survey/Default/config/arthropods.ts
@@ -1,5 +1,5 @@
-import progressIcon from 'common/images/progress-circles.svg';
import { groupsReverse as groups } from 'common/data/informalGroups';
+import progressIcon from 'common/images/progress-circles.svg';
import { Survey } from 'Survey/common/config';
const stage = [
diff --git a/src/Survey/Default/config/bryophytes.ts b/src/Survey/Default/config/bryophytes.ts
index 6b0b375e..fd79db47 100644
--- a/src/Survey/Default/config/bryophytes.ts
+++ b/src/Survey/Default/config/bryophytes.ts
@@ -1,7 +1,7 @@
import { clipboardOutline } from 'ionicons/icons';
-import landIcon from 'common/images/land.svg';
-import genderIcon from 'common/images/gender.svg';
import { groupsReverse as groups } from 'common/data/informalGroups';
+import genderIcon from 'common/images/gender.svg';
+import landIcon from 'common/images/land.svg';
import { Survey } from 'Survey/common/config';
const habitatOptions = [
diff --git a/src/Survey/Default/config/butterflies.ts b/src/Survey/Default/config/butterflies.ts
index d597f6cf..1bda77dc 100644
--- a/src/Survey/Default/config/butterflies.ts
+++ b/src/Survey/Default/config/butterflies.ts
@@ -1,8 +1,8 @@
+import { groupsReverse as groups } from 'common/data/informalGroups';
import genderIcon from 'common/images/gender.svg';
import numberIcon from 'common/images/number.svg';
import progressIcon from 'common/images/progress-circles.svg';
import appModel from 'models/app';
-import { groupsReverse as groups } from 'common/data/informalGroups';
import { Survey } from 'Survey/common/config';
const sex = [
diff --git a/src/Survey/Default/config/dragonflies.ts b/src/Survey/Default/config/dragonflies.ts
index 664d811c..491c0309 100644
--- a/src/Survey/Default/config/dragonflies.ts
+++ b/src/Survey/Default/config/dragonflies.ts
@@ -1,6 +1,6 @@
-import numberIcon from 'common/images/number.svg';
-import landIcon from 'common/images/land.svg';
import { groupsReverse as groups } from 'common/data/informalGroups';
+import landIcon from 'common/images/land.svg';
+import numberIcon from 'common/images/number.svg';
import { Survey } from 'Survey/common/config';
const numRanges = [
diff --git a/src/Survey/Default/config/index.ts b/src/Survey/Default/config/index.ts
index 94cb23e6..a85ab70d 100644
--- a/src/Survey/Default/config/index.ts
+++ b/src/Survey/Default/config/index.ts
@@ -1,11 +1,13 @@
/* eslint-disable no-param-reassign */
-import appModel from 'models/app';
+import mergeWith from 'lodash.mergewith';
+import * as Yup from 'yup';
import genderIcon from 'common/images/gender.svg';
import numberIcon from 'common/images/number.svg';
import progressIcon from 'common/images/progress-circles.svg';
+import userModel from 'common/models/user';
+import appModel from 'models/app';
import AppOccurrence from 'models/occurrence';
import AppSample from 'models/sample';
-import * as Yup from 'yup';
import {
coreAttributes,
dateAttr,
@@ -18,15 +20,15 @@ import {
identifiersAttr,
getSystemAttrs,
makeSubmissionBackwardsCompatible,
+ recorderAttr,
} from 'Survey/common/config';
-import mergeWith from 'lodash.mergewith';
import arthropodSurvey from './arthropods';
-import dragonfliesSurvey from './dragonflies';
+import birdsSurvey from './birds';
import bryophytesSurvey from './bryophytes';
import butterfliesSurvey from './butterflies';
+import dragonfliesSurvey from './dragonflies';
import mothsSurvey from './moths';
import plantFungiSurvey from './plantFungi';
-import birdsSurvey from './birds';
export const taxonGroupSurveys = {
arthropods: arthropodSurvey,
@@ -103,6 +105,10 @@ const survey: Survey = {
date: dateAttr,
+ recorder: recorderAttr,
+ /** @deprecated */
+ recorders: recorderAttr,
+
activity: activityAttr,
},
@@ -224,21 +230,25 @@ const survey: Survey = {
},
},
- async create(Sample, Occurrence, options) {
+ async create({ Sample, Occurrence, image, taxon, skipLocation, skipGPS }) {
const ignoreErrors = () => {};
- const { image, taxon, skipLocation, skipGPS } = options;
-
const occurrence = new Occurrence();
if (image) occurrence.media.push(image);
+ // add currently logged in user as one of the recorders
+ let recorder = '';
+ if (userModel.isLoggedIn()) {
+ recorder = userModel.getPrettyName();
+ }
+
const sample = new Sample({
metadata: {
survey_id: survey.id,
survey: survey.name,
},
- attrs: { location: {} },
+ attrs: { location: {}, recorder },
});
sample.occurrences.push(occurrence);
@@ -277,10 +287,6 @@ const survey: Survey = {
return sample;
},
- async createWithPhoto(Sample, Occurrence, { image }) {
- return survey.create(Sample, Occurrence, { image });
- },
-
modifySubmission(submission) {
Object.assign(submission.values, getSystemAttrs());
@@ -337,7 +343,7 @@ export function _getFullTaxaGroupSurvey(
return undefined;
}
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
const { render, taxaGroups, ...defaultSurveyCopy } = survey;
const mergedDefaultSurvey: Survey = mergeWith(
{},
diff --git a/src/Survey/Default/config/plantFungi.ts b/src/Survey/Default/config/plantFungi.ts
index 4289112d..75083383 100644
--- a/src/Survey/Default/config/plantFungi.ts
+++ b/src/Survey/Default/config/plantFungi.ts
@@ -1,7 +1,7 @@
+import { groupsReverse as groups } from 'common/data/informalGroups';
import numberIcon from 'common/images/number.svg';
-import Sample from 'models/sample';
import appModel from 'models/app';
-import { groupsReverse as groups } from 'common/data/informalGroups';
+import Sample from 'models/sample';
import { Survey } from 'Survey/common/config';
const numberOptions = [
diff --git a/src/Survey/Default/router.jsx b/src/Survey/Default/router.jsx
index 7cdd5af5..0c1f3d61 100644
--- a/src/Survey/Default/router.jsx
+++ b/src/Survey/Default/router.jsx
@@ -1,8 +1,8 @@
import { RouteWithModels, AttrPage } from '@flumens';
import savedSamples from 'models/savedSamples';
+import Activity from 'Survey/common/Components/Activity';
import ModelLocation from 'Survey/common/Components/ModelLocation';
import StartNewSurvey from 'Survey/common/Components/StartNewSurvey';
-import Activity from 'Survey/common/Components/Activity';
import Taxon from 'Survey/common/Components/Taxon';
import DefaultHome from './Home';
import NewSurveyTaxon from './Taxon';
diff --git a/src/Survey/List/Home/Main/index.tsx b/src/Survey/List/Home/Main.tsx
similarity index 61%
rename from src/Survey/List/Home/Main/index.tsx
rename to src/Survey/List/Home/Main.tsx
index 68874678..9530bdb1 100644
--- a/src/Survey/List/Home/Main/index.tsx
+++ b/src/Survey/List/Home/Main.tsx
@@ -1,23 +1,27 @@
-import { FC } from 'react';
+import { useContext } from 'react';
import { observer } from 'mobx-react';
-import { IonButton, IonLabel, IonList } from '@ionic/react';
-import { Main } from '@flumens';
-import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
-import MenuAttr from 'Survey/common/Components/MenuAttr';
+import { useRouteMatch } from 'react-router';
+import { Button, InfoMessage, Main } from '@flumens';
+import { IonList, NavContext } from '@ionic/react';
+import Sample from 'models/sample';
import DisabledRecordMessage from 'Survey/common/Components/DisabledRecordMessage';
+import MenuAttr from 'Survey/common/Components/MenuAttr';
+import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
import SpeciesList from 'Survey/common/Components/SpeciesList';
-import Sample from 'models/sample';
-import { useRouteMatch } from 'react-router';
-import { Trans as T } from 'react-i18next';
-import './styles.scss';
type Props = {
sample: Sample;
onDelete: any;
+ showChildSampleDistanceWarning: boolean;
};
-const HomeMain: FC = ({ sample, onDelete }) => {
+const HomeMain = ({
+ sample,
+ onDelete,
+ showChildSampleDistanceWarning,
+}: Props) => {
const { url } = useRouteMatch();
+ const { navigate } = useContext(NavContext);
// calculate unique taxa
const uniqueTaxa: any = {};
@@ -36,36 +40,39 @@ const HomeMain: FC = ({ sample, onDelete }) => {
return (
-
+
{isDisabled && (
-
+
+
+ navigate(`${url}/taxon`)}
>
-
- Add Species
-
-
+ Add Species
+
)}
= ({ sample }) => {
+const ListHome = ({ sample }: Props) => {
const toast = useToast();
const { navigate } = useContext(NavContext);
const checkSampleStatus = useValidateCheck(sample);
@@ -33,6 +35,8 @@ const ListHome: FC = ({ sample }) => {
const isValid = checkSampleStatus();
if (!isValid) return;
+ gridAlertService.stop(sample.cid);
+
// eslint-disable-next-line no-param-reassign
sample.metadata.saved = true;
sample.save();
@@ -50,12 +54,26 @@ const ListHome: FC = ({ sample }) => {
!isSaved ? _processDraft() : _processSubmission();
const finishButton = (
-
@@ -65,7 +83,11 @@ const ListHome: FC = ({ sample }) => {
defaultHref="/home/surveys"
subheader={subheader}
/>
-
+
);
};
diff --git a/src/Survey/List/OccurrenceHome.tsx b/src/Survey/List/OccurrenceHome.tsx
index f1936e23..5ead420b 100644
--- a/src/Survey/List/OccurrenceHome.tsx
+++ b/src/Survey/List/OccurrenceHome.tsx
@@ -1,21 +1,20 @@
-import { FC } from 'react';
-import { IonList } from '@ionic/react';
+import { observer } from 'mobx-react';
+import { useRouteMatch } from 'react-router';
import { Page, Header, Main } from '@flumens';
-import PhotoPicker from 'Survey/common/Components/PhotoPicker';
+import { IonList } from '@ionic/react';
+import Sample from 'models/sample';
+import MenuAttr from 'Survey/common/Components/MenuAttr';
import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
-import MenuTaxonItem from 'Survey/common/Components/MenuTaxonItem';
import MenuLocation from 'Survey/common/Components/MenuLocation';
-import MenuAttr from 'Survey/common/Components/MenuAttr';
+import MenuTaxonItem from 'Survey/common/Components/MenuTaxonItem';
+import PhotoPicker from 'Survey/common/Components/PhotoPicker';
import VerificationMessage from 'Survey/common/Components/VerificationMessage';
-import Sample from 'models/sample';
-import { observer } from 'mobx-react';
-import { useRouteMatch } from 'react-router';
type Props = {
subSample: Sample;
};
-const ListOccurrenceHome: FC = ({ subSample: sample }) => {
+const ListOccurrenceHome = ({ subSample: sample }: Props) => {
const [occ] = sample.occurrences;
const { url } = useRouteMatch();
@@ -26,17 +25,17 @@ const ListOccurrenceHome: FC = ({ subSample: sample }) => {
-
+
{isDisabled && (
-
+ {showChildSampleDistanceWarning && (
+
+ Some species are located far from the survey area. Please check
+ that this is correct.
+
+ )}
{!isDisabled && (
-
+
+
+
= ({ sample }) => {
+const Activity = ({ sample }: Props) => {
const { goBack } = useContext(NavContext);
const onSelect = async (activityID: string) => {
diff --git a/src/Survey/common/Components/AppHeaderBand/index.tsx b/src/Survey/common/Components/AppHeaderBand/index.tsx
deleted file mode 100644
index 1e05d990..00000000
--- a/src/Survey/common/Components/AppHeaderBand/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { FC } from 'react';
-import {
- IonToolbar,
- IonTitle,
- IonButtons,
- IonBackButton,
- isPlatform,
-} from '@ionic/react';
-import { Trans as T } from 'react-i18next';
-import clsx from 'clsx';
-import './styles.scss';
-
-type Props = {
- title?: string;
- activity?: boolean;
- training?: boolean;
-};
-
-const AppHeaderBand: FC = ({ title: titleProp, activity, training }) => {
- const title = !training ? titleProp : 'Training Mode';
-
- const isAndroid = isPlatform('android');
-
- return (
-
- {isAndroid && (
-
-
- {/* Placeholder only */}
-
-
- )}
-
-
-
- {title}
-
-
-
- {isAndroid && {/* Placeholder only */} }
-
- );
-};
-
-export default AppHeaderBand;
diff --git a/src/Survey/common/Components/AppHeaderBand/styles.scss b/src/Survey/common/Components/AppHeaderBand/styles.scss
deleted file mode 100644
index a90bec43..00000000
--- a/src/Survey/common/Components/AppHeaderBand/styles.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.app-header-band {
- --min-height: 30px;
- --background: rgba(var(--custom-color-complex-survey-rgb), 0.2);
-
- ion-back-button {
- visibility: hidden;
- }
-
- ion-title {
- color: var(--custom-color-complex-survey-dark) !important;
- font-weight: bold;
- font-size: 0.9em;
-
- &.md {
- margin-right: -150px;
- }
-
- span {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- }
-
- &.activity {
- --background: rgba(var(--ion-color-secondary-rgb), 0.2);
-
- ion-title {
- color: var(--ion-color-secondary-dark) !important;
- }
- }
-
- &.training {
- --background: var(--ion-color-dark);
- padding: 0;
-
- ion-title {
- color: white !important;
- }
- }
-}
diff --git a/src/Survey/common/Components/DisabledRecordMessage/index.tsx b/src/Survey/common/Components/DisabledRecordMessage/index.tsx
index 10243b01..cab3b000 100644
--- a/src/Survey/common/Components/DisabledRecordMessage/index.tsx
+++ b/src/Survey/common/Components/DisabledRecordMessage/index.tsx
@@ -1,37 +1,32 @@
-import { FC } from 'react';
-import Sample from 'models/sample';
-import { InfoMessage } from '@flumens';
-import { IonButton } from '@ionic/react';
import { Trans as T } from 'react-i18next';
+import { Button, InfoMessage } from '@flumens';
import config from 'common/config';
+import Sample from 'models/sample';
import './styles.scss';
interface Props {
sample: Sample;
}
-const DisabledRecordMessage: FC = ({ sample }) => {
+const DisabledRecordMessage = ({ sample }: Props) => {
const [occ] = sample.occurrences;
+ const hasOccId = parseInt(occ?.id || '', 10) > 0; // -1 in case couldn't retrieve
return (
-
+
This record has been submitted and cannot be edited within this App.
-
iRecord St Helena App website
-
+
);
};
diff --git a/src/Survey/common/Components/HeaderButton.tsx b/src/Survey/common/Components/HeaderButton.tsx
new file mode 100644
index 00000000..3905853a
--- /dev/null
+++ b/src/Survey/common/Components/HeaderButton.tsx
@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { observer } from 'mobx-react';
+import clsx from 'clsx';
+import { Button } from '@flumens';
+
+interface Props {
+ children: ReactNode;
+ onClick: any;
+ isInvalid?: boolean;
+ className?: string;
+ fill?: 'outline' | 'solid' | 'clear';
+ color?:
+ | 'primary'
+ | 'secondary'
+ | 'tertiary'
+ | 'danger'
+ | 'success'
+ | 'warning';
+ skipTranslation?: boolean;
+}
+
+const HeaderButton = ({
+ children,
+ onClick,
+ isInvalid,
+ fill,
+ color,
+ className,
+ skipTranslation,
+}: Props) => {
+ return (
+
+ );
+};
+
+export default observer(HeaderButton);
diff --git a/src/Survey/common/Components/IncrementalButton/AnimatedNumber/index.tsx b/src/Survey/common/Components/IncrementalButton/AnimatedNumber.tsx
similarity index 79%
rename from src/Survey/common/Components/IncrementalButton/AnimatedNumber/index.tsx
rename to src/Survey/common/Components/IncrementalButton/AnimatedNumber.tsx
index 278039b7..bb7fc3f6 100644
--- a/src/Survey/common/Components/IncrementalButton/AnimatedNumber/index.tsx
+++ b/src/Survey/common/Components/IncrementalButton/AnimatedNumber.tsx
@@ -1,12 +1,11 @@
-import { FC, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { CreateAnimation } from '@ionic/react';
-import './styles.scss';
type Props = {
value: number;
};
-const AnimatedNumber: FC = ({ value }: any) => {
+const AnimatedNumber = ({ value }: Props) => {
const [initialised, setInitialised] = useState(false);
const first = useRef();
@@ -32,7 +31,9 @@ const AnimatedNumber: FC = ({ value }: any) => {
{ property: 'background', fromValue: '#91a71c2b', toValue: '' },
]}
>
- {value}
+
+ {value}
+
);
};
diff --git a/src/Survey/common/Components/IncrementalButton/AnimatedNumber/styles.scss b/src/Survey/common/Components/IncrementalButton/AnimatedNumber/styles.scss
deleted file mode 100644
index 2a68e138..00000000
--- a/src/Survey/common/Components/IncrementalButton/AnimatedNumber/styles.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.animated-number {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.2em;
- color: #505f00;
-}
-
-.md .animated-number {
- font-size: 1.3em;
-}
diff --git a/src/Survey/common/Components/IncrementalButton/index.tsx b/src/Survey/common/Components/IncrementalButton/index.tsx
index a4a57677..a7891f6e 100644
--- a/src/Survey/common/Components/IncrementalButton/index.tsx
+++ b/src/Survey/common/Components/IncrementalButton/index.tsx
@@ -1,9 +1,7 @@
-import { FC } from 'react';
-import { isPlatform } from '@ionic/react';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import { LongPressButton } from '@flumens';
+import { Button } from '@flumens';
+import { isPlatform } from '@ionic/react';
import AnimatedNumber from './AnimatedNumber';
-import './styles.scss';
interface Props {
onClick: any;
@@ -12,12 +10,12 @@ interface Props {
disabled?: boolean;
}
-const IncrementalButton: FC = ({
+const IncrementalButton = ({
onClick: onClickProp,
onLongClick: onLongClickProp,
value,
disabled,
-}) => {
+}: Props) => {
const isNumber = Number.isFinite(value);
const onClick = () => {
@@ -51,16 +49,18 @@ const IncrementalButton: FC = ({
}
return (
-
- {valueItem}
+
+
);
};
diff --git a/src/Survey/common/Components/IncrementalButton/styles.scss b/src/Survey/common/Components/IncrementalButton/styles.scss
deleted file mode 100644
index f1757991..00000000
--- a/src/Survey/common/Components/IncrementalButton/styles.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.incremental-button {
- margin: 0;
- width: 62px;
- min-width: 62px;
- height: 100%;
- font-size: 1.3em;
- --padding-end: 0;
- --padding-start: 0;
- --border-radius: 0;
-
- .empty {
- font-size: 1.1em;
-
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- color: black;
- display: flex;
- background: #f8f8f8;
- white-space: normal;
- }
-
- &.md .empty {
- font-size: 1.3em;
- }
-
- div.label-divider {
- height: 75%;
- border-right: 1px solid rgba(0, 0, 0, 0.13);
- position: absolute;
- right: 0;
- }
-}
diff --git a/src/Survey/common/Components/MenuAttr/Lock/index.tsx b/src/Survey/common/Components/MenuAttr/Lock/index.tsx
index 176b80bd..6a2187d3 100644
--- a/src/Survey/common/Components/MenuAttr/Lock/index.tsx
+++ b/src/Survey/common/Components/MenuAttr/Lock/index.tsx
@@ -1,34 +1,34 @@
-import { FC, useRef } from 'react';
-import appModel from 'models/app';
-import {
- IonItemSliding,
- IonItemOptions,
- IonItemOption,
- IonIcon,
- isPlatform,
-} from '@ionic/react';
-import Sample from 'models/sample';
-import Occurrence from 'models/occurrence';
+import { useRef } from 'react';
import { observer } from 'mobx-react';
-import { useToast } from '@flumens';
+import clsx from 'clsx';
import {
lockOpenOutline,
lockClosedOutline,
chevronForwardOutline,
chevronDownOutline,
} from 'ionicons/icons';
-import clsx from 'clsx';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { useToast } from '@flumens';
+import {
+ IonItemSliding,
+ IonItemOptions,
+ IonItemOption,
+ IonIcon,
+ isPlatform,
+} from '@ionic/react';
+import appModel from 'models/app';
+import Occurrence from 'models/occurrence';
+import Sample from 'models/sample';
import MenuAttr from '..';
-
import './styles.scss';
type Props = {
model: Sample | Occurrence;
attr: string;
+ children: any;
};
-const Lock: FC = ({ model, attr, children }) => {
+const Lock = ({ model, attr, children }: Props) => {
const toast = useToast();
let value = (model.attrs as any)[attr];
@@ -120,8 +120,13 @@ export type MenuAttrWithLockProps = {
itemProps?: any;
};
-export const WithLock: FC = observer(
- ({ model, attr, itemProps: itemPropsProp, ...other }) => {
+export const WithLock = observer(
+ ({
+ model,
+ attr,
+ itemProps: itemPropsProp,
+ ...other
+ }: MenuAttrWithLockProps) => {
const isLocked = appModel.isAttrLocked(model, attr);
// eslint-disable-next-line no-unused-expressions
diff --git a/src/Survey/common/Components/MenuAttr/Lock/styles.scss b/src/Survey/common/Components/MenuAttr/Lock/styles.scss
index d0af0cfe..cb8ecce7 100644
--- a/src/Survey/common/Components/MenuAttr/Lock/styles.scss
+++ b/src/Survey/common/Components/MenuAttr/Lock/styles.scss
@@ -3,38 +3,34 @@
&.locked {
ion-item {
- --detail-icon-color: var(--custom-color-lock);
+ --detail-icon-color: var(--attr-lock-color);
--detail-icon-opacity: 0.55;
}
ion-datetime,
- ion-label[slot='end'] {
- color: var(--custom-color-lock);
+ *[slot='end'] {
+ color: var(--attr-lock-color);
}
- ion-toggle {
- --background-checked: var(--custom-color-lock-tint);
- &.md {
- --handle-background-checked: var(--custom-color-lock);
- }
+ .switch-input {
+ --form-value-color: var(--attr-lock-color-tint);
}
ion-accordion-group {
.accordion-collapsed > [slot='header'] .ion-accordion-toggle-icon,
.accordion-collapsing > [slot='header'] .ion-accordion-toggle-icon {
- color: var(--custom-color-lock);
-
opacity: 0.55;
+ color: var(--attr-lock-color);
}
.accordion-expanding > [slot='header'] .ion-accordion-toggle-icon {
transform: rotate(40deg);
- color: var(--custom-color-lock);
opacity: 0.55;
+ color: var(--attr-lock-color);
}
.accordion-expanded > [slot='header'] .ion-accordion-toggle-icon {
transform: rotate(0deg);
- color: var(--custom-color-lock);
opacity: 0.55;
+ color: var(--attr-lock-color);
}
ion-datetime {
diff --git a/src/Survey/common/Components/MenuAttr/index.tsx b/src/Survey/common/Components/MenuAttr/index.tsx
index 37cf26b9..1feca1f1 100644
--- a/src/Survey/common/Components/MenuAttr/index.tsx
+++ b/src/Survey/common/Components/MenuAttr/index.tsx
@@ -1,19 +1,19 @@
-import { FC, Fragment } from 'react';
+import { Fragment } from 'react';
+import { observer } from 'mobx-react';
+import clsx from 'clsx';
import { useRouteMatch } from 'react-router';
-import { IonItem } from '@ionic/react';
import {
Attr,
MenuAttrItem,
- MenuAttrToggle,
- date as dateHelp,
MenuAttrItemProps,
AttrProps,
+ Toggle,
+ getRelativeDate,
} from '@flumens';
-import Sample from 'models/sample';
+import { IonIcon, IonItem } from '@ionic/react';
import Occurrence from 'models/occurrence';
-import { observer } from 'mobx-react';
-import clsx from 'clsx';
-import { WithLock, LockConfig, MenuAttrWithLockProps } from './Lock';
+import Sample from 'models/sample';
+import { WithLock, LockConfig } from './Lock';
import './styles.scss';
function parseValue(value: any, parse: any, model: Sample | Occurrence) {
@@ -25,7 +25,7 @@ function parseValue(value: any, parse: any, model: Sample | Occurrence) {
if (!value) return null;
if (parse === 'date') {
- return dateHelp.print(value);
+ return getRelativeDate(value);
}
if (value instanceof Array) {
@@ -57,13 +57,7 @@ export type Config = Omit &
skipValueTranslation?: boolean;
};
-const MenuAttr: FC & { WithLock: FC } = ({
- attr,
- model,
- onChange,
- itemProps,
- className,
-}) => {
+const MenuAttr = ({ attr, model, onChange, itemProps, className }: Props) => {
const match = useRouteMatch();
const survey = model.getSurvey();
@@ -108,14 +102,17 @@ const MenuAttr: FC & { WithLock: FC } = ({
delete itemProps?.routerLink;
return (
-
+
);
}
diff --git a/src/Survey/common/Components/MenuAttr/styles.scss b/src/Survey/common/Components/MenuAttr/styles.scss
index c9c5b4f6..6c0d72a2 100644
--- a/src/Survey/common/Components/MenuAttr/styles.scss
+++ b/src/Survey/common/Components/MenuAttr/styles.scss
@@ -8,12 +8,14 @@
.ion-accordion-toggle-icon {
display: block;
- margin: 0;
- font-size: 20px;
opacity: 0.5;
+ margin-right: -6px;
+ margin-left: 10px;
+ font-size: 20px;
&.ios {
opacity: 0.3;
+ margin-left: 0;
}
}
diff --git a/src/Survey/common/Components/MenuDynamicAttrs/index.tsx b/src/Survey/common/Components/MenuDynamicAttrs/index.tsx
index 097e9368..d36d5337 100644
--- a/src/Survey/common/Components/MenuDynamicAttrs/index.tsx
+++ b/src/Survey/common/Components/MenuDynamicAttrs/index.tsx
@@ -1,11 +1,10 @@
-import { FC } from 'react';
import { observer } from 'mobx-react';
+import { useRouteMatch } from 'react-router';
import Occurrence from 'models/occurrence';
import Sample from 'models/sample';
import MenuAttr from 'Survey/common/Components/MenuAttr';
import MenuLocation from 'Survey/common/Components/MenuLocation';
import MenuTaxonItem from 'Survey/common/Components/MenuTaxonItem';
-import { useRouteMatch } from 'react-router';
import './styles.scss';
type Model = Sample | Occurrence;
@@ -16,11 +15,11 @@ type Props = {
skipLocks?: boolean;
};
-const MenuDynamicAttrs: FC = ({
+const MenuDynamicAttrs = ({
model,
surveyConfig: surveyConfigProp,
skipLocks,
-}) => {
+}: Props) => {
const { url } = useRouteMatch();
const surveyConfig = surveyConfigProp || model.getSurvey();
diff --git a/src/Survey/common/Components/MenuDynamicAttrs/styles.scss b/src/Survey/common/Components/MenuDynamicAttrs/styles.scss
index eeabd9ec..9c69fc0a 100644
--- a/src/Survey/common/Components/MenuDynamicAttrs/styles.scss
+++ b/src/Survey/common/Components/MenuDynamicAttrs/styles.scss
@@ -1,9 +1,9 @@
.attributes-list {
- background-color: transparent;
margin-top: 2px;
+ border-bottom: none;
+ background-color: transparent;
// height: calc(100vh - 80px - 220px - 15px - 36px);
overflow: auto;
- border-bottom: none;
ion-item {
--background: var(--ion-color-light);
diff --git a/src/Survey/common/Components/MenuLocation/GridRefValue/index.tsx b/src/Survey/common/Components/MenuLocation/GridRefValue/index.tsx
index 933f04ff..76859ffd 100644
--- a/src/Survey/common/Components/MenuLocation/GridRefValue/index.tsx
+++ b/src/Survey/common/Components/MenuLocation/GridRefValue/index.tsx
@@ -1,9 +1,7 @@
-import { FC } from 'react';
-import { IonSpinner } from '@ionic/react';
import { observer } from 'mobx-react';
-import Sample from 'models/sample';
import { prettyPrintLocation } from '@flumens';
-
+import { IonSpinner } from '@ionic/react';
+import Sample from 'models/sample';
import './styles.scss';
function getValue(sample: Sample) {
@@ -18,7 +16,7 @@ type Props = {
sample: Sample;
};
-const GridRefValue: FC = ({ sample }) => {
+const GridRefValue = ({ sample }: Props) => {
const value = getValue(sample);
if (!value) return null;
diff --git a/src/Survey/common/Components/MenuLocation/GridRefValue/styles.scss b/src/Survey/common/Components/MenuLocation/GridRefValue/styles.scss
index e4da1d85..dcbac6f0 100644
--- a/src/Survey/common/Components/MenuLocation/GridRefValue/styles.scss
+++ b/src/Survey/common/Components/MenuLocation/GridRefValue/styles.scss
@@ -1,8 +1,8 @@
.gridref-label {
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 100%;
margin-left: 0;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
ion-spinner {
width: 15px;
diff --git a/src/Survey/common/Components/MenuLocation/Lock/index.tsx b/src/Survey/common/Components/MenuLocation/Lock/index.tsx
index 7734e951..d633a6d9 100644
--- a/src/Survey/common/Components/MenuLocation/Lock/index.tsx
+++ b/src/Survey/common/Components/MenuLocation/Lock/index.tsx
@@ -1,5 +1,13 @@
-import { FC, useRef } from 'react';
+import { useRef } from 'react';
import { observer } from 'mobx-react';
+import clsx from 'clsx';
+import {
+ lockOpenOutline,
+ lockClosedOutline,
+ chevronForwardOutline,
+} from 'ionicons/icons';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { useToast, useAlert } from '@flumens';
import {
IonLabel,
IonIcon,
@@ -8,16 +16,8 @@ import {
IonItemOptions,
isPlatform,
} from '@ionic/react';
-import Sample from 'models/sample';
import appModel from 'models/app';
-import { useToast, useAlert } from '@flumens';
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import {
- lockOpenOutline,
- lockClosedOutline,
- chevronForwardOutline,
-} from 'ionicons/icons';
-import clsx from 'clsx';
+import Sample from 'models/sample';
import MenuLocation from '..';
import './styles.scss';
@@ -27,7 +27,7 @@ export interface Props {
label?: string;
}
-const Lock: FC = ({ sample, skipLocks, label }) => {
+const Lock = ({ sample, skipLocks, label }: Props) => {
const sliderRef = useRef();
const toast = useToast();
const alert = useAlert();
diff --git a/src/Survey/common/Components/MenuLocation/Lock/styles.scss b/src/Survey/common/Components/MenuLocation/Lock/styles.scss
index ff740b71..68e43ced 100644
--- a/src/Survey/common/Components/MenuLocation/Lock/styles.scss
+++ b/src/Survey/common/Components/MenuLocation/Lock/styles.scss
@@ -1,6 +1,6 @@
.menu-attr-item-location-with-lock {
ion-item.locked {
- --detail-icon-color: var(--custom-color-lock);
+ --detail-icon-color: var(--attr-lock-color);
--detail-icon-opacity: 0.55;
}
diff --git a/src/Survey/common/Components/MenuLocation/index.tsx b/src/Survey/common/Components/MenuLocation/index.tsx
index 6aae3c6f..69ded5f1 100644
--- a/src/Survey/common/Components/MenuLocation/index.tsx
+++ b/src/Survey/common/Components/MenuLocation/index.tsx
@@ -1,14 +1,13 @@
-import { FC } from 'react';
-import Sample from 'models/sample';
import clsx from 'clsx';
-import { IonItem, IonLabel, IonIcon, IonBadge } from '@ionic/react';
import { locationOutline } from 'ionicons/icons';
import { Trans as T } from 'react-i18next';
import { useRouteMatch } from 'react-router';
+import { IonItem, IonIcon, IonLabel } from '@ionic/react';
+import { Badge } from 'common/flumens';
+import Sample from 'models/sample';
import StringHelp from 'helpers/string';
import GridRefValue from './GridRefValue';
-import Lock, { Props as MenuLocationWithLockProps } from './Lock';
-import './styles.scss';
+import Lock from './Lock';
interface Props {
sample: Sample;
@@ -18,14 +17,13 @@ interface Props {
label?: string;
}
-const MenuLocation: FC & { WithLock: FC } = ({
+const MenuLocation = ({
sample,
className,
skipName,
label = 'Location',
-
...otherProps
-}) => {
+}: Props) => {
const { url } = useRouteMatch();
const { location } = sample.attrs;
@@ -34,23 +32,19 @@ const MenuLocation: FC & { WithLock: FC } = ({
const locationName = location.name;
const locationItem = hasLocation ? (
-
+
- No location
-
+ No location
);
const locationNameItem = locationName ? (
-
- {StringHelp.limit(locationName, 30)}
-
+
- No site name
-
+ No site name
);
const isDisabled = sample.isDisabled();
@@ -59,22 +53,19 @@ const MenuLocation: FC & { WithLock: FC } = ({
+
{label}
-
+
);
};
diff --git a/src/Survey/common/Components/MenuLocation/styles.scss b/src/Survey/common/Components/MenuLocation/styles.scss
deleted file mode 100644
index ccaa678f..00000000
--- a/src/Survey/common/Components/MenuLocation/styles.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.menu-attr-item-location {
- --border-style: solid !important;
-
- .location-label {
- max-width: 80px;
- }
-
- ion-label[slot='end'] {
- text-align: right;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-
- ion-badge[color='warning'] {
- font-size: 1em;
- font-weight: normal;
- width: -webkit-fit-content;
- width: fit-content;
- background-color: rgba(var(--ion-color-warning-rgb), 0.15);
- color: var(--ion-color-warning-dark);
-
- // only to the name
- &:nth-child(2) {
- margin-top: 5px;
- }
- }
- }
-}
diff --git a/src/Survey/common/Components/MenuTaxonItem/index.tsx b/src/Survey/common/Components/MenuTaxonItem.tsx
similarity index 55%
rename from src/Survey/common/Components/MenuTaxonItem/index.tsx
rename to src/Survey/common/Components/MenuTaxonItem.tsx
index c8d01369..13660819 100644
--- a/src/Survey/common/Components/MenuTaxonItem/index.tsx
+++ b/src/Survey/common/Components/MenuTaxonItem.tsx
@@ -1,17 +1,14 @@
-import { FC } from 'react';
-import { IonItem, IonLabel, IonBadge } from '@ionic/react';
-import { Trans as T } from 'react-i18next';
-import Occurrence from 'models/occurrence';
-import { useRouteMatch } from 'react-router';
-import clsx from 'clsx';
import { observer } from 'mobx-react';
-import './styles.scss';
+import { useRouteMatch } from 'react-router';
+import { IonItem } from '@ionic/react';
+import { Badge } from 'common/flumens';
+import Occurrence from 'models/occurrence';
interface Props {
occ: Occurrence;
}
-const MenuTaxonItem: FC = ({ occ }) => {
+const MenuTaxonItem = ({ occ }: Props) => {
const isDisabled = occ.isDisabled();
const { url } = useRouteMatch();
@@ -31,21 +28,18 @@ const MenuTaxonItem: FC = ({ occ }) => {
-
- {empty && (
-
- Species missing
-
- )}
- {commonName && {commonName} }
-
+
);
};
diff --git a/src/Survey/common/Components/MenuTaxonItem/styles.scss b/src/Survey/common/Components/MenuTaxonItem/styles.scss
deleted file mode 100644
index 569aecaf..00000000
--- a/src/Survey/common/Components/MenuTaxonItem/styles.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// taxon attributes
-.menu-attr-item-taxon ion-label[slot='end'] {
- max-width: 100% !important;
-
- ion-badge[color='warning'] {
- margin-top: 5px;
- font-size: 1em;
- font-weight: normal;
- width: -webkit-fit-content;
- width: fit-content;
- background-color: rgba(var(--ion-color-warning-rgb), 0.15);
- color: var(--ion-color-warning-dark);
- }
-
- ion-label:last-child {
- // extra padding for italics
- padding-right: 4px;
- }
-}
diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/index.tsx b/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/index.tsx
new file mode 100644
index 00000000..76e9ec57
--- /dev/null
+++ b/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/index.tsx
@@ -0,0 +1,22 @@
+import { starOutline } from 'ionicons/icons';
+import { MapContainer } from '@flumens';
+import { IonIcon } from '@ionic/react';
+import './styles.scss';
+
+type Props = { onClick: any };
+
+const PastLocationsControl = ({ onClick }: Props) => {
+ return (
+
+
+
+ );
+};
+
+export default PastLocationsControl;
diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/styles.scss b/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/styles.scss
new file mode 100644
index 00000000..b63c5900
--- /dev/null
+++ b/src/Survey/common/Components/ModelLocation/MapboxMap/PastLocationsControl/styles.scss
@@ -0,0 +1,25 @@
+.map-control-past-locations {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition-duration: 0.4s;
+ margin: 15px 10px;
+ box-shadow: 0 0 17px #0000003b, 0 0 7px #00000063;
+ border-radius: 50%;
+ background: white;
+ padding: 3px;
+ width: 41px;
+ height: 41px;
+
+ &:active {
+ transform: scale(90%);
+ background: #c7c7c7;
+ }
+
+ ion-icon {
+ margin: 4px;
+ width: 100%;
+ height: 100%;
+ --ionicon-stroke-width: 26px;
+ }
+}
diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/index.tsx b/src/Survey/common/Components/ModelLocation/MapboxMap/index.tsx
new file mode 100644
index 00000000..a7ab9761
--- /dev/null
+++ b/src/Survey/common/Components/ModelLocation/MapboxMap/index.tsx
@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { MapRef, ViewState } from 'react-map-gl';
+import {
+ isValidLocation,
+ mapMetresToZoom,
+ MapContainer,
+ mapFlyToLocation,
+ Location,
+} from '@flumens';
+import config from 'common/config';
+import PastLocationsControl from './PastLocationsControl';
+
+const getInitialView = (
+ location: Location,
+ parentLocation: Location
+): Partial => {
+ if (isValidLocation(location))
+ return {
+ zoom: mapMetresToZoom(location.accuracy) || 15,
+ latitude: location.latitude,
+ longitude: location.longitude,
+ };
+
+ if (isValidLocation(parentLocation))
+ return {
+ zoom: mapMetresToZoom(parentLocation.accuracy) || 13,
+ latitude: parentLocation.latitude,
+ longitude: parentLocation.longitude,
+ };
+
+ if (location.geocoded) {
+ return {
+ zoom: 10,
+ longitude: location.geocoded.center[0],
+ latitude: location.geocoded.center[1],
+ };
+ }
+
+ return config.map.defaultCenter;
+};
+
+type Props = {
+ location: any;
+ parentLocation: any;
+ childLocations: any[];
+ isDisabled: any;
+ isLocating: any;
+ onMapClick: any;
+ onGPSClick: any;
+ currentStyle: 'satellite' | 'street';
+ onLayersClick: any;
+ onPastLocationsClick: any;
+};
+
+const MapboxContainer = ({
+ location,
+ parentLocation,
+ childLocations,
+ isDisabled,
+ onMapClick,
+ currentStyle,
+ onGPSClick,
+ onLayersClick,
+ onPastLocationsClick,
+ isLocating,
+}: Props) => {
+ const [mapRef, setMapRef] = useState();
+ const flyToLocation = () => {
+ mapFlyToLocation(
+ mapRef,
+ isValidLocation(location) ? location : parentLocation || location // for location.geocoded
+ );
+ };
+ useEffect(flyToLocation, [
+ mapRef,
+ location?.latitude,
+ location?.longitude,
+ location?.geocoded,
+ ]);
+
+ const style: any = {
+ satellite: {
+ maxZoom: 19,
+ mapStyle: `https://api.maptiler.com/maps/satellite/style.json?key=${config.map.mapboxApiKey}`,
+ },
+
+ street: {
+ maxZoom: 19,
+ mapStyle: `https://api.maptiler.com/maps/openstreetmap/style.json?key=${config.map.mapboxApiKey}`,
+ },
+ };
+
+ const transformRequest = (url: string) =>
+ url.startsWith('https://api.os.uk') ? { url: `${url}&srs=3857` } : { url };
+
+ const childLocationMarkers = childLocations.map((loc: Location) => (
+
+ {!isDisabled && onPastLocationsClick && (
+
+ );
+};
+
+export default observer(MapboxContainer);
diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/satelliteMapIcon.png b/src/Survey/common/Components/ModelLocation/MapboxMap/satelliteMapIcon.png
new file mode 100644
index 00000000..0d26db75
Binary files /dev/null and b/src/Survey/common/Components/ModelLocation/MapboxMap/satelliteMapIcon.png differ
diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/standardMapIcon.png b/src/Survey/common/Components/ModelLocation/MapboxMap/standardMapIcon.png
new file mode 100644
index 00000000..8db05238
Binary files /dev/null and b/src/Survey/common/Components/ModelLocation/MapboxMap/standardMapIcon.png differ
diff --git a/src/Survey/common/Components/ModelLocation/PastLocations/index.tsx b/src/Survey/common/Components/ModelLocation/PastLocations/index.tsx
new file mode 100644
index 00000000..2c087183
--- /dev/null
+++ b/src/Survey/common/Components/ModelLocation/PastLocations/index.tsx
@@ -0,0 +1,70 @@
+import { closeOutline } from 'ionicons/icons';
+import { Trans as T } from 'react-i18next';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import {
+ IonModal,
+ IonHeader,
+ IonToolbar,
+ IonContent,
+ isPlatform,
+ IonButton,
+ IonButtons,
+ IonIcon,
+ IonTitle,
+} from '@ionic/react';
+import Sample from 'models/sample';
+import PastLocationsList from 'Components/PastLocationsList';
+import './styles.scss';
+
+const SNAP_POSITIONS = [0, 0.35, 0.6, 1];
+const DEFAULT_SNAP_POSITION = 0.35;
+
+type Props = {
+ model: Sample;
+ isOpen: boolean;
+ onClose: any;
+};
+
+const PastLocations = ({ model, isOpen, onClose }: Props) => {
+ const onSelectPastLocation = (location: any) => {
+ if (model.isGPSRunning()) model.stopGPS();
+ onClose();
+
+ isPlatform('hybrid') && Haptics.impact({ style: ImpactStyle.Light });
+
+ // eslint-disable-next-line no-param-reassign
+ Object.assign(model.attrs.location, location);
+ model.save();
+ };
+
+ return (
+
+
+
+
+ Past Locations
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PastLocations;
diff --git a/src/Survey/common/Components/ModelLocation/PastLocations/styles.scss b/src/Survey/common/Components/ModelLocation/PastLocations/styles.scss
new file mode 100644
index 00000000..e390bf3f
--- /dev/null
+++ b/src/Survey/common/Components/ModelLocation/PastLocations/styles.scss
@@ -0,0 +1,35 @@
+#bottom-sheet-tracks {
+ ion-header.md {
+ box-shadow: none;
+ border-width: 0 0 0.55px;
+
+ ion-title {
+ padding-inline-start: 16px;
+ font-weight: bolder;
+ font-size: 0.9em;
+ }
+ }
+
+ ion-toolbar.ios {
+ --background: var(--ion-page-background);
+ --min-height: 35px;
+ padding-left: 16px;
+
+ ion-title {
+ padding-inline: 0;
+ text-align: left;
+ }
+
+ ion-button {
+ --padding-end: 0;
+ }
+ }
+
+ .info-background-message {
+ max-width: 300px;
+
+ span {
+ padding: 20px 10px;
+ }
+ }
+}
diff --git a/src/Survey/common/Components/ModelLocation/index.tsx b/src/Survey/common/Components/ModelLocation/index.tsx
index 4c41a4e7..15e006a9 100644
--- a/src/Survey/common/Components/ModelLocation/index.tsx
+++ b/src/Survey/common/Components/ModelLocation/index.tsx
@@ -1,168 +1,209 @@
-import { FC, useState, useRef } from 'react';
-import {
- IonIcon,
- IonButton,
- IonModal,
- IonContent,
- useIonViewDidEnter,
- useIonViewWillLeave,
- IonHeader,
- IonToolbar,
- isPlatform,
-} from '@ionic/react';
+/* eslint-disable no-restricted-syntax */
+import { useState } from 'react';
+import { observer } from 'mobx-react';
+import { t } from 'i18next';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
import {
- ModelLocation as ModelLocationOrig,
+ MapHeader,
+ MapSettingsPanel,
+ Page,
+ Main,
+ RadioInput,
+ textToLocation,
+ mapEventToLocation,
+ toggleGPS,
+ isValidLocation,
useToast,
- HandledError,
+ Location,
+ RadioOption,
} from '@flumens';
-import Sample from 'models/sample';
-import appModel from 'models/app';
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import { starOutline } from 'ionicons/icons';
-import L from 'leaflet';
-import config from 'common/config';
-import {
- GPS_DISABLED_ERROR_MESSAGE,
- DEFAULT_CENTER,
- DEFAULT_ZOOM,
-} from 'helpers/GPS';
+import { isPlatform } from '@ionic/core';
+import { useIonViewWillLeave } from '@ionic/react';
import locationNameIcon from 'common/images/location-name.svg';
-import PastLocationsList from 'Components/PastLocationsList';
+import appModel from 'models/app';
+import Sample, { getEmptyLocation } from 'models/sample';
+import { hasGPSPermissions } from 'helpers/GPS';
+import MapboxMap from './MapboxMap';
+import satelliteMapIcon from './MapboxMap/satelliteMapIcon.png';
+import standardMapIcon from './MapboxMap/standardMapIcon.png';
+import PastLocationsPanel from './PastLocations';
import './styles.scss';
-type Props = {
- sample: Sample;
- subSample?: Sample;
- locationNameProps?: any;
-};
-
-const SNAP_POSITIONS = [0, 0.3, 0.5, 1];
-const DEFAULT_SNAP_POSITION = 0.3;
-
-const ModelLocation: FC = ({ sample, subSample, ...otherProps }) => {
- const toast = useToast();
- const [showPastLocations, setShowPastLocations] = useState(false);
- const model = subSample || sample;
+export const setModelLocation = async (
+ model: Sample,
+ newLocation: Location
+) => {
+ if (model.isGPSRunning()) model.stopGPS(); // we don't need the GPS running and overwriting the selected location
+
+ const isFromMap = newLocation?.source === 'map';
+ isPlatform('hybrid') &&
+ isFromMap &&
+ Haptics.impact({ style: ImpactStyle.Light });
+
+ Object.assign(
+ model.attrs.location, // carry over name, geocoded etc
+ getEmptyLocation(), // overwrite core location values
+ newLocation
+ );
- const buttonRef = useRef(null);
- const fixFavBtnClickMapPropagation = () =>
- buttonRef.current && L.DomEvent.disableClickPropagation(buttonRef.current);
- useIonViewDidEnter(fixFavBtnClickMapPropagation);
+ model.save();
- const fixOpenModalWhenLeavingPage = () => setShowPastLocations(false);
- useIonViewWillLeave(fixOpenModalWhenLeavingPage);
+ if (!isValidLocation(newLocation)) return;
+ appModel.setLocation(model.attrs.location);
+};
- const setLocation = async (loc: any, reset = false) => {
- let location = loc;
+type Styles = 'satellite' | 'street';
+export const useMapStyles = (): [Styles, any, RadioOption[]] => {
+ const layers: RadioOption[] = [
+ {
+ value: 'Map Type',
+ isPlaceholder: true,
+ },
+ {
+ label: 'Satellite',
+ value: 'satellite',
+ prefix: 
,
+ },
+ {
+ label: 'Street',
+ value: 'street',
+ prefix: 
,
+ },
+ ];
+
+ const [currentLayer, setCurrentLayer] = useState('satellite');
+
+ return [currentLayer, setCurrentLayer, layers];
+};
- if (model.isGPSRunning()) model.stopGPS(); // we don't need the GPS running and overwriting the selected location
+type Props = {
+ subSample?: any;
+ sample: any;
+ setLocation?: any;
+ skipLocationName?: boolean;
+ skipPastLocations?: boolean;
+};
- if (!reset) {
- // extend old location to preserve its previous attributes like name or id
- const oldLocation = model.attrs.location || {};
- location = { ...oldLocation, ...location };
+const ModelLocationMap = ({
+ subSample,
+ sample,
+ setLocation = setModelLocation,
+ skipLocationName,
+ skipPastLocations,
+}: Props) => {
+ const model = subSample || sample;
+ const isDisabled = model.isDisabled();
+ const location = model.attrs.location || {};
+ const parentLocation = model.parent?.attrs.location;
+
+ const onManuallyTypedLocationChange = (e: any) => {
+ const value = e?.target?.value;
+ if (!value) {
+ setLocation(model, {});
+ return;
}
- isPlatform('hybrid') && Haptics.impact({ style: ImpactStyle.Light });
+ const newLocation = textToLocation(value);
+ if (!isValidLocation(newLocation)) return;
+
+ setLocation(model, newLocation);
+ };
- // eslint-disable-next-line no-param-reassign
- model.attrs.location = location;
+ const onLocationNameChange = ({ name, geocoded }: any) => {
+ model.attrs.location = { ...model.attrs.location, name, geocoded };
+ };
- if (location.latitude) appModel.setLocation(location);
+ const [showSettings, setShowSettings] = useState(false);
+ const onCloseSettings = () => setShowSettings(false);
+ const onLayersClick = () => setShowSettings(!showSettings);
- const onError = (error: any) => console.log(error);
- return model.save().catch(onError);
+ const [currentStyle, setCurrentStyle, styles] = useMapStyles();
+ const onStyleChange = (newLayer: string) => {
+ setCurrentStyle(newLayer);
+ setShowSettings(false);
};
- const onSelectPastLoaction = (location: any) => {
- if (sample.isGPSRunning()) sample.stopGPS();
- setShowPastLocations(false);
+ const onMapClick = (e: any) => setLocation(model, mapEventToLocation(e));
- isPlatform('hybrid') && Haptics.impact({ style: ImpactStyle.Light });
+ const toast = useToast();
+ const onGPSClick = async () => {
+ const hasPermissions = await hasGPSPermissions();
+ if (!hasPermissions) {
+ toast.warn('Location services are not enabled');
+ return;
+ }
- // eslint-disable-next-line no-param-reassign
- model.attrs.location = location;
- model.save();
+ toggleGPS(model);
};
- async function onGPSClick() {
- try {
- await ModelLocationOrig.utils.onGPSClick(model);
- } catch (error: any) {
- if (error.message === GPS_DISABLED_ERROR_MESSAGE) {
- toast.error(new HandledError(GPS_DISABLED_ERROR_MESSAGE));
- return;
- }
+ const [showPastLocations, setShowPastLocations] = useState(false);
+ const onPastLocationsClick = () => setShowPastLocations(!showPastLocations);
- toast.error(error);
- }
- }
+ const fixOpenPastLocationsOnPageLeave = () => setShowPastLocations(false);
+ useIonViewWillLeave(fixOpenPastLocationsOnPageLeave);
+
+ const fixOpenSettingsOnPageLeave = () => setShowSettings(false);
+ useIonViewWillLeave(fixOpenSettingsOnPageLeave);
+
+ const getSampleLocation = (smp: Sample) => smp.attrs.location;
+ const childLocations =
+ model?.samples?.map(getSampleLocation).filter(isValidLocation) || [];
return (
- <>
-
-
+
+
+
+
+
+
+
+ {
- setShowPastLocations(false);
- }}
- >
-
-
-
-
-
-
-
+ model={model}
+ onClose={() => setShowPastLocations(false)}
+ />
+
+
);
};
-(ModelLocation as any).WithoutName = (props: Props) => (
- = ({ suggestion, onClick }) => {
+const SpeciesTile = ({ suggestion, onClick }: SpeciesTileProps) => {
const { common_names, scientific_name, probability } = suggestion;
const commonName = common_names[0];
@@ -47,11 +46,7 @@ const SpeciesTile: FC = ({ suggestion, onClick }) => {
);
};
-const FooterMessage: FC = ({
- image,
- identifyImage,
- onSpeciesSelect,
-}) => {
+const FooterMessage = ({ image, identifyImage, onSpeciesSelect }: Props) => {
const identifierWasNotUsed = !image.attrs?.species;
const speciesList = image.attrs?.species?.suggestions;
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/SpeciesSuggestions/styles.scss b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/SpeciesSuggestions/styles.scss
index fb910b77..44a7e5d5 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/SpeciesSuggestions/styles.scss
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/SpeciesSuggestions/styles.scss
@@ -1,17 +1,17 @@
.gallery-modal ion-content .swiper .footer-container {
h3 {
- font-size: 1em;
- font-weight: 600;
+ margin: 8px 0 13px 5px;
color: #fff;
+ font-weight: 600;
+ font-size: 1em;
text-align: left;
- margin: 8px 0 13px 5px;
}
.id-loading {
display: flex;
align-self: center;
- color: white;
margin: 30px auto;
+ color: white;
font-size: 0.8em;
ion-spinner {
@@ -22,34 +22,34 @@
}
.re-identify-button {
- width: fit-content;
margin: 10px auto 0;
+ width: fit-content;
}
.species-array-wrapper {
+ display: flex;
margin: 0;
width: 100%;
height: 100%;
overflow: auto;
- display: flex;
.species-array {
- width: 100%;
- overflow: auto;
display: flex;
flex: 1;
+ width: 100%;
height: 70%;
+ overflow: auto;
.species-tile {
- padding: 10px 8px 0px 0;
- height: 100px;
display: flex;
- justify-content: center;
position: relative;
- max-width: 90%;
+ justify-content: center;
border-radius: 10px;
- overflow: hidden;
+ padding: 10px 8px 0px 0;
min-width: 31%;
+ max-width: 90%;
+ height: 100px;
+ overflow: hidden;
&:first-of-type {
margin-left: 10px;
@@ -60,47 +60,49 @@
}
.score {
- width: 2.4em;
- height: 2.4em;
- background: #fff;
+ display: flex;
position: absolute;
- z-index: 99;
- border-radius: 50%;
top: 1px;
right: 1px;
- display: flex;
justify-content: center;
align-items: center;
+ z-index: 99;
+ border-radius: 50%;
+ background: #fff;
+ width: 2.4em;
+ height: 2.4em;
&.success {
- color: var(--ion-color-primary);
border: 2px solid var(--ion-color-primary);
+ color: var(--ion-color-primary);
}
&.warning {
- color: var(--ion-color-warning);
border: 2px solid var(--ion-color-warning);
+ color: var(--ion-color-warning);
}
&.danger {
- color: var(--ion-color-danger);
border: 2px solid var(--ion-color-danger);
+ color: var(--ion-color-danger);
}
ion-label {
- font-size: 0.7em;
font-weight: 600;
+ font-size: 0.7em;
}
}
.container {
- position: relative;
- background: white;
display: flex;
+ position: relative;
flex-direction: column;
+ align-items: center;
border-radius: 10px;
+ background: white;
width: 100%;
- align-items: center;
+
+ overflow: hidden;
ion-icon {
// TODO: remove once real pics are available
@@ -115,20 +117,20 @@
}
ion-label {
- padding: 0 2px;
- flex: 1;
- text-align: center;
- z-index: 10;
- color: #121414;
- font-weight: 500;
- max-width: 95%;
display: flex;
+ flex: 1;
flex-wrap: wrap;
justify-content: center;
align-items: center;
+ z-index: 10;
+ padding: 0 2px;
+ max-width: 95%;
overflow: hidden;
- font-size: 0.9em;
+ color: #121414;
+ font-weight: 500;
font-weight: bolder;
+ font-size: 0.9em;
+ text-align: center;
&.scientific {
font-style: italic;
@@ -136,20 +138,18 @@
}
}
- overflow: hidden;
-
.species-thumbnail {
z-index: 10;
- padding: -20px 0 0 0;
margin-top: -5px;
margin: -5px -3% -10%;
+ padding: -20px 0 0 0;
max-height: 90%;
}
img.species-thumbnail-background {
position: absolute;
- height: 100%;
- width: 100%;
top: 0;
+ width: 100%;
+ height: 100%;
}
div.species-thumbnail-background {
position: absolute;
@@ -159,24 +159,24 @@
img {
position: absolute;
- filter: blur(30px);
transform: scale(2.5);
- height: 100%;
+ filter: blur(30px);
width: 100%;
+ height: 100%;
}
}
.info-box {
position: absolute;
- right: 0;
top: 0;
- height: 100%;
- width: 100%;
- background: #fffffff0;
- border-radius: 50%;
+ right: 0;
transform: translate(50%, -50%);
- box-shadow: 0 0 15px 5px #e6e6e6;
z-index: 100;
+ box-shadow: 0 0 15px 5px #e6e6e6;
+ border-radius: 50%;
+ background: #fffffff0;
+ width: 100%;
+ height: 100%;
ion-icon {
width: 30%;
@@ -194,14 +194,14 @@
}
.img-placeholder {
- background: #262626e3;
- border-radius: 11px;
- overflow: hidden;
- width: 100%;
- position: relative;
display: flex;
+ position: relative;
align-self: stretch;
margin: 10px 5px 0px 5px;
+ border-radius: 11px;
+ background: #262626e3;
+ width: 100%;
+ overflow: hidden;
}
}
}
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/index.tsx b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/index.tsx
index 96c7a56d..dd461fef 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/index.tsx
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/index.tsx
@@ -1,9 +1,8 @@
-import { FC } from 'react';
-import { IonButton, IonIcon } from '@ionic/react';
-import { cropOutline } from 'ionicons/icons';
-import Media from 'models/media';
import { observer } from 'mobx-react';
+import { cropOutline } from 'ionicons/icons';
import { Trans as T } from 'react-i18next';
+import { IonButton, IonIcon } from '@ionic/react';
+import Media from 'models/media';
import SpeciesSuggestions from './SpeciesSuggestions';
import './styles.scss';
@@ -14,12 +13,12 @@ interface Props {
onSpeciesSelect: any;
}
-const ImageFooter: FC = ({
+const ImageFooter = ({
onCrop,
image,
identifyImage,
onSpeciesSelect,
-}) => {
+}: Props) => {
const onCropWrap = () => onCrop(image);
const allowToEdit = !image.parent?.isDisabled() && !image.isIdentifying();
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/styles.scss b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/styles.scss
index b70f6561..4af70294 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/styles.scss
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageFooter/styles.scss
@@ -1,15 +1,15 @@
.gallery-modal .footer-container {
display: flex;
- flex-direction: column;
- width: 100%;
position: fixed;
bottom: 0;
+ flex-direction: column;
background: #131313ed !important;
padding-bottom: 26px;
+ width: 100%;
.crop-button {
align-self: end;
- height: fit-content;
margin-top: 20px;
+ height: fit-content;
}
}
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/index.tsx b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/index.tsx
index 8b23465a..cbffb545 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/index.tsx
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/index.tsx
@@ -1,17 +1,16 @@
/* eslint-disable camelcase */
-import { FC } from 'react';
-import Media from 'models/media';
-import { IonLabel, IonNote, isPlatform } from '@ionic/react';
-import { Trans as T } from 'react-i18next';
import { observer } from 'mobx-react';
import clsx from 'clsx';
+import { Trans as T } from 'react-i18next';
+import { IonLabel, IonNote, isPlatform } from '@ionic/react';
+import Media from 'models/media';
import './styles.scss';
type Props = {
image: Media;
};
-const ImageTitle: FC = ({ image }) => {
+const ImageTitle = ({ image }: Props) => {
if (image.isIdentifying()) return null; // for re-rendering, this line must be first because this is the only observable in the media model
const identifierWasNotUsed = !image.attrs.species;
@@ -49,8 +48,11 @@ const ImageTitle: FC = ({ image }) => {
return (
- We think it is {{ probability }}% likely to be{' '}
- {{ species }}.
+ We think it is {{ probability } as any}% likely to be{' '}
+
+ {{ species } as any}
+
+ .
);
@@ -59,8 +61,12 @@ const ImageTitle: FC = ({ image }) => {
return (
- Great! We also think it is {{ probability }}% likely to be{' '}
- {{ species }}.
+ Great! We also think it is {{ probability } as any}% likely to
+ be{' '}
+
+ {{ species } as any}
+
+ .
);
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/styles.scss b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/styles.scss
index 612f751a..4df35a5a 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/styles.scss
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/ImageTitle/styles.scss
@@ -3,12 +3,12 @@
top: 0;
left: 0;
margin: 0;
- width: 100%;
+ background: rgba(black, 0.9);
padding-top: calc(var(--ion-safe-area-top, 0) + 10px);
padding-right: 10px;
- padding-left: 70px;
padding-bottom: 10px;
- background: rgba(black, 0.9);
+ padding-left: 70px;
+ width: 100%;
font-weight: 400;
b {
@@ -21,17 +21,17 @@
&.better-image-tip ion-note {
display: block;
- color: white;
margin-top: 10px;
+ color: white;
}
}
div.gallery-tablet-styles {
position: fixed;
- padding: 20px 60px;
- text-align: center;
- background: #131313;
top: 0;
left: 0;
+ background: #131313;
+ padding: 20px 60px;
width: 100%;
+ text-align: center;
}
diff --git a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/index.tsx b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/index.tsx
index 36384aaa..89b6ef79 100644
--- a/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/index.tsx
+++ b/src/Survey/common/Components/PhotoPicker/GalleryWithClassification/index.tsx
@@ -1,10 +1,9 @@
-import { FC } from 'react';
+import { observer } from 'mobx-react';
import { Gallery, useToast } from '@flumens';
import Media from 'models/media';
import { useUserStatusCheck } from 'models/user';
-import { observer } from 'mobx-react';
-import ImageTitle from './ImageTitle';
import ImageFooter from './ImageFooter';
+import ImageTitle from './ImageTitle';
type Props = {
items: Media[];
@@ -19,14 +18,14 @@ const Footer = ({ children }: any) => (
= ({
+const GalleryComponent = ({
items,
showGallery,
onClose,
onCrop,
onSpeciesSelect,
isDisabled,
-}) => {
+}: Props) => {
const toast = useToast();
const checkUserStatus = useUserStatusCheck();
diff --git a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx
index 90de4ee8..11409671 100644
--- a/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx
+++ b/src/Survey/common/Components/PhotoPicker/ImageWithClassification/index.tsx
@@ -1,11 +1,10 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import { FC } from 'react';
-import { IonIcon, IonButton, IonSpinner } from '@ionic/react';
import { observer } from 'mobx-react';
import { alertCircleOutline, close } from 'ionicons/icons';
-import ProbabilityBadge from 'Survey/common/Components/ProbabilityBadge';
+import { IonIcon, IonButton, IonSpinner } from '@ionic/react';
import Media from 'models/media';
import Occurrence from 'models/occurrence';
+import ProbabilityBadge from 'Survey/common/Components/ProbabilityBadge';
import './styles.scss';
type Props = {
@@ -15,7 +14,7 @@ type Props = {
onClick: any;
};
-const Image: FC = ({ media, isDisabled, onDelete, onClick }) => {
+const Image = ({ media, isDisabled, onDelete, onClick }: Props) => {
const hasBeenIdentified = !!media.attrs?.species;
const userSpeciesMatchesAI = media.getIdentifiedTaxonThatMatchParent();
@@ -35,16 +34,19 @@ const Image: FC = ({ media, isDisabled, onDelete, onClick }) => {
return (
-
+ {valueItem}
+
-
+ {StringHelp.limit(locationName, 25)}
+
) : (
-
{locationItem}
{!skipName && locationNameItem}
-
+
+ {empty && Species missing }
+ {commonName &&
{commonName}
}
+
{scientificName}
-
-
+
+
-
-
-
- {
- L.DomEvent.preventDefault(e);
- L.DomEvent.stopPropagation(e);
- e.preventDefault();
- e.stopPropagation();
-
- setShowPastLocations(true);
- }}
- fill="clear"
- color="dark"
- >
-
-
- {children}
);
-const GalleryComponent: FC
{!isDisabled && (
-
+
)}
- 
+ })
{showLoading && {
- let photoIsBeingProcessed = false;
-
- const permission = await Camera.requestPermissions();
- if (permission.camera !== 'granted') {
- throw new Error('User denied access to camera');
- }
-
- const getPhoto = (resolve: any) => {
- const container = document.createElement('div');
- container.setAttribute('id', 'camera-container');
- document.body.appendChild(container);
-
- const root = document.getElementById('root');
- root?.setAttribute('style', 'display:none');
-
- const cameraFocusFrame = document.createElement('div');
- cameraFocusFrame.setAttribute('id', 'camera-focus-frame');
- container.appendChild(cameraFocusFrame);
-
- const cameraButton = document.createElement('button');
- cameraButton.classList.add('camera-button');
-
- async function cleanUp() {
- try {
- await CameraPreview.stop();
- } catch (error) {
- // do nothing
- console.log(error);
- }
-
- document.body.removeChild(container);
-
- root?.removeAttribute('style');
-
- // cameraButton.removeEventListener('click', takePhoto);
- // cancelButton.removeEventListener('click', cleanUp);
-
- photoIsBeingProcessed = false;
- }
-
- const takePhoto = async () => {
- if (photoIsBeingProcessed) return; // prevent camera capture btn double-tap
-
- photoIsBeingProcessed = true;
-
- const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
- quality: 95,
-
- // Needs higher res when capturing screenshots https://github.com/capacitor-community/camera-preview/issues/59
- height: window.screen.height * 5,
- width: window.screen.width * 5,
- };
-
- const result = await CameraPreview.capture(cameraPreviewPictureOptions);
-
- const path = isPlatform('hybrid') ? result.value : '';
- const webPath = !isPlatform('hybrid')
- ? getObjectURL(`data:image/png;base64,${result.value}`)
- : '';
-
- // TODO: save to file
-
- cleanUp();
- resolve({ webPath, path, format: 'jpeg' });
- };
- cameraButton.addEventListener('click', takePhoto);
- container.appendChild(cameraButton);
-
- const cancelCamera = async () => {
- cleanUp();
- resolve(null);
- };
- const cancelButton = document.createElement('button');
- cancelButton.classList.add('cancel-button');
- cancelButton.textContent = i18next.t('Cancel');
- cancelButton.addEventListener('click', cancelCamera);
- container.appendChild(cancelButton);
-
- // eslint-disable-next-line @getify/proper-arrows/name
- (async () => {
- const cameraPreviewOptions: CameraPreviewOptions = {
- position: 'rear',
- paddingBottom: 80,
- parent: 'camera-container',
- storeToFile: true,
- toBack: true,
- disableAudio: true,
- enableZoom: true,
- rotateWhenOrientationChanged: false,
- };
- await CameraPreview.start(cameraPreviewOptions);
- if (isPlatform('hybrid'))
- container?.setAttribute('style', 'background:none'); // make the camera visible
- })();
- };
-
- return new Promise(getPhoto);
-}
diff --git a/src/Survey/common/Components/PhotoPicker/customCamera/styles.scss b/src/Survey/common/Components/PhotoPicker/customCamera/styles.scss
deleted file mode 100644
index cf9b6852..00000000
--- a/src/Survey/common/Components/PhotoPicker/customCamera/styles.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// the background camera must see through it all
-body {
- background-color: transparent !important;
-}
-
-#camera-container {
- position: absolute;
- background: black; // helps to prevent a white background flash while the camera is loading
- height: 100vh;
- width: 100vw;
- border-bottom: 80px solid black;
-
- #camera-focus-frame {
- width: 300px;
- height: 300px;
- background: linear-gradient(to right, black 4px, transparent 4px) 0 0,
- linear-gradient(to right, black 4px, transparent 4px) 0 100%,
- linear-gradient(to left, black 4px, transparent 4px) 100% 0,
- linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
- linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
- linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
- linear-gradient(to top, black 4px, transparent 4px) 0 100%,
- linear-gradient(to top, black 4px, transparent 4px) 100% 100%;
- background-repeat: no-repeat;
- background-size: 20px 20px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
-
- .cancel-button {
- position: absolute;
- bottom: -55px;
- left: 11px;
- background: transparent;
- color: white;
- height: 32px;
- font-size: 17px;
- font-weight: 400;
- }
-
- .camera-button {
- position: absolute;
- height: 50px;
- width: 50px;
- border-radius: 50%;
- bottom: -64px;
- left: 50vw;
- transform: translateX(-50%);
- background: white;
- border: 2px #cdcdcd solid;
- padding: 10px;
- }
-}
diff --git a/src/Survey/common/Components/PhotoPicker/index.tsx b/src/Survey/common/Components/PhotoPicker/index.tsx
index 3ac05194..0a35b53e 100644
--- a/src/Survey/common/Components/PhotoPicker/index.tsx
+++ b/src/Survey/common/Components/PhotoPicker/index.tsx
@@ -1,4 +1,5 @@
-import { FC, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import { Capacitor } from '@capacitor/core';
import {
PhotoPicker,
ImageCropper,
@@ -9,16 +10,14 @@ import {
deleteFile,
} from '@flumens';
import { isPlatform } from '@ionic/react';
-import { Capacitor } from '@capacitor/core';
+import config from 'common/config';
+import appModel from 'models/app';
import Media from 'models/media';
+import Occurrence from 'models/occurrence';
import Sample from 'models/sample';
-import appModel from 'models/app';
import userModel from 'models/user';
-import Occurrence from 'models/occurrence';
-import config from 'common/config';
import GalleryWithClassification from './GalleryWithClassification';
import ImageWithClassification from './ImageWithClassification';
-import getPhotoFromCustomCamera from './customCamera';
import './styles.scss';
type URL = string;
@@ -54,11 +53,11 @@ const useOnBackButton = (onCancelEdit: () => void, editImage?: Media) => {
useEffect(hideModal, [editImage]);
};
-const AppPhotoPicker: FC = ({
+const AppPhotoPicker = ({
model,
allowToCrop = true,
disableClassifier = false,
-}) => {
+}: Props) => {
const [editImage, setEditImage] = useState();
const toast = useToast();
@@ -78,19 +77,18 @@ const AppPhotoPicker: FC = ({
}
};
- async function onAddNew(shouldUseCamera: boolean) {
+ async function onAdd(shouldUseCamera: boolean) {
try {
const photoURLs = await captureImage(
- shouldUseCamera
- ? { getPhoto: getPhotoFromCustomCamera }
- : { multiple: true }
+ shouldUseCamera ? { camera: true } : { multiple: true }
);
if (!photoURLs.length) return;
const getImageModel = async (imageURL: URL) =>
Media.getImageModel(
isPlatform('hybrid') ? Capacitor.convertFileSrc(imageURL) : imageURL,
- config.dataPath
+ config.dataPath,
+ true
);
const imageModels: Media[] = await Promise.all(
photoURLs.map(getImageModel)
@@ -112,6 +110,8 @@ const AppPhotoPicker: FC = ({
}
}
+ const onRemove = (m: any) => m.destroy();
+
const onDoneEdit = async (imageDataURL: URL) => {
const image = editImage as Media;
@@ -129,7 +129,11 @@ const AppPhotoPicker: FC = ({
: savedURL;
// copy over new image values to existing model to preserve its observability
- const newImageModel = await Media.getImageModel(savedURL, config.dataPath);
+ const newImageModel = await Media.getImageModel(
+ savedURL,
+ config.dataPath,
+ true
+ );
Object.assign(image?.attrs, { ...newImageModel.attrs, species: null });
if (!image.parent) {
@@ -165,8 +169,9 @@ const AppPhotoPicker: FC = ({
<>
= ({ sample, onClick }) => {
- const isDisabled = sample.isUploaded();
- if (isDisabled) return null;
-
- const isValid = !sample.validateRemote();
-
- return (
-
- {sample.metadata.saved ? Upload : Finish }
-
- );
-};
-
-export default PrimaryHeaderButton;
diff --git a/src/Survey/common/Components/PrimaryHeaderButton/styles.scss b/src/Survey/common/Components/PrimaryHeaderButton/styles.scss
deleted file mode 100644
index 23940ca5..00000000
--- a/src/Survey/common/Components/PrimaryHeaderButton/styles.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-ion-button.primary-header-button {
- --padding-end: 20px;
- --padding-start: 20px;
- --background: var(--ion-color-primary);
- --border-radius: var(--theme-border-radius) !important;
-}
diff --git a/src/Survey/common/Components/ProbabilityBadge.tsx b/src/Survey/common/Components/ProbabilityBadge.tsx
new file mode 100644
index 00000000..4c609f75
--- /dev/null
+++ b/src/Survey/common/Components/ProbabilityBadge.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { camera } from 'ionicons/icons';
+import { IonIcon } from '@ionic/react';
+import CONFIG from 'common/config';
+import { Badge } from 'common/flumens';
+
+interface Props {
+ probability?: number;
+ className?: string;
+}
+
+const ProbabilityBadge = ({ probability, className }: Props) => {
+ if (!probability) return null;
+
+ const roundedProbability = (probability * 100).toFixed();
+
+ let color;
+ if (probability > CONFIG.POSITIVE_THRESHOLD) {
+ color =
+ 'border border-solid border-[color:var(--classifier-success)] text-[color:var(--classifier-success)] bg-[var(--classifier-success-background)]';
+ } else if (probability > CONFIG.POSSIBLE_THRESHOLD) {
+ color =
+ 'border border-solid border-[color:var(--classifier-plausible)] bg-[var(--classifier-plausible-background)] text-[color:var(--classifier-plausible)]';
+ } else {
+ color =
+ 'border border-solid border-[color:var(--classifier-unlikely)] bg-[var(--classifier-unlikely-background)] text-[color:var(--classifier-unlikely)]';
+ }
+
+ return (
+ = ({ probability }) => {
- if (!probability) return null;
-
- const roundedProbability = (probability * 100).toFixed();
-
- let color;
- if (probability > CONFIG.POSITIVE_THRESHOLD) {
- color = 'success';
- } else if (probability > CONFIG.POSSIBLE_THRESHOLD) {
- color = 'plausible';
- } else {
- color = 'unlikely';
- }
-
- return (
-
- {roundedProbability}%
-
- );
-};
-
-export default ProbabilityBadge;
diff --git a/src/Survey/common/Components/ProbabilityBadge/styles.scss b/src/Survey/common/Components/ProbabilityBadge/styles.scss
deleted file mode 100644
index 2da1a9c2..00000000
--- a/src/Survey/common/Components/ProbabilityBadge/styles.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.badge {
- padding: 3px;
- display: inline-flex;
- z-index: 900;
- border-radius: 10px;
-
- ion-icon {
- margin-right: 3px !important;
- font-size: 1em !important;
- }
-
- ion-label {
- display: flex;
- justify-content: revert;
- align-items: center;
- }
-
- &.badge-success {
- border: 1px solid var(--classifier-success);
- background: var(--classifier-success-background);
- color: var(--classifier-success);
- }
-
- &.badge-plausible {
- border: 1px solid var(--classifier-plausible);
- background: var(--classifier-plausible-background);
- color: var(--classifier-plausible);
- }
-
- &.badge-unlikely {
- border: 1px solid var(--classifier-unlikely);
- background: var(--classifier-unlikely-background);
- color: var(--classifier-unlikely);
- }
-}
diff --git a/src/Survey/common/Components/SpeciesList/SpeciesListItem/index.tsx b/src/Survey/common/Components/SpeciesList/SpeciesListItem/index.tsx
index 7b849eff..8260feff 100644
--- a/src/Survey/common/Components/SpeciesList/SpeciesListItem/index.tsx
+++ b/src/Survey/common/Components/SpeciesList/SpeciesListItem/index.tsx
@@ -1,6 +1,8 @@
-import { FC } from 'react';
-import { useRouteMatch } from 'react-router';
import { observer } from 'mobx-react';
+import { alertOutline } from 'ionicons/icons';
+import { Trans as T } from 'react-i18next';
+import { useRouteMatch } from 'react-router';
+import { useAlert } from '@flumens';
import {
IonItemOption,
IonItemOptions,
@@ -8,12 +10,9 @@ import {
IonItemSliding,
IonIcon,
} from '@ionic/react';
-import { useAlert } from '@flumens';
-import Sample from 'models/sample';
-import Occurrence from 'models/occurrence';
-import { Trans as T } from 'react-i18next';
-import { alertOutline } from 'ionicons/icons';
import VerificationStatus from 'common/Components/VerificationStatus';
+import Occurrence from 'models/occurrence';
+import Sample from 'models/sample';
import IncrementalButton from 'Survey/common/Components/IncrementalButton';
import './styles.scss';
@@ -72,12 +71,12 @@ type Props = {
useSubSamples?: boolean;
};
-const SpeciesListItem: FC = ({
+const SpeciesListItem = ({
model,
increaseCount,
onDelete,
useSubSamples,
-}) => {
+}: Props) => {
const { url } = useRouteMatch();
const isDisabled = model.isDisabled();
diff --git a/src/Survey/common/Components/SpeciesList/SpeciesListItem/styles.scss b/src/Survey/common/Components/SpeciesList/SpeciesListItem/styles.scss
index 5887069d..eaf14253 100644
--- a/src/Survey/common/Components/SpeciesList/SpeciesListItem/styles.scss
+++ b/src/Survey/common/Components/SpeciesList/SpeciesListItem/styles.scss
@@ -16,43 +16,43 @@
.photo {
margin: 0 8px 2px 0;
- height: 60px;
+ border-radius: 5px;
+ background-color: #e5eacd;
min-width: 60px;
max-width: 60px;
- background-color: #e5eacd;
- border-radius: 5px;
+ height: 60px;
overflow: hidden;
img {
- object-fit: cover;
width: 100%;
height: 100%;
+ object-fit: cover;
}
}
.species {
- font-weight: bold;
margin-left: 11px;
+ font-weight: bold;
}
.species.scientific {
+ opacity: 0.7;
+ font-style: italic;
font-weight: normal;
font-size: 0.8em;
- font-style: italic;
- opacity: 0.7;
}
ion-icon.species-entry-incomplete-warning {
- height: 20px;
- width: 20px;
- color: var(--ion-color-warning);
border-radius: 50%;
background-color: rgba(var(--ion-color-warning-rgb), 0.15);
+ width: 20px;
+ height: 20px;
+ color: var(--ion-color-warning);
}
.location {
- font-size: 12px;
- font-weight: normal;
margin: 3px 11px;
+ font-weight: normal;
+ font-size: 12px;
}
.location .warn {
diff --git a/src/Survey/common/Components/SpeciesList/index.tsx b/src/Survey/common/Components/SpeciesList/index.tsx
index 06275425..ca0ec612 100644
--- a/src/Survey/common/Components/SpeciesList/index.tsx
+++ b/src/Survey/common/Components/SpeciesList/index.tsx
@@ -1,17 +1,10 @@
-import { FC } from 'react';
import { observer } from 'mobx-react';
-import {
- IonButton,
- IonIcon,
- IonList,
- IonItemDivider,
- IonLabel,
-} from '@ionic/react';
-import Sample from 'models/sample';
-import Occurrence from 'models/occurrence';
-import { InfoBackgroundMessage, useToast } from '@flumens';
import { filterOutline } from 'ionicons/icons';
+import { InfoBackgroundMessage, useToast } from '@flumens';
+import { IonButton, IonIcon, IonList, IonLabel } from '@ionic/react';
import appModel from 'models/app';
+import Occurrence from 'models/occurrence';
+import Sample from 'models/sample';
import SpeciesListItem from './SpeciesListItem';
import './styles.scss';
@@ -50,7 +43,7 @@ type Props = {
useSubSamples?: boolean;
};
-const SpeciesList: FC = ({ onDelete, sample, useSubSamples }) => {
+const SpeciesList = ({ onDelete, sample, useSubSamples }: Props) => {
const toast = useToast();
const models = useSubSamples ? sample.samples : sample.occurrences;
@@ -101,13 +94,13 @@ const SpeciesList: FC = ({ onDelete, sample, useSubSamples }) => {
-
-
+
+
+ {sample.metadata.saved ? 'Upload' : 'Finish'}
+
+ );
+};
+
+export default observer(SurveyHeaderButton);
diff --git a/src/Survey/common/Components/Taxon.tsx b/src/Survey/common/Components/Taxon.tsx
index 1cb063f0..9379b1f0 100644
--- a/src/Survey/common/Components/Taxon.tsx
+++ b/src/Survey/common/Components/Taxon.tsx
@@ -1,12 +1,12 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
import { observer } from 'mobx-react';
+import { useTranslation } from 'react-i18next';
+import { useRouteMatch } from 'react-router';
import { Page, Header, Main, useToast } from '@flumens';
-import Sample from 'models/sample';
+import { NavContext } from '@ionic/react';
import appModel from 'models/app';
import Occurrence, { Taxon as TaxonI } from 'models/occurrence';
-import { useRouteMatch } from 'react-router';
-import { useTranslation } from 'react-i18next';
-import { NavContext } from '@ionic/react';
+import Sample from 'models/sample';
import TaxonSearch, { TaxonSearchFilters } from './TaxonSearch';
type Props = {
@@ -15,7 +15,7 @@ type Props = {
occurrence?: Occurrence;
};
-const Taxon: FC = ({ sample, subSample, occurrence }) => {
+const Taxon = ({ sample, subSample, occurrence }: Props) => {
const { navigate, goBack } = useContext(NavContext);
const { url } = useRouteMatch();
const toast = useToast();
@@ -25,7 +25,8 @@ const Taxon: FC = ({ sample, subSample, occurrence }) => {
const shouldCreateOccurrences = !!surveyConfig.occ?.create;
const createNewOccurrenceModel = async (taxon: any) => {
- const newOccurrence = (await surveyConfig.occ?.create?.(Occurrence, {
+ const newOccurrence = (await surveyConfig.occ?.create?.({
+ Occurrence,
taxon,
})) as Occurrence;
sample.occurrences.push(newOccurrence);
@@ -35,7 +36,9 @@ const Taxon: FC = ({ sample, subSample, occurrence }) => {
};
const createNewSampleModel = async (taxon: TaxonI) => {
- const newSample = (await surveyConfig.smp?.create?.(Sample, Occurrence, {
+ const newSample = (await surveyConfig.smp?.create?.({
+ Sample,
+ Occurrence,
taxon,
surveySample: sample,
})) as Sample;
diff --git a/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/Species.tsx b/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/Species.tsx
index 6b09d80c..40d257ca 100644
--- a/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/Species.tsx
+++ b/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/Species.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import { IonItem, IonButton, IonIcon } from '@ionic/react';
import { createOutline } from 'ionicons/icons';
import { Trans as T } from 'react-i18next';
+import { IonItem, IonIcon } from '@ionic/react';
import { groups as informalGroups } from 'common/data/informalGroups';
+import { Button } from 'common/flumens';
import { Taxon } from 'models/occurrence';
import ProbabilityBadge from 'Survey/common/Components/ProbabilityBadge';
import './styles.scss';
@@ -58,46 +58,43 @@ type Props = {
showEditButton?: boolean;
};
-const Species: FC = ({
+const Species = ({
species,
searchPhrase,
showEditButton,
onSelect,
-}) => {
+}: Props) => {
const prettyName = prettifyName(species, searchPhrase);
const group = (informalGroups as any)[species.group];
- const onClickWrap = (e: any) => {
- const pressedEditShortcut = e.target.tagName === 'ION-BUTTON';
- onSelect(species, pressedEditShortcut);
- };
-
const { probability } = species;
return (
-
- {probability && (
- onSelect(species)}>
+
);
};
diff --git a/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/styles.scss b/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/styles.scss
index 25df0937..1c6406be 100644
--- a/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/styles.scss
+++ b/src/Survey/common/Components/TaxonSearch/components/Suggestions/components/styles.scss
@@ -1,6 +1,6 @@
#suggestions .empty {
- width: 100%;
margin: 0 auto 30px;
+ width: 100%;
max-width: calc(100% - 30px);
--border-radius: var(--theme-border-radius);
--border-width: 0;
@@ -9,12 +9,7 @@
span {
margin: 0 auto;
- font-weight: 200;
padding: 10px;
-
- b {
- font-weight: 300;
- }
}
}
@@ -30,15 +25,15 @@
padding: 8px 8px 8px 15px;
--padding-start: 0px;
--inner-padding-end: 0;
- font-size: 16px;
position: relative;
overflow: hidden;
+ font-size: 16px;
--background: none;
padding: 0;
.probability {
- min-width: 60px;
margin-left: 8px;
+ min-width: 68px;
}
&.recorded {
@@ -46,44 +41,24 @@
}
&:nth-of-type(odd) {
- background-color: white;
border-radius: 5px;
+ background-color: white;
}
&:hover {
background-color: var(--ion-color-light);
}
- button {
- width: 20%;
- max-width: 80px;
- right: 0;
-
- background-color: transparent;
- border: none;
- }
-
- ion-button.edit-shortcut {
- height: 80%;
- --padding-start: 16px;
- --padding-end: 5px;
- border-left: 1px solid var(--ion-color-light-shade);
-
- ion-icon {
- color: black;
- }
- }
-
div.taxon {
display: flex;
flex-direction: column;
- white-space: normal;
- overflow: visible;
- font-weight: normal;
margin-bottom: 3px;
margin-left: 8px;
- line-height: 20px;
width: 100%;
+ overflow: visible;
+ font-weight: normal;
+ line-height: 20px;
+ white-space: normal;
small {
max-width: 90%;
@@ -94,14 +69,14 @@
position: absolute;
right: 22%;
- &.right {
- right: 2%;
- }
-
bottom: 0;
+ color: var(--ion-color-dark);
font-weight: 200;
font-size: 14px;
- color: var(--ion-color-dark);
+
+ &.right {
+ right: 2%;
+ }
}
@media only screen and (min-width: 400px) {
diff --git a/src/Survey/common/Components/TaxonSearch/components/Suggestions/index.tsx b/src/Survey/common/Components/TaxonSearch/components/Suggestions/index.tsx
index da6559ea..c66be69f 100644
--- a/src/Survey/common/Components/TaxonSearch/components/Suggestions/index.tsx
+++ b/src/Survey/common/Components/TaxonSearch/components/Suggestions/index.tsx
@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { IonList, IonItem, IonSpinner } from '@ionic/react';
-import { hashCode } from 'helpers/UUID';
import { Trans as T } from 'react-i18next';
+import { hashCode } from '@flumens';
+import { IonList, IonItem, IonSpinner } from '@ionic/react';
import { Taxon } from 'models/occurrence';
import Species from './components/Species';
import './styles.scss';
@@ -122,14 +121,14 @@ type Props = {
showEditButton?: boolean;
};
-const Suggestions: FC = ({
+const Suggestions = ({
searchResults,
showEditButton,
searchPhrase,
onSpeciesSelected,
suggestedSpecies,
suggestionsAreLoading,
-}) => {
+}: Props) => {
const getSuggestion = (species: Taxon) => {
const key = hashCode(JSON.stringify(species));
return (
@@ -148,10 +147,10 @@ const Suggestions: FC = ({
return (
<>
+
-
{deDuped.map(getSuggestion)}
);
diff --git a/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss b/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
index 0d37260d..357b4292 100644
--- a/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
+++ b/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
@@ -1,9 +1,9 @@
#suggestions h3 {
- font-size: 1em;
margin: 15px 5px;
+ font-size: 1em;
ion-spinner {
- height: 1em;
margin-bottom: -3px;
+ height: 1em;
}
}
diff --git a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx
new file mode 100644
index 00000000..ba3aeda1
--- /dev/null
+++ b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useContext } from 'react';
+import { Trans as T, useTranslation } from 'react-i18next';
+import { CheckboxInput, Main, RadioInput } from '@flumens';
+import {
+ IonButtons,
+ IonToolbar,
+ IonHeader,
+ IonTitle,
+ IonButton,
+ IonModal,
+ NavContext,
+} from '@ionic/react';
+import { groups as informalGroups } from 'common/data/informalGroups';
+import appModel from 'models/app';
+
+type Props = {
+ onSearchTaxaFilterSelect: (e: any) => void;
+ onSearchNamesFilterSelect: (e: any) => void;
+ toggleModal: () => void;
+ showModal: boolean;
+};
+
+const useDisableBackButton = (toggleModal: () => void, showModal: boolean) => {
+ const { goBack } = useContext(NavContext);
+
+ const disableBackButton = () => {
+ const disableHardwareBackButton = (event: any) =>
+ event.detail.register(100, () => {
+ if (!showModal) {
+ goBack();
+ return null;
+ }
+
+ return toggleModal();
+ });
+
+ document.addEventListener('ionBackButton', disableHardwareBackButton);
+
+ const removeEventListener = () =>
+ document.removeEventListener('ionBackButton', disableHardwareBackButton);
+ return removeEventListener;
+ };
+
+ useEffect(disableBackButton, [showModal]);
+};
+
+const FiltersModal = ({
+ onSearchTaxaFilterSelect,
+ onSearchNamesFilterSelect,
+ toggleModal,
+ showModal,
+}: Props) => {
+ const { t } = useTranslation();
+
+ useDisableBackButton(toggleModal, showModal);
+
+ const filters = Object.keys(informalGroups)
+ .sort((a: string, b: string) =>
+ t((informalGroups as any)[a]).localeCompare(t((informalGroups as any)[b]))
+ )
+ .map((value: string) => ({ value, label: (informalGroups as any)[value] }));
+
+ const { searchNamesOnly, taxonGroupFilters: selectedFilters } =
+ appModel.attrs;
+
+ const form = (
+
+
+
+
+ Filters
+
+
+
+ Close
+
+
+
+
+ {form}
+
+ );
+};
+
+export default FiltersModal;
diff --git a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/index.tsx b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/index.tsx
index bc15824d..e1aacaef 100644
--- a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/index.tsx
+++ b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/index.tsx
@@ -1,151 +1,16 @@
-import { FC, useState, useEffect, useContext } from 'react';
-import {
- IonItemDivider,
- IonButtons,
- IonToolbar,
- IonHeader,
- IonTitle,
- IonButton,
- IonModal,
- IonRadio,
- IonCheckbox,
- IonLabel,
- IonItem,
- IonRadioGroup,
- NavContext,
-} from '@ionic/react';
-import { Main } from '@flumens';
+import { useState } from 'react';
+import { Trans as T } from 'react-i18next';
import appModel from 'models/app';
-import { Trans as T, useTranslation } from 'react-i18next';
-import { groups as informalGroups } from 'common/data/informalGroups';
+import HeaderButton from 'Survey/common/Components/HeaderButton';
+import FiltersModal from './FiltersModal';
import './styles.scss';
-type Props = {
- onSearchTaxaFilterSelect: (e: any) => void;
- onSearchNamesFilterSelect: (e: any) => void;
- toggleModal: () => void;
- showModal: boolean;
-};
-
-const useDisableBackButton = (toggleModal: () => void, showModal: boolean) => {
- const { goBack } = useContext(NavContext);
-
- const disableBackButton = () => {
- const disableHardwareBackButton = (event: any) =>
- event.detail.register(100, () => {
- if (!showModal) {
- goBack();
- return null;
- }
-
- return toggleModal();
- });
-
- document.addEventListener('ionBackButton', disableHardwareBackButton);
-
- const removeEventListener = () =>
- document.removeEventListener('ionBackButton', disableHardwareBackButton);
- return removeEventListener;
- };
-
- useEffect(disableBackButton, [showModal]);
-};
-
-const FiltersModal: FC = ({
- onSearchTaxaFilterSelect,
- onSearchNamesFilterSelect,
- toggleModal,
- showModal,
-}) => {
- const { t } = useTranslation();
-
- useDisableBackButton(toggleModal, showModal);
-
- const filters = Object.keys(informalGroups)
- .sort((a: string, b: string) =>
- t((informalGroups as any)[a]).localeCompare(t((informalGroups as any)[b]))
- )
- .map((id: string) => ({ id, label: (informalGroups as any)[id] }));
-
- const { searchNamesOnly, taxonGroupFilters: selectedFilters } =
- appModel.attrs;
-
- const filtersList = filters.map((_, i) => (
-
- {t(filters[i].label)}
- = 0}
- />
-
- ));
-
- const form = (
-
-
-
-
- Filters
-
-
-
- Close
-
-
-
-
- {form}
-
- );
-};
-
-const Header: FC = () => {
+const Header = () => {
const [showModal, setShowModal] = useState(false);
const toggleModal = () => setShowModal(!showModal);
- const onSearchNamesFilterSelect = (e: any) => {
- const filter = e.target.value;
+ const onSearchNamesFilterSelect = (filter: '' | 'scientific' | 'common') => {
if (filter === appModel.attrs.searchNamesOnly) {
return;
}
@@ -153,11 +18,6 @@ const Header: FC = () => {
appModel.save();
};
- const onSearchTaxaFilterSelect = (e: any) => {
- const filter = parseInt(e.target.value, 10);
- appModel.toggleTaxonFilter(filter);
- };
-
const isFiltering =
appModel.attrs.searchNamesOnly || appModel.attrs.taxonGroupFilters.length;
@@ -165,6 +25,13 @@ const Header: FC = () => {
(appModel.attrs.searchNamesOnly ? 1 : 0) +
appModel.attrs.taxonGroupFilters.length;
+ const onSearchTaxaFilterSelect = (filters: string[]) => {
+ appModel.attrs.taxonGroupFilters = filters.map((s: string) =>
+ parseInt(s, 10)
+ );
+ appModel.save();
+ };
+
return (
<>
{
toggleModal={toggleModal}
showModal={showModal}
/>
-
Filters {!!isFiltering && ({filtersCount})}
-
+
);
};
diff --git a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/styles.scss b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/styles.scss
index 6092606a..2e99af8f 100644
--- a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/styles.scss
+++ b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/styles.scss
@@ -27,8 +27,8 @@ ion-button.filter-button {
--border-radius: var(--theme-border-radius) !important;
b {
- margin-left: 10px;
margin-right: -10px;
+ margin-left: 10px;
letter-spacing: 2px;
}
}
diff --git a/src/Survey/common/Components/TaxonSearch/index.tsx b/src/Survey/common/Components/TaxonSearch/index.tsx
index 21ee53a6..d9f3546e 100644
--- a/src/Survey/common/Components/TaxonSearch/index.tsx
+++ b/src/Survey/common/Components/TaxonSearch/index.tsx
@@ -1,10 +1,9 @@
-import { useRef, FC, useState } from 'react';
-import { IonSearchbar, useIonViewDidEnter } from '@ionic/react';
+import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { IonSearchbar, useIonViewDidEnter } from '@ionic/react';
import { Taxon } from 'models/occurrence';
import searchSpecies, { Options } from 'helpers/taxonSearch';
import Suggestions from './components/Suggestions';
-import './styles.scss';
export { default as TaxonSearchFilters } from './components/TaxonSearchFilters';
@@ -21,7 +20,7 @@ type Props = {
suggestionsAreLoading?: boolean;
};
-const TaxonSearch: FC = ({
+const TaxonSearch = ({
onSpeciesSelected,
recordedTaxa,
informalGroups,
@@ -30,13 +29,13 @@ const TaxonSearch: FC = ({
showEditButton,
suggestedSpecies,
suggestionsAreLoading,
-}) => {
+}: Props) => {
const { t } = useTranslation();
const inputEl = useRef();
const [searchResults, setSearchResults] = useState();
- const [searchPhrase, setSearchPrase] = useState('');
+ const [searchPhrase, setSearchPhrase] = useState('');
const annotateRecordedTaxa = (newSearchResults: any) =>
newSearchResults.map((result: any) =>
@@ -53,7 +52,7 @@ const TaxonSearch: FC = ({
newSearchPhrase.length >= MIN_SEARCH_LENGTH;
if (!isValidSearch) {
setSearchResults(undefined);
- setSearchPrase('');
+ setSearchPhrase('');
return;
}
@@ -67,19 +66,19 @@ const TaxonSearch: FC = ({
const annotatedSearchResults = annotateRecordedTaxa(newSearchResults);
setSearchResults(annotatedSearchResults);
- setSearchPrase(newSearchPhrase);
+ setSearchPhrase(newSearchPhrase);
};
const onInputClear = () => {
setSearchResults(undefined);
- setSearchPrase('');
+ setSearchPhrase('');
};
const onSpeciesSelectedWrap = (species: any, editButtonPressed?: boolean) => {
onSpeciesSelected(species, editButtonPressed);
if (resetOnSelect && !editButtonPressed) {
setSearchResults(undefined);
- setSearchPrase('');
+ setSearchPhrase('');
inputEl.current.value = '';
inputEl.current.setFocus();
}
@@ -98,7 +97,7 @@ const TaxonSearch: FC = ({
ref={inputEl}
placeholder={t('Species name')}
debounce={300}
- onIonChange={onInputKeystroke}
+ onIonInput={onInputKeystroke}
onIonClear={onInputClear}
showCancelButton="never"
/>
diff --git a/src/Survey/common/Components/TaxonSearch/styles.scss b/src/Survey/common/Components/TaxonSearch/styles.scss
deleted file mode 100644
index 734d847e..00000000
--- a/src/Survey/common/Components/TaxonSearch/styles.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-#taxa-shortcuts-info {
- padding: 15px;
- background: rgba(238, 238, 238, 0.6);
- margin: 20px;
- color: #353535;
-}
-
-#suggestions ul {
- border-top: none;
- padding-left: 0;
- margin-top: 0;
- margin-bottom: 15px;
- list-style: none;
- background-color: #fff;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
-}
diff --git a/src/Survey/common/Components/TrainingBand.tsx b/src/Survey/common/Components/TrainingBand.tsx
new file mode 100644
index 00000000..2cc0af64
--- /dev/null
+++ b/src/Survey/common/Components/TrainingBand.tsx
@@ -0,0 +1,9 @@
+import { Trans as T } from 'react-i18next';
+
+const TrainingBand = () => (
+
Thanks for sending in your record. From this record details, we
- think it could be the {{ taxonName }} species.
+ think it could be the {{ taxonName } as any} species.
@@ -56,9 +56,9 @@ const getVerificationText = (
Thanks for sending in your record. A verifier has marked it as{' '}
- {{ statusMessage: t(statusMessage) }} in this case. Please
- log in to the iRecord St Helena App website to see any additional
- information that the verifier may have provided.
+ {{ statusMessage: t(statusMessage) } as any} in this case.
+ Please log in to the iRecord St Helena App website to see any
+ additional information that the verifier may have provided.
@@ -78,7 +78,7 @@ const icons: { [key: string]: string } = {
rejected: closeCircle,
};
-const VerificationMessage: FC = ({ occurrence }) => {
+const VerificationMessage = ({ occurrence }: Props) => {
const status = occurrence.getVerificationStatus();
const message = occurrence.getVerificationStatusMessage();
const taxonName = occurrence.getPrettyName();
@@ -104,7 +104,7 @@ const VerificationMessage: FC = ({ occurrence }) => {
return (
;
+ create?: (props: {
+ Sample: typeof Sample;
+ Occurrence: typeof Occurrence;
+ taxon: Taxon;
+ surveySample: Sample;
+ skipGPS?: boolean;
+ }) => Promise;
verify?: (attrs: any) => any;
modifySubmission?: (submission: any, model: any) => any;
smp?: SampleConfig;
@@ -326,22 +324,13 @@ export interface Survey extends SampleConfig {
*/
get?: (sample: Sample) => Survey;
- create: (
- Smp: typeof Sample,
- Occ: typeof Occurrence,
- options: {
- taxon?: Taxon;
- image?: Media | null;
- skipLocation?: boolean;
- skipGPS?: boolean;
- }
- ) => Promise;
-
- createWithPhoto?: (
- Smp: typeof Sample,
- Occ: typeof Occurrence,
- options: {
- image: Media;
- }
- ) => Promise;
+ create: (props: {
+ Sample: typeof Sample;
+ Occurrence: typeof Occurrence;
+ taxon?: Taxon;
+ image?: Media | null;
+ skipLocation?: boolean;
+ skipGPS?: boolean;
+ alert?: any;
+ }) => Promise;
}
diff --git a/src/User/Login/Main.tsx b/src/User/Login/Main.tsx
index 42f6898d..05166da5 100644
--- a/src/User/Login/Main.tsx
+++ b/src/User/Login/Main.tsx
@@ -1,99 +1,96 @@
-import { FC, useState } from 'react';
-import { IonIcon, IonButton, IonList } from '@ionic/react';
-import { Link } from 'react-router-dom';
-
+import { useState } from 'react';
+import clsx from 'clsx';
import {
keyOutline,
- personOutline,
eyeOutline,
eyeOffOutline,
+ mailOutline,
} from 'ionicons/icons';
+import { SubmitHandler, useForm } from 'react-hook-form';
import { Trans as T } from 'react-i18next';
-import { AnySchema } from 'yup';
-import { Formik, Form } from 'formik';
-import { Main, InputWithValidation } from '@flumens';
+import { Link } from 'react-router-dom';
+import { TypeOf } from 'zod';
+import { Main, Button } from '@flumens';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IonIcon, IonRouterLink } from '@ionic/react';
+import { UserModel } from 'models/user';
+import ControlledInput from '../common/Components/ControlledInput';
+
+type Details = TypeOf;
type Props = {
- schema: AnySchema;
- onSubmit: any;
+ onSubmit: SubmitHandler
+
Count
Species
{speciesList.length}
-
+
{speciesList}
diff --git a/src/Survey/common/Components/SpeciesList/styles.scss b/src/Survey/common/Components/SpeciesList/styles.scss
index b19f88dc..36ac1ab2 100644
--- a/src/Survey/common/Components/SpeciesList/styles.scss
+++ b/src/Survey/common/Components/SpeciesList/styles.scss
@@ -9,9 +9,6 @@
font-weight: bold;
.species-list-header {
- background: #e6e6e6 !important;
- color: #252525;
-
padding-left: 7px;
--inner-padding-end: 0;
@@ -21,11 +18,10 @@
}
ion-label {
+ margin-left: 0;
width: 100%;
- text-align: center;
- font-family: 'Museo300';
font-weight: normal;
- margin-left: 0;
+ text-align: center;
&:nth-of-type(2) {
padding-left: 16px;
diff --git a/src/Survey/common/Components/StartNewSurvey/index.tsx b/src/Survey/common/Components/StartNewSurvey/index.tsx
index 7fefbb78..da32a414 100644
--- a/src/Survey/common/Components/StartNewSurvey/index.tsx
+++ b/src/Survey/common/Components/StartNewSurvey/index.tsx
@@ -1,20 +1,13 @@
import { useEffect, useContext } from 'react';
+import { useRouteMatch } from 'react-router';
+import { useAlert } from '@flumens';
import { NavContext, IonPage } from '@ionic/react';
-import Sample from 'models/sample';
import Occurrence from 'models/occurrence';
+import Sample from 'models/sample';
import savedSamples from 'models/savedSamples';
import { Survey } from 'Survey/common/config';
-import { useRouteMatch } from 'react-router';
import './styles.scss';
-async function getNewSample(survey: Survey) {
- const sample = await survey.create(Sample, Occurrence, {});
- await sample.save();
-
- savedSamples.push(sample);
- return sample;
-}
-
type Props = {
survey: Survey;
SurveyCreatePage?: any;
@@ -23,12 +16,16 @@ type Props = {
function StartNewSurvey({ survey, SurveyCreatePage }: Props) {
const context = useContext(NavContext);
const match = useRouteMatch();
+ const alert = useAlert();
const createSampleWrap = () => {
const createSample = async () => {
if (SurveyCreatePage) return;
- const sample = await getNewSample(survey);
+ const sample = await survey.create({ Sample, Occurrence, alert });
+ await sample.save();
+
+ savedSamples.push(sample);
context.navigate(`${match.url}/${sample.cid}`, 'none', 'replace');
};
diff --git a/src/Survey/common/Components/SurveyHeaderButton.tsx b/src/Survey/common/Components/SurveyHeaderButton.tsx
new file mode 100644
index 00000000..5ef735c5
--- /dev/null
+++ b/src/Survey/common/Components/SurveyHeaderButton.tsx
@@ -0,0 +1,23 @@
+import { observer } from 'mobx-react';
+import Sample from 'models/sample';
+import HeaderButton from './HeaderButton';
+
+interface Props {
+ sample: Sample;
+ onClick: any;
+}
+
+const SurveyHeaderButton = ({ sample, onClick }: Props) => {
+ const isDisabled = sample.isUploaded();
+ if (isDisabled) return null;
+
+ const isInvalid = sample.validateRemote();
+
+ return (
+
-
- )}
+
+ {probability && (
+ {group}
-
+
+ {group}
+
- {showEditButton && (
-
-
- )}
+ {showEditButton && (
+
+ )}
+
+
+ )}
- {prettyName}
+ {prettyName}
-
- {/* quick hack to fix odd css style */}
Suggestions :
-
{deDuped.map(getSuggestion)}
);
diff --git a/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss b/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
index 0d37260d..357b4292 100644
--- a/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
+++ b/src/Survey/common/Components/TaxonSearch/components/Suggestions/styles.scss
@@ -1,9 +1,9 @@
#suggestions h3 {
- font-size: 1em;
margin: 15px 5px;
+ font-size: 1em;
ion-spinner {
- height: 1em;
margin-bottom: -3px;
+ height: 1em;
}
}
diff --git a/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx
new file mode 100644
index 00000000..ba3aeda1
--- /dev/null
+++ b/src/Survey/common/Components/TaxonSearch/components/TaxonSearchFilters/FiltersModal.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useContext } from 'react';
+import { Trans as T, useTranslation } from 'react-i18next';
+import { CheckboxInput, Main, RadioInput } from '@flumens';
+import {
+ IonButtons,
+ IonToolbar,
+ IonHeader,
+ IonTitle,
+ IonButton,
+ IonModal,
+ NavContext,
+} from '@ionic/react';
+import { groups as informalGroups } from 'common/data/informalGroups';
+import appModel from 'models/app';
+
+type Props = {
+ onSearchTaxaFilterSelect: (e: any) => void;
+ onSearchNamesFilterSelect: (e: any) => void;
+ toggleModal: () => void;
+ showModal: boolean;
+};
+
+const useDisableBackButton = (toggleModal: () => void, showModal: boolean) => {
+ const { goBack } = useContext(NavContext);
+
+ const disableBackButton = () => {
+ const disableHardwareBackButton = (event: any) =>
+ event.detail.register(100, () => {
+ if (!showModal) {
+ goBack();
+ return null;
+ }
+
+ return toggleModal();
+ });
+
+ document.addEventListener('ionBackButton', disableHardwareBackButton);
+
+ const removeEventListener = () =>
+ document.removeEventListener('ionBackButton', disableHardwareBackButton);
+ return removeEventListener;
+ };
+
+ useEffect(disableBackButton, [showModal]);
+};
+
+const FiltersModal = ({
+ onSearchTaxaFilterSelect,
+ onSearchNamesFilterSelect,
+ toggleModal,
+ showModal,
+}: Props) => {
+ const { t } = useTranslation();
+
+ useDisableBackButton(toggleModal, showModal);
+
+ const filters = Object.keys(informalGroups)
+ .sort((a: string, b: string) =>
+ t((informalGroups as any)[a]).localeCompare(t((informalGroups as any)[b]))
+ )
+ .map((value: string) => ({ value, label: (informalGroups as any)[value] }));
+
+ const { searchNamesOnly, taxonGroupFilters: selectedFilters } =
+ appModel.attrs;
+
+ const form = (
+
+
+
+
+ );
+
+ return (
+
+ Names:
+
+
+
+
+
+
+ Taxon groups:
+
+
+ `${s}`)}
+ options={filters}
+ />
+
+
-
- Names:
-
-
-
-
- Default
-
-
-
-
- Common only
-
-
-
-
- Scientific only
-
-
-
-
-
- );
-
- return (
-
-
- Taxon groups:
-
- {filtersList}
-
-
+ Training Mode
+
+);
+
+export default TrainingBand;
diff --git a/src/Survey/common/Components/VerificationMessage/index.tsx b/src/Survey/common/Components/VerificationMessage/index.tsx
index 6cf29e45..b9748d8d 100644
--- a/src/Survey/common/Components/VerificationMessage/index.tsx
+++ b/src/Survey/common/Components/VerificationMessage/index.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import Occurrence from 'models/occurrence';
-import { InfoMessage, InfoButton } from '@flumens';
-import { useTranslation, Trans as T } from 'react-i18next';
import clsx from 'clsx';
import { checkmarkCircle, closeCircle } from 'ionicons/icons';
+import { useTranslation, Trans as T } from 'react-i18next';
+import { InfoMessage, InfoButton } from '@flumens';
+import { IonIcon } from '@ionic/react';
+import Occurrence from 'models/occurrence';
import './styles.scss';
const getVerificationText = (
@@ -39,7 +39,7 @@ const getVerificationText = (
;
};
-const LoginMain: FC = ({ schema, onSubmit }) => {
+const LoginMain = ({ onSubmit }: Props) => {
const [showPassword, setShowPassword] = useState(false);
const togglePassword = () => setShowPassword(!showPassword);
- const loginForm = (props: any) => (
-
- );
+ const { formState, handleSubmit, control } = useForm
({
+ defaultValues: { email: '', password: '' },
+ resolver: zodResolver(UserModel.loginSchema),
+ });
return (
-
-
-
-
+
);
};
diff --git a/src/User/Login/index.tsx b/src/User/Login/index.tsx
index 2e89331d..588cfff9 100644
--- a/src/User/Login/index.tsx
+++ b/src/User/Login/index.tsx
@@ -1,18 +1,15 @@
-import { FC, useContext } from 'react';
-import userModel from 'models/user';
-import { NavContext } from '@ionic/react';
+import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
+import { TypeOf } from 'zod';
import { useToast, useLoader, Page, Header, device } from '@flumens';
+import { NavContext } from '@ionic/react';
+import userModel, { UserModel } from 'models/user';
import Main from './Main';
-import './styles.scss';
-export type Details = {
- password: string;
- email: string;
-};
+type Details = TypeOf;
-const LoginController: FC = () => {
- const context = useContext(NavContext);
+const LoginController = () => {
+ const { navigate } = useContext(NavContext);
const toast = useToast();
const loader = useLoader();
const { t } = useTranslation();
@@ -24,12 +21,10 @@ const LoginController: FC = () => {
skipTranslation: true,
});
- context.navigate('/home/surveys', 'root');
+ navigate('/home/surveys', 'root');
};
- async function onLogin(details: Details) {
- const { email, password } = details;
-
+ async function onLogin({ email, password }: Details) {
if (!device.isOnline) {
toast.warn("Sorry, looks like you're offline.");
return;
@@ -41,17 +36,27 @@ const LoginController: FC = () => {
await userModel.logIn(email.trim(), password);
onSuccessReturn();
- } catch (err: any) {
- toast.error(err);
+ } catch (err) {
+ if (err instanceof Error) {
+ toast.error(err.message);
+ }
+ console.error(err);
}
loader.hide();
}
+ // ion-toolbar {
+ // position: fixed;
+ // ;
+ // ion-back-button {
+ // color: var(--ion-color-light-contrast);
+ // }
+ // }
return (
-
);
};
diff --git a/src/User/Login/styles.scss b/src/User/Login/styles.scss
deleted file mode 100644
index 7b1921a8..00000000
--- a/src/User/Login/styles.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-#user-login {
- ion-toolbar {
- position: fixed;
- --background: transparent;
-
- ion-back-button {
- color: var(--ion-color-light-contrast);
- }
- }
-
- ion-content {
- --padding-top: 40px; // header
-
- ion-button ion-icon {
- color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
- }
-
- h1 {
- text-align: center;
- font-size: 1.4em;
- font-weight: 500;
- }
-
- h2 {
- text-align: center;
- font-size: 1em;
- font-weight: 400;
- margin-bottom: 70px;
- }
-
- a {
- color: var(--ion-color-primary);
- text-decoration: none;
- }
-
- ion-icon.faint {
- opacity: 0.6;
- }
-
- form a.password-forgot-button {
- display: block;
- padding: 10px;
- text-align: right;
- font-size: 0.85em;
- color: var(--ion-color-dark);
- }
-
- ion-button[type='submit'] {
- margin: 15px auto;
- width: calc(100% - 30px);
- max-width: 200px;
- margin-bottom: 60px;
- }
- }
-
- input {
- background: transparent;
- }
-
- .signup-button {
- font-size: 0.85em;
- text-align: center;
- }
-}
diff --git a/src/User/Register/Main.tsx b/src/User/Register/Main.tsx
index 69355dc4..079171e3 100644
--- a/src/User/Register/Main.tsx
+++ b/src/User/Register/Main.tsx
@@ -1,119 +1,107 @@
-import { FC, useState } from 'react';
-import { IonIcon, IonButton, IonList, IonRouterLink } from '@ionic/react';
+import { useState } from 'react';
+import clsx from 'clsx';
import {
- personOutline,
- mailOutline,
keyOutline,
+ personOutline,
eyeOutline,
eyeOffOutline,
+ mailOutline,
} from 'ionicons/icons';
+import { SubmitHandler, useForm } from 'react-hook-form';
import { Trans as T } from 'react-i18next';
-import { AnySchema } from 'yup';
-import { Formik, Form } from 'formik';
-import { Main, InputWithValidation } from '@flumens';
+import { TypeOf } from 'zod';
+import { Main, Button } from '@flumens';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IonIcon, IonRouterLink } from '@ionic/react';
import config from 'common/config';
+import { UserModel } from 'models/user';
+import ControlledInput from '../common/Components/ControlledInput';
+
+type Details = TypeOf;
type Props = {
- onSubmit: any;
- schema: AnySchema;
+ onSubmit: SubmitHandler
- Welcome back
-
-
- Sign in to your account to start
-
+
+
+
+
+
+
+
+
+
+ Welcome back
+
+
+ Sign in to your account to start
+
+
+
+
+
+ I don't have an account .{' '}
+
+ Sign Up
+
+
+ ;
};
-const RegisterMain: FC = ({ onSubmit, schema }) => {
+const RegisterMain = ({ onSubmit }: Props) => {
const [showPassword, setShowPassword] = useState(false);
const togglePassword = () => setShowPassword(!showPassword);
- const registrationForm = (props: any) => (
-
- );
+ const { formState, handleSubmit, control } = useForm
({
+ defaultValues: { firstName: '', secondName: '', email: '', password: '' },
+ resolver: zodResolver(UserModel.registerSchema),
+ });
return (
-
-
+
);
};
diff --git a/src/User/Register/index.tsx b/src/User/Register/index.tsx
index b105e1f4..6ca251f6 100644
--- a/src/User/Register/index.tsx
+++ b/src/User/Register/index.tsx
@@ -1,19 +1,14 @@
-import { FC, useContext } from 'react';
-import userModel from 'models/user';
-import { NavContext } from '@ionic/react';
+import { useContext } from 'react';
import { Trans as T } from 'react-i18next';
+import { TypeOf } from 'zod';
import { Page, Header, device, useToast, useAlert, useLoader } from '@flumens';
+import { NavContext } from '@ionic/react';
+import userModel, { UserModel } from 'models/user';
import Main from './Main';
-import './styles.scss';
-export type Details = {
- password: string;
- email: string;
- firstName?: string | undefined;
- secondName?: string | undefined;
-};
+type Details = TypeOf;
-const RegisterContainer: FC = () => {
+const RegisterContainer = () => {
const context = useContext(NavContext);
const alert = useAlert();
const toast = useToast();
@@ -49,8 +44,8 @@ const RegisterContainer: FC = () => {
header: 'Welcome aboard',
message: (
- Before submitting any records please check your email and click on
- the verification link.
+ Before starting any surveys please check your email and click on the
+ verification link.
),
buttons: [
@@ -70,8 +65,8 @@ const RegisterContainer: FC = () => {
return (
-
);
};
diff --git a/src/User/Register/styles.scss b/src/User/Register/styles.scss
deleted file mode 100644
index 8b02f8a6..00000000
--- a/src/User/Register/styles.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-#user-register {
- ion-toolbar {
- position: fixed;
- --background: transparent;
-
- ion-back-button {
- color: var(--ion-color-light-contrast);
- }
- }
-
- ion-content {
- --padding-top: 40px; // header
- }
-
- ion-content {
- ion-button ion-icon {
- color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
- }
-
- h1 {
- text-align: center;
- font-size: 1.4em;
- font-weight: 500;
- margin-bottom: 50px;
- }
-
- .terms-info-text {
- display: block;
- padding: 20px 20px 10px;
- text-align: center;
- font-size: 0.85em;
- color: var(--ion-color-dark);
- }
-
- ion-icon.faint {
- opacity: 0.6;
- }
-
- ion-button[type='submit'] {
- margin: 15px auto;
- width: calc(100% - 30px);
- max-width: 200px;
- margin-bottom: 60px;
- }
- }
-
- input {
- background: transparent;
- }
-}
diff --git a/src/User/Reset/Main.tsx b/src/User/Reset/Main.tsx
index b2987280..51999bb7 100644
--- a/src/User/Reset/Main.tsx
+++ b/src/User/Reset/Main.tsx
@@ -1,58 +1,53 @@
-import { FC } from 'react';
-import { IonButton, IonList } from '@ionic/react';
-import { Main, InputWithValidation } from '@flumens';
-import { personOutline } from 'ionicons/icons';
+import clsx from 'clsx';
+import { mailOutline } from 'ionicons/icons';
+import { SubmitHandler, useForm } from 'react-hook-form';
import { Trans as T } from 'react-i18next';
-import { AnySchema } from 'yup';
-import { Formik, Form } from 'formik';
+import { TypeOf } from 'zod';
+import { Main, Button } from '@flumens';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { IonIcon } from '@ionic/react';
+import { UserModel } from 'models/user';
+import ControlledInput from '../common/Components/ControlledInput';
+
+type Details = TypeOf;
type Props = {
- onSubmit: any;
- schema: AnySchema;
+ onSubmit: SubmitHandler
- Create a free account
-
+
+
+
-
- {registrationForm}
-
+
+
+ Create a free account
+
- ;
};
-const ResetMain: FC = ({ onSubmit, schema }) => {
- const resetForm = (props: any) => (
-
- );
+const ResetMain = ({ onSubmit }: Props) => {
+ const { formState, handleSubmit, control } = useForm
({
+ defaultValues: { email: '' },
+ resolver: zodResolver(UserModel.resetSchema),
+ });
return (
-
-
+
);
};
diff --git a/src/User/Reset/index.tsx b/src/User/Reset/index.tsx
index 93136157..8b9162fc 100644
--- a/src/User/Reset/index.tsx
+++ b/src/User/Reset/index.tsx
@@ -1,24 +1,22 @@
-import { FC, useContext } from 'react';
-import userModel from 'models/user';
-import { NavContext } from '@ionic/react';
+import { useContext } from 'react';
import { Trans as T } from 'react-i18next';
-import { Page, Header, device, useAlert, useLoader, useToast } from '@flumens';
+import { TypeOf } from 'zod';
+import { useToast, useLoader, Page, Header, device, useAlert } from '@flumens';
+import { NavContext } from '@ionic/react';
+import userModel, { UserModel } from 'models/user';
import Main from './Main';
-import './styles.scss';
-export type Details = {
- password: string;
- email: string;
-};
+type Details = TypeOf;
-const ResetController: FC = () => {
- const context = useContext(NavContext);
+const LoginController = () => {
+ const { navigate } = useContext(NavContext);
const alert = useAlert();
+
const toast = useToast();
const loader = useLoader();
const onSuccess = () => {
- context.navigate('/home/menu', 'root');
+ navigate('/home/menu', 'root');
};
async function onSubmit(details: Details) {
@@ -56,10 +54,10 @@ const ResetController: FC = () => {
return (
-
);
};
-export default ResetController;
+export default LoginController;
diff --git a/src/User/Reset/styles.scss b/src/User/Reset/styles.scss
deleted file mode 100644
index 81780fc0..00000000
--- a/src/User/Reset/styles.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-#user-reset {
- ion-toolbar {
- position: fixed;
- --background: transparent;
-
- ion-back-button {
- color: var(--ion-color-light-contrast);
- }
- }
-
- ion-content {
- --padding-top: 40px; // header
- }
-
- ion-content {
- h2 {
- text-align: center;
- font-size: 1em;
- font-weight: 400;
- padding: 20px 20px 40px;
- }
-
- ion-button[type='submit'] {
- margin: 15px auto;
- width: calc(100% - 30px);
- max-width: 200px;
- margin-bottom: 60px;
- }
- }
-
- input {
- background: transparent;
- }
-}
diff --git a/src/User/common/Components/ControlledInput.tsx b/src/User/common/Components/ControlledInput.tsx
new file mode 100644
index 00000000..d75ca717
--- /dev/null
+++ b/src/User/common/Components/ControlledInput.tsx
@@ -0,0 +1,21 @@
+import { Controller } from 'react-hook-form';
+import { Input, InputProps } from '@flumens';
+
+type Props = { control: any; name: string } & Partial;
+
+const ControlledInput = ({ control, name, ...props }: Props) => (
+ (
+
+ )}
+ />
+);
+
+export default ControlledInput;
diff --git a/src/User/router.jsx b/src/User/router.jsx
new file mode 100644
index 00000000..a794b1cf
--- /dev/null
+++ b/src/User/router.jsx
@@ -0,0 +1,23 @@
+import { Route } from 'react-router-dom';
+import appModel from 'models/app';
+import userModel from 'models/user';
+import Login from './Login';
+import Register from './Register';
+import Reset from './Reset';
+
+const LoginWrap = props => = ({ sample, userModel, appModel, onSelect }) => {
+const Activities = ({ sample, userModel, appModel, onSelect }: Props) => {
const toast = useToast();
const loader = useLoader();
const { t } = useTranslation();
@@ -114,6 +119,7 @@ const Activities: FC = ({ sample, userModel, appModel, onSelect }) => {
const showEmptyDataMessage = () => {
// Do nothing?
+ return null;
};
const getReport = () => {
@@ -137,11 +143,16 @@ const Activities: FC = ({ sample, userModel, appModel, onSelect }) => {
return (
<>
-
- {t(
- 'Click on the activity below which you would like to participate in.'
- )}
-
+
+ Click on the activity below which you would like to participate in.
+
+
- Enter your email address to request a password reset.
-
+
+
+
+
+
+
+ Enter your email address to request a password reset.
+
+
+
+
-
-
- );
-};
-
-export type MapCustomControlProps = {
- position: keyof typeof POSITION_CLASSES;
- containerProps?: DetailedHTMLProps<
- HTMLAttributes
- {children}
-
-
+