import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
import moment from 'moment-timezone';
import QRCode from 'react-qr-code';
import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js';
import { LoginForm, SignupForm } from './LoginSignup.js';
import { AccountForm } from './Account.js';
import { SignForm } from './Sign.js';
import { PayPalSubscribeDeal } from './PayPal.js';
function MemberInfo(props) {
const user = props.user;
const member = user.member;
const lastTrans = user.transactions?.slice(0,3);
const lastTrain = user.training?.sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).slice(0,3);
const lastCard = user.cards?.sort((a, b) => a.last_seen < b.last_seen)[0];
return (
{member.preferred_name} {member.last_name}
{member.is_allowed_entry ?
You are allowed entry into Protospace ✅
:
You are not allowed entry into Protospace ❌
}
Status:
{member.status || 'Unknown'}
Expiry:
{member.expire_date ? moment(member.expire_date).format('ll') : 'Unknown'}
{!member.photo_medium &&
Welcome, new member!
Click here
to view your application forms.
}
{!!lastTrans.length && !member.photo_medium &&
Please set a member photo!
Visit the account settings page to set one.
}
{!lastTrans.length &&
Create a ${user.member.monthly_fees} / month subscription, get your first three months for the price of two:
Click "Checkout as Guest" if you don't have a PayPal account.
}
{lastTrain.length ?
lastTrain.map(x =>
{moment(x.session.datetime).tz('America/Edmonton').format('ll')}
{x.session.course_data.name}
)
:
None, please sign up for an Orientation
}
{user.training.length > 3 && [more]}
{lastTrans.length ?
lastTrans.map(x =>
{moment(x.date).format('ll')}
{x.account_type}
${x.amount}
)
:
None
}
{user.transactions.length > 3 && [more]}
Application:
{member.application_date ? moment(member.application_date).format('ll') : 'Unknown'}
Start:
{member.current_start_date ? moment(member.current_start_date).format('ll') : 'Unknown'}
Vetted:
{member.vetted_date ? moment(member.vetted_date).format('ll') : 'Not vetted'}
Monthly dues:
${member.monthly_fees || 'Unknown'}.00
Last scan:
{lastCard && lastCard.last_seen ?
lastCard.last_seen > '2021-11-14T02:01:35.415685Z' ?
moment.utc(lastCard.last_seen).tz('America/Edmonton').format('lll')
:
moment.utc(lastCard.last_seen).tz('America/Edmonton').format('ll')
:
'Unknown'
}
{user.cards.length > 1 && [more]}
{member.photo_medium &&
View application forms
}
);
};
export function Home(props) {
const { user, token } = props;
const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false')));
const [refreshCount, refreshStats] = useReducer(x => x + 1, 0);
const location = useLocation();
useEffect(() => {
requester('/stats/', 'GET', token)
.then(res => {
setStats(res);
localStorage.setItem('stats', JSON.stringify(res));
})
.catch(err => {
console.log(err);
setStats(false);
});
}, [refreshCount, token]);
const getStat = (x) => stats && stats[x] ? stats[x] : 'Unknown';
const getZeroStat = (x) => stats && stats[x] ? stats[x] : '0';
const getDateStat = (x) => stats && stats[x] ? moment.utc(stats[x]).tz('America/Edmonton').format('ll') : 'Unknown';
const mcPlayers = stats && stats['minecraft_players'] ? stats['minecraft_players'] : [];
const mumbleUsers = stats && stats['mumble_users'] ? stats['mumble_users'] : [];
const getTrackStat = (x) => stats && stats.track && stats.track[x] ? moment().unix() - stats.track[x]['time'] > 60 ? 'Free' : 'In Use' : 'Unknown';
const getTrackLast = (x) => stats && stats.track && stats.track[x] ? moment.unix(stats.track[x]['time']).tz('America/Edmonton').format('llll') : 'Unknown';
const getTrackAgo = (x) => stats && stats.track && stats.track[x] ? moment.unix(stats.track[x]['time']).tz('America/Edmonton').fromNow() : '';
const getTrackName = (x) => stats && stats.track && stats.track[x] && stats.track[x]['first_name'] ? stats.track[x]['first_name'] : 'Unknown';
const alarmStat = () => stats && stats.alarm && moment().unix() - stats.alarm['time'] < 300 ? stats.alarm['data'] < 270 ? 'Armed' : 'Disarmed' : 'Unknown';
const doorOpenStat = () => alarmStat() == 'Disarmed' && stats.alarm['data'] > 360 ? ', door open' : '';
const show_signup = stats?.at_protospace;
return (
{user ?
user.member.set_details ?
:
:
}
{user?.member?.set_details !== false &&
Main Website
Protospace Wiki — [register]
Protospace Forum — [register]
{!!user && Google Drive
}
{!!user && isAdmin(user) && Property Management Portal
}
refreshStats()} />
Next member meeting: {getDateStat('next_meeting')}
Next monthly clean: {getDateStat('next_clean')}
Member count: {getStat('member_count')} [more]
Green members: {getStat('green_count')}
Card scans today: {getZeroStat('card_scans')}
Minecraft players: {mcPlayers.length} {mcPlayers.length > 5 && '🔥'}
Server IP:
games.protospace.ca
Players:
{mcPlayers.length ? mcPlayers.map(x => {x}
) : 'None'}
} trigger={[more]} />
{' '}[map]
{stats && stats.hasOwnProperty('mumble_users') &&
Mumble users: {mumbleUsers.length}
Server IP:
mumble.protospace.ca
Users:
{mumbleUsers.length ? mumbleUsers.map(x => {x}
) : 'None'}
} trigger={[more]} />
}
Trotec availability: {getTrackStat('TROTECS300')}
Last use:
{getTrackLast('TROTECS300')}
{getTrackAgo('TROTECS300')}
by {getTrackName('TROTECS300')}
} trigger={[more]} />
Rabbit availability: {getTrackStat('FRICKIN-LASER')}
Last use:
{getTrackLast('FRICKIN-LASER')}
{getTrackAgo('FRICKIN-LASER')}
by {getTrackName('FRICKIN-LASER')}
} trigger={[more]} />
Precix availability: {getTrackStat('CNC-PRECIX')}
Last use:
{getTrackLast('CNC-PRECIX')}
{getTrackAgo('CNC-PRECIX')}
by {getTrackName('CNC-PRECIX')}
} trigger={[more]} />
{user &&
Alarm status: {alarmStat()}{doorOpenStat()}
}
}
);
};