Browse Source

feat: frontend code for player calendar

Refs: #30
pull/51/head
Martin Bober 2 weeks ago
parent
commit
69895ca2ab
  1. 105
      app/views/players/edit.html.erb
  2. 5
      app/views/static_pages/dashboard.html.erb
  3. 3
      config/locales/dashboard/de.yml
  4. 3
      config/locales/dashboard/en.yml
  5. 7
      config/locales/players/de.yml
  6. 7
      config/locales/players/en.yml

105
app/views/players/edit.html.erb

@ -77,6 +77,40 @@
</div>
</div>
<div class="row" id="calendar">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><%=t 'player.edit.calendar' %></h3>
</div>
<div class="panel-body">
<p><%=t 'player.edit.calendar_explanation' %></p>
<p class="alert alert-danger">
<%=t 'player.edit.calendar_warning' %>
</p>
<div class="well" id="calendar_url">
</div>
<div id="copy_token_btn" class="collapsed">
<button class="btn btn-secondary" onclick="return copyToken();"><%=t 'player.edit.calendar_copy_btn' %></button>
</div>
<div id="generate_token_btn" class="collapsed">
<button class="btn btn-primary" onclick="return generateToken();"><%=t 'player.edit.calendar_generate_btn' %></button>
</div>
<div id="delete_token_btn" class="collapsed">
<button class="btn btn-danger" onclick="return deleteToken();"><%=t 'player.edit.calendar_delete_btn' %></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<%= f.submit t('player.edit.save_button'), class: 'btn btn-primary' %>
@ -89,6 +123,8 @@
<!--suppress JSUnusedLocalSymbols -->
<script>
let me = undefined;
let calendar_url = undefined;
var markdown_converter = new showdown.Converter();
var markdown_input = document.getElementById("player_profile_text");
var markdown_preview = document.getElementById("preview");
@ -107,4 +143,73 @@
systems.experienced_editor = new PlayerRpgSystemsEditor(systems, document.getElementById('experienced_editor'), 'experienced');
systems.interested_editor = new PlayerRpgSystemsEditor(systems, document.getElementById('interested_editor'), 'interested');
var csrfToken = '<%= form_authenticity_token.to_s %>';
$('#generate_token_btn').collapse();
$('#delete_token_btn').collapse();
function setCalendarUrl(playerOwnModel) {
if (playerOwnModel) {
let token = playerOwnModel['calendar_token']
if (token) {
calendar_url = window.location.origin + '/api/1.0/players/1/calendar?token=' + token
$('#generate_token_btn').collapse('hide');
$('#delete_token_btn').collapse('show');
$('#copy_token_btn').collapse('show');
} else {
calendar_url = null;
$('#generate_token_btn').collapse('show');
$('#delete_token_btn').collapse('hide');
$('#copy_token_btn').collapse('hide');
}
document.getElementById('calendar_url').innerText = calendar_url;
} else {
$('#generate_token_btn').collapse('hide');
$('#delete_token_btn').collapse('hide');
$('#copy_token_btn').collapse('hide');
document.getElementById('calendar_url').innerText = "...";
}
}
setCalendarUrl();
function generateToken() {
setCalendarUrl();
let r = new XMLHttpRequest();
r.open('POST', `/api/1.0/players/${me.id}/calendar`)
r.responseType = 'json';
r.onload = function() {
me = r.response;
setCalendarUrl(r.response);
};
r.send();
return false;
}
function deleteToken() {
if (!confirm("<%=t 'player.edit.calendar_delete_confirmation' %>")) return false;
setCalendarUrl();
let r = new XMLHttpRequest();
r.open('DELETE', `/api/1.0/players/${me.id}/calendar`)
r.responseType = 'json';
r.onload = function() {
me = r.response;
setCalendarUrl(r.response);
};
r.send();
return false;
}
function copyToken() {
navigator.clipboard.writeText(calendar_url);
return false;
}
let r = new XMLHttpRequest();
r.open('GET', "/api/1.0/players/me")
r.responseType = 'json';
r.onload = function() {
me = r.response;
setCalendarUrl(r.response);
};
r.send();
</script>

5
app/views/static_pages/dashboard.html.erb

@ -195,6 +195,11 @@
<% end %>
</tbody>
</table>
<% unless current_player.calendar_token.present? %>
<div class="panel-footer">
<%=link_to t('dashboard.share_calendar'), edit_player_path(current_player, anchor: 'calendar')%>
</div>
<% end %>
</div>
</div>
</div>

3
config/locales/dashboard/de.yml

@ -17,4 +17,5 @@ de:
name: "Name"
announcements:
title: "Neuigkeiten von aus der Pen&PaperBox"
view_all: "Alle anzeigen…"
view_all: "Alle anzeigen…"
share_calendar: "Kalender freigeben"

3
config/locales/dashboard/en.yml

@ -17,4 +17,5 @@ en:
name: "Name"
announcements:
title: "News about the Pen&PaperBox"
view_all: "View all…"
view_all: "View all…"
share_calendar: "Share your calendar"

7
config/locales/players/de.yml

@ -89,6 +89,13 @@ de:
experienced_systems: "Mit welchen Rollenspiel-Systemen hast du Erfahrung?"
interested_systems: "Mit welchen Rollenspiel-Systemen würdest du gerne Erfahrung sammeln?"
password_hint: "Nur ausfüllen, wenn du dein Passwort ändern möchtest"
calendar: "Dein persönlicher Kalender"
calendar_explanation: "Du kannst einen Persönlichen Kalendar per URL freigeben und damit z.B. in deinen Google Calendar importieren."
calendar_warning: "Achtung: Jeder, der diesen Link kennt (oder errät) kann deinen Kalendar einsehen."
calendar_copy_btn: "In Zwischenablage kopieren"
calendar_generate_btn: "Freigabe-URL generieren"
calendar_delete_btn: "Freigabe aufheben"
calendar_delete_confirmation: "Achtung, der Freigabe-Link wird permanent gelöscht. Du kannst dir jederzeit einen neuen Link generieren, musst diesen dann aber in deinem Kalender-Tool wieder neu einrichten. Wirklich löschen?"
reset_password:
title: "Passwort zurücksetzen"
submit_button: "Passwort zurücksetzen"

7
config/locales/players/en.yml

@ -91,6 +91,13 @@ en:
experienced_systems: "In which role-playing systems are you experienced?"
interested_systems: "With which role-playing systems would you like to gain experience?"
password_hint: "Only fill out when you want to change your password."
calendar: "Your personal calendar"
calendar_explanation: "You can share your personal calendar via URL to import it in other programs such as Google Calendar."
calendar_warning: "Warning: Everyone that knows or guesses this URL has access to your calendar."
calendar_copy_btn: "Copy to clipboard"
calendar_generate_btn: "Generate URL"
calendar_delete_btn: "Delete URL"
calendar_delete_confirmation: "Attention: Your calendar URL will be permanently deleted. You can create another URL any time but you will have to update the URL in all programs where you are using the URL. Do you really want to delete this URL?"
reset_password:
title: "Reset password"
submit_button: "Reset password"

Loading…
Cancel
Save