mirror of
https://github.com/tulir/gomuks.git
synced 2025-04-20 18:43:41 -05:00
web/settings: show every layer of settings objects
This commit is contained in:
parent
216d16dccb
commit
1041ebc232
3 changed files with 37 additions and 5 deletions
|
@ -3,10 +3,14 @@ div.settings-view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
h2, h3 {
|
h2, h3, h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary > h3, summary > h4 {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
|
|
|
@ -176,9 +176,37 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const AppliedSettingsView = ({ room }: SettingsViewProps) => {
|
||||||
|
const client = use(ClientContext)!
|
||||||
|
|
||||||
|
return <div className="applied-settings">
|
||||||
|
<h3>Raw settings data</h3>
|
||||||
|
<details>
|
||||||
|
<summary><h4>Applied settings in this room</h4></summary>
|
||||||
|
<JSONView data={room.preferences}/>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary><h4>Global account settings</h4></summary>
|
||||||
|
<JSONView data={client.store.serverPreferenceCache}/>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary><h4>Global local settings</h4></summary>
|
||||||
|
<JSONView data={client.store.localPreferenceCache}/>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary><h4>Room account settings</h4></summary>
|
||||||
|
<JSONView data={room.serverPreferenceCache}/>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary><h4>Room local settings</h4></summary>
|
||||||
|
<JSONView data={room.localPreferenceCache}/>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
const SettingsView = ({ room }: SettingsViewProps) => {
|
const SettingsView = ({ room }: SettingsViewProps) => {
|
||||||
const client = use(ClientContext)!
|
const client = use(ClientContext)!
|
||||||
const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined)=> {
|
const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => {
|
||||||
if (context === PreferenceContext.Account) {
|
if (context === PreferenceContext.Account) {
|
||||||
client.rpc.setAccountData("fi.mau.gomuks.preferences", {
|
client.rpc.setAccountData("fi.mau.gomuks.preferences", {
|
||||||
...client.store.serverPreferenceCache,
|
...client.store.serverPreferenceCache,
|
||||||
|
@ -236,7 +264,7 @@ const SettingsView = ({ room }: SettingsViewProps) => {
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<CustomCSSInput setPref={setPref} room={room} />
|
<CustomCSSInput setPref={setPref} room={room} />
|
||||||
<JSONView data={room.preferences} />
|
<AppliedSettingsView room={room} />
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -54,9 +54,9 @@ function renderJSONValue(data: unknown, collapsed: boolean) {
|
||||||
}
|
}
|
||||||
return <ul className="json-object-children">
|
return <ul className="json-object-children">
|
||||||
{entries.map(([key, value], index, arr) =>
|
{entries.map(([key, value], index, arr) =>
|
||||||
<li key={key} className="json-object-entry">
|
value !== undefined ? <li key={key} className="json-object-entry">
|
||||||
<JSONValueWithKey data={value} objectKey={key} trailingComma={index < arr.length - 1}/>
|
<JSONValueWithKey data={value} objectKey={key} trailingComma={index < arr.length - 1}/>
|
||||||
</li>)}
|
</li> : null)}
|
||||||
</ul>
|
</ul>
|
||||||
}
|
}
|
||||||
case "string":
|
case "string":
|
||||||
|
|
Loading…
Add table
Reference in a new issue