1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import axios from "axios";
import { useContext, useState } from "react";
import { BackendURL } from "../Config";
import { LanguageContext } from "../Locales/Context";
import { GetLocalizedString } from "../Locales/Locales";
import { AllowedLanguages } from "../Locales/Context";
import { RangedWeapon } from "../Models/RangedWeapon";
import { AuthContext } from "../Authentication/ContextProvider";
import { User } from "../Authentication/Models";
const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
function WeaponsIndex() {
const lang = useContext(LanguageContext);
var user = useContext(AuthContext);
const [rangedWeapons, setRangedWeapons] = useState<RangedWeapon[] | null>(null);
useState(() => {
getRangedWeapons().then(data => setRangedWeapons(data));
});
return (
<div className="WeaponsDiv">
<span>
<h1> {GetLocalizedString("Weapons index", lang)} </h1>
</span>
<h2> {GetLocalizedString("Ranged weapons", lang)} </h2>
{ generatedRangedWeaponsList(rangedWeapons, lang) }
{ adminButtons(user) }
</div>
);
}
function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null, language: AllowedLanguages): any {
if (!rangedWeapons) {
return (
<div> </div>
);
}
const categorized = new Map<string, RangedWeapon[]>();
rangedWeapons.forEach(el => {
if (!categorized.has(el.WeaponType)) {
categorized.set(el.WeaponType, new Array<RangedWeapon>());
}
categorized.get(el.WeaponType)?.push(el);
});
const keys = Array.from(categorized.keys());
const list = keys.map(x => {
const elements = categorized.get(x)?.map(w => {
return (
<tr key={w.Id}>
<td> <a href={`/weapons/${w.Id}`}> {w.Name} ({GetLocalizedString(w.Origin, language)}) </a> </td>
<td> {w.Accuracy} </td>
<td> {w.Concealability} </td>
<td> {w.Avaliability} </td>
<td> {w.Damage}({w.Ammunition}) </td>
<td> {w.NumberOfShots} </td>
<td> {w.RateOfFire} </td>
<td> {w.Reliability} </td>
</tr>
)
});
return (
<tbody key={x}>
<tr>
<td colSpan={8} className="CategoryName"> {GetLocalizedString(`${x}s`, language)} </td>
</tr>
{elements}
</tbody>
);
});
return (
<table className="WeaponTable">
<colgroup>
<col width={"10%"} />
<col width={"2%"} />
<col width={"10%"} />
<col width={"10%"} />
<col width={"10%"} />
<col width={"2%"} />
<col width={"2%"} />
<col width={"10%"} />
</colgroup>
{list}
</table>
);
}
async function getRangedWeapons(): Promise<RangedWeapon[]> {
try {
const {data, status} = await axios.get<RangedWeapon[]>(
RangedWeaponsURL,
{
headers: { Accept: "application/json" }
}
);
if (status != 200) {
return new Array<RangedWeapon>();
}
return data;
} catch (err) {
console.log(`Failed to get ranged weapons: ${err}`);
return new Array<RangedWeapon>();
}
}
function adminButtons(user: User | null) {
if (!user || user.Role != "editor") {
return (<p></p>);
} else {
return (
<div>
<a href="/weapons/new/edit"> New ranged weapon </a>
</div>
)
}
}
export default WeaponsIndex;
|
