Neighbourhood.omg.lol/Components/NewStatusDialog.razor

87 lines
2.9 KiB
Text

@inject IJSRuntime JS
@inject State State
<div class="overlay" data-ui="#@id"></div>
<dialog id="@id">
<h5>Share your status</h5>
<div class="row">
<div class="min square extra">
<button class="transparent square extra no-margin">
<object id="status-emoji" class="large emoji @(statusEmoji == null ? "animated" : string.Empty)" data-emoji="@(statusEmoji ?? "🫥")">@(statusEmoji ?? "🫥")</object>
<menu class="no-wrap">
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
<emoji-picker emoji-version="15.1"></emoji-picker>
<script>
document.querySelector('emoji-picker')
.addEventListener('emoji-click', event => {
document.getElementById('status-emoji').setAttribute('data-emoji', event.detail.unicode)
const input = document.getElementById('status-emoji-input')
input.value = event.detail.unicode
var event = new Event('change');
input.dispatchEvent(event);
})
</script>
</menu>
</button>
</div>
<div class="field textarea border max">
<InputTextArea @bind-Value="statusContent"></InputTextArea>
</div>
</div>
<nav class="right-align no-space">
@if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false) {
<label class="checkbox">
<InputCheckbox @bind-Value="postToMastodon"></InputCheckbox>
<span>Post this to Mastodon</span>
</label>
}
<InputText id="status-emoji-input" class="invisible" @bind-Value="statusEmoji"></InputText>
<button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
<button @onclick="PostStatus" disabled="@loading">
@if (loading) {
<span>Saving...</span>
}
else {
<i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
}
</button>
</nav>
</dialog>
@code {
private string statusContent = string.Empty;
private string? statusEmoji = null;
private bool postToMastodon = true;
private bool loading = false;
[Parameter]
public string id { get; set; }
public async Task PostStatus() {
await JS.InvokeVoidAsync("console.log", "hey from post status");
StatusPost post = new StatusPost
{
Emoji = statusEmoji,
Content = statusContent
};
if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false){
post.SkipMastodonPost = !postToMastodon;
}
loading = true;
InvokeAsync(StateHasChanged);
RestService api = new RestService();
var result = await api.StatusPost(State.SelectedAddressName, post);
if(result != null){
State.RefreshStatuses().ContinueWith(t => InvokeAsync(StateHasChanged));
}
await JS.InvokeVoidAsync("ui", "#" + id);
statusContent = string.Empty;
statusEmoji = null;
postToMastodon = true;
loading = false;
}
}