@fortawesome/free-solid-svg-icons#faArrowDown TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faArrowDown.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BuffClassRelationOverwrite.tsx From apps with MIT License | 6 votes |
|
OverwriteIcon = ({ overwriteType }: { overwriteType: Buff.ClassRelationOverwriteType }) => {
switch (overwriteType) {
case Buff.ClassRelationOverwriteType.OVERWRITE_MORE_THAN_TARGET:
return <FontAwesomeIcon icon={faArrowUp} title="OVERWRITE_MORE_THAN_TARGET" />;
case Buff.ClassRelationOverwriteType.OVERWRITE_LESS_THAN_TARGET:
return <FontAwesomeIcon icon={faArrowDown} title="OVERWRITE_LESS_THAN_TARGET" />;
default:
return <></>;
}
}
Example #2
| Source File: package-detailed.component.ts From msfs-community-downloader with GNU Affero General Public License v3.0 | 5 votes |
|
faArrowDown = faArrowDown;
Example #3
| Source File: package-mini.component.ts From msfs-community-downloader with GNU Affero General Public License v3.0 | 5 votes |
|
faArrowDown = faArrowDown;
Example #4
| Source File: remote-package.component.ts From msfs-community-downloader with GNU Affero General Public License v3.0 | 5 votes |
|
faArrowDown = faArrowDown;
Example #5
| Source File: icon.service.ts From WowUp with GNU General Public License v3.0 | 5 votes |
|
public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
this.addSvg(faAngleDoubleDown);
this.addSvg(faArrowUp);
this.addSvg(faArrowDown);
this.addSvg(faSyncAlt);
this.addSvg(faTimes);
this.addSvg(faExternalLinkAlt);
this.addSvg(faQuestionCircle);
this.addSvg(faPlay);
this.addSvg(faClock);
this.addSvg(faBug);
this.addSvg(faLink);
this.addSvg(faDiscord);
this.addSvg(faGithub);
this.addSvg(faInfoCircle);
this.addSvg(faCodeBranch);
this.addSvg(faCaretDown);
this.addSvg(faExclamationTriangle);
this.addSvg(faCode);
this.addSvg(faPatreon);
this.addSvg(faCoins);
this.addSvg(faCompressArrowsAlt);
this.addSvg(faPencilAlt);
this.addSvg(faCheckCircle);
this.addSvg(faDiceD6);
this.addSvg(faSearch);
this.addSvg(faInfoCircle);
this.addSvg(faNewspaper);
this.addSvg(faCog);
this.addSvg(faAngleUp);
this.addSvg(faAngleDown);
this.addSvg(faChevronRight);
this.addSvg(faUserCircle);
this.addSvg(faEllipsisV);
this.addSvg(faCopy);
this.addSvg(farCheckCircle);
this.addSvg(faExclamation);
this.addSvg(faTrash);
this.addSvg(faHistory);
this.addSvg(faCaretSquareRight);
this.addSvg(faCaretSquareLeft);
this.addSvg(faMinimize);
this.addSvg(faUpRightFromSquare);
}
Example #6
| Source File: MeetingCard.tsx From TutorBase with MIT License | 4 votes |
|
export function MeetingCard(props: IProps) {
let { appt } = props;
let cardType = appt.confirmed ? "upcoming-card" : "pending-card";
let cardStatus = appt.confirmed ? "Upcoming" : "Pending";
let [modalOpen, setModalOpen] = useState(false);
let [cardExpanded, toggleCardExpansion] = useState<boolean>(false);
let [meetingLink, setMeetingLink] = useState(appt.link !== null ? appt.link! : "");
let [loading, setLoading] = useState(false);
let [check, setCheck] = useState(false);
let [err, setErr] = useState(false);
let [clientData, setClientData] = useState<User>({
_id: "",
profile_img: "",
phone: "",
email: "",
first_name: "",
last_name: "",
});
function setMeetingLinkChange(link: React.FormEvent<HTMLInputElement>) {
setMeetingLink(link.currentTarget.value);
}
async function updateMeetingLink() {
setLoading(true);
try {
let res = await api.SetMeetingLink(appt.appt_id, meetingLink);
setLoading(false);
if (res.status === 200) {
setCheck(true);
}
}
catch {
setLoading(false);
setErr(true);
}
//setModalOpen(!modalOpen);
}
let [tutorFirstName, setTutorFirstName] = useState("");
let [tutorLastName, setTutorLastName] = useState("");
const confirmAppt = async () => {
await api.ConfirmAppointment(appt.appt_id);
}
useEffect(() => {
const getTutor = async () => {
let tutor = (await api.GetTutorById(appt.tutor_id));
setTutorFirstName(tutor.data[0]?.first_name ?? "Unknown");
setTutorLastName(tutor.data[0]?.last_name ?? "Unknown");
}
getTutor();
}, []);
// Time checks for different card types
if (!IsFutureDate(appt.start_time) && appt.confirmed){
cardType = "completed-card";
cardStatus = "Completed";
}
if (!IsFutureDate(appt.start_time) && !appt.confirmed){
cardType = "denied-card";
cardStatus = "Denied";
}
if (IsFutureDate(appt.start_time) && props.includePrevious) {
return <></>
}
if (!IsFutureDate(appt.start_time) && !props.includePrevious) {
return <></>
}
// Card creation
let name = CapitalizeFirstLetter(tutorFirstName + " " + tutorLastName);
let location = CapitalizeFirstLetter(appt.location);
let date_time = BreakDownTime(appt.start_time);
// Card tag setup
let cardTag = <div className={"card-status"}>{cardStatus}</div>;
if (cardStatus === "Pending" && props.isTutor) {
cardTag = (
<>
<div className={"card-icon"}>
<Button color="success" onClick={() => confirmAppt()}>
<FontAwesomeIcon icon={faCheck} />
</Button>
</div>
<div className={"card-status"}>
{cardStatus}
</div>
</>
);
}
// Card details
let upperCardContent = (
<>
<div className={"card-name"}>{name}</div>
<div className={"card-location"}>{location}</div>
<div className={"card-time"}>{date_time[0] + " at " + date_time[1]}</div>
</>
);
// Card structure
let card = (
<CompressedCard
onClick={() => { toggleCardExpansion(!cardExpanded) }}
className={cardType}
>
<div className={"card-container-start"}>
{upperCardContent}
</div>
<div className={"card-container-end"}>
{cardStatus === "Completed"
? <FeedbackForm apptTutorId={appt.tutor_id} />
: <></>}
{cardTag}
<Button
color="none"
onClick={(e) => {
toggleCardExpansion(!cardExpanded)
}} >
<FontAwesomeIcon
icon={faArrowDown}
/>
</Button>
</div>
</CompressedCard>
);
if(cardExpanded) {
card = (
<ExpandedCard
onClick={() => { toggleCardExpansion(!cardExpanded) }}
className={cardType}
>
<div className={"card-container-start-expanded"}>{upperCardContent}</div>
<div className={"card-container-end-expanded"}>
{cardStatus === "Completed" ? <FeedbackForm apptTutorId={appt.tutor_id} /> : <></>}
{cardTag}
<Button
color="none"
onClick={(e) => {
toggleCardExpansion(!cardExpanded)
}} >
<FontAwesomeIcon
icon={faArrowUp}
/>
</Button>
</div>
<hr style={{width: '100%', backgroundColor: 'black', margin: '0 0.5em'}}/>
<div className={"card-container-item"}>
{!appt.notes || appt.notes === "" ? ""
: "Client Notes: "
}
</div>
<div className={"break"}></div>
<div className={"client-notes"}>{appt.notes}</div>
<div className={"break"}></div>
{ props.isTutor ?
<div>
<div className={"client-notes"}>
<Button
color="danger"
onClick={(e) => {
setModalOpen(!modalOpen);
e.stopPropagation();
}}
>
Add Zoom/Webex meeting link
</Button>
<Modal isOpen={modalOpen}>
<ModalHeader toggle={function noRefCheck(){}}>
Add Tutoring Meeting Link
</ModalHeader>
<ModalBody>
Link:
<Input onChange={setMeetingLinkChange} value={meetingLink}>
</Input>
</ModalBody>
<ModalFooter>
<Button
color={check ? "success": err ? "danger" : "primary"}
onClick={updateMeetingLink}
>
{loading ? (<Spinner />)
: check ? <FontAwesomeIcon icon={faCheck}/>
: err ? <div>Error<FontAwesomeIcon icon={faTimes}/></div>
: "Save"}
</Button>
{' '}
<Button onClick={() => setModalOpen(!modalOpen)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
</div>
: <div>{meetingLink === "" ? "" :
(<div>
<div className={"card-container-item "}>
Meeting Link:
</div>
<div className={"client-notes"}><a href={meetingLink} target="new">{meetingLink}</a></div>
</div>)
}
</div>
}
</ExpandedCard>
);
}
return <>{card}</>;
}
Example #7
| Source File: DataVisualization.tsx From TutorBase with MIT License | 4 votes |
|
DataVisualization = () => {
const [dropdownLabel2, setDropdownLabel2] = useState("All Time");
const [dropdownOpen, setDropdownOpen] = useState(false);
const [dropdownOpen2, setDropdownOpen2] = useState(false);
const [dropdownOpen3, setDropdownOpen3] = useState(false);
const [dateRange, setDateRange] = useState(new Date(2020,0,0));
const [course, setCourse] = useState("All Courses");
const [courses, setCourses] = useState(new Array<string>());
const [appointments, setAppointments] = useState(0);
const [hours, setHours] = useState(0);
const [earnings, setEarnings] = useState(0);
const [chart, setChart] = useState(0);
const [meetingsMap, setMeetingsMap] = useState(new Map<number,number>());
const [earningsMap, setEarningsMap] = useState(new Map<number,number>());
const toggle = () => setDropdownOpen(prevState => !prevState);
const toggle2 = () => setDropdownOpen2(prevState => !prevState);
const toggle3 = () => setDropdownOpen3(prevState => !prevState);
let tutor = useSelector(selectClientData);
let tutorID = tutor.clientId;
useEffect(() => {
GetTutoringHours(course, tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
},[]);
let coursesDropdowns:Array<ReactElement> = [];
coursesDropdowns.push(<DropdownItem onClick={() => {
setCourse("All Courses");
GetTutoringHours("All Courses", tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
}}>
All Courses
</DropdownItem>);
for (let i = 0; i < courses.length; i++) {
coursesDropdowns.push(<DropdownItem onClick={() => {
setCourse(courses[i]);
GetTutoringHours(courses[i], tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
}}>
{courses[i]}
</DropdownItem>);
}
return (
<Container fluid className="background" style={{marginBottom:'10em'}}>
<hr></hr>
<Row xs="2" className="parent">
</Row>
<div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Appointments</CardTitle>
<CardText>
<h1>
<CountUp
end={appointments}
useEasing={true}
duration={3.5}
/>
</h1>
</CardText>
</Card>
</div>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Hours Tutored</CardTitle>
<CardText>
<h1>
<CountUp
end={hours}
useEasing={true}
duration={4}
/>
</h1>
</CardText>
</Card>
</div>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Earnings</CardTitle>
<CardText>
<h1>
<CountUp
decimals={2}
prefix="$"
end={earnings}
useEasing={true}
duration={4}/>
</h1>
</CardText>
</Card>
</div>
</div>
<div style={{display:'flex', flexDirection:'row'}}>
<Card body>
<CardTitle tag="h5">
<div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
<div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
{(chart === 0) ? "Calendar" : (chart === 1 ? "Total Hours" : "Total Earnings")}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Tutor Data</DropdownItem>
<DropdownItem onClick={() => setChart(0)}>Calendar</DropdownItem>
<DropdownItem onClick={() => setChart(1)}>Total Hours</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={() => setChart(2)}>Total Earnings</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
{ chart != 0 ?
<div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen2} toggle={toggle2} style={{alignSelf:'right'}}>
<DropdownToggle caret>
{dropdownLabel2}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Date Range</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setFullYear(2020);
date.setMonth(0);
date.setDate(0);
setDateRange(date);
setDropdownLabel2("All Time");
}}>
All Time
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setFullYear(date.getFullYear() - 1);
setDateRange(date);
setDropdownLabel2("1Y");
}}>1Y
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setMonth(date.getMonth() - 6);
setDateRange(date);
setDropdownLabel2("6M");
}}>6M
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setMonth(date.getMonth() - 1);
setDateRange(date);
setDropdownLabel2("1M");
}}>1M
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
: <div></div>}
<div style={{display:'flex', flexDirection:'column', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen3} toggle={toggle3} style={{alignSelf:'right'}}>
<DropdownToggle caret>
{course}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Filter by Course</DropdownItem>
{coursesDropdowns}
</DropdownMenu>
</Dropdown>
</div>
</div>
</CardTitle>
<CardText>
{chart == 0 ?
<TutorHeatmap dateMap={meetingsMap} />
: (chart == 1 ? <LineGraph dateMap={meetingsMap}
fromTime={dateRange}
isHours={true}/>
:<LineGraph dateMap={earningsMap}
fromTime={dateRange}
isHours={false}/>
)}
</CardText>
</Card>
</div>
</Container>
);
}
