president/templates/keyboard.html.ep

417 lines
20 KiB
Plaintext
Executable File

<span class="typewriter" style="">
<% if ($toggle eq 'keyboard') { %>
<br>
<span class="keyboard bc" id="keyboard" style="background-color:<%= $config->{$device}->{'keyboard'}->{'background_colour'} %>;">
<canvas id="keyboard_screen" style="height:70px;width:350px;background-color:#bbd47b;"></canvas><br>
<div id="calculator_walkman" style="overflow-x:scroll;width:400px;height:70px">
<% foreach my $p (@{$pseudonyms}) { %>
<button class="medium_thumb" style="width:60px">
<img class="return_key special keyboard_button little_thumb" style="vertical-align:bottom;width:50px;background-color:<%= $config->{$device}->{'pseudonym'}->{'background_colour'} %>;" src="<%= $p->{'icon'} %>" key="<%= $p->{'name'} %>" type="<%= $p->{'type'} %>">
</button>
<% } %>
</div>
<span class="magic_wands keyboard_cauldron" style="width:100%">
<% foreach my $w ( keys %{$gb::ws->{'server'}} ) { %>
<% if ($w ne $browser_tab_id) { %>
<img destination="<%= $w %>" class="keyboard_destination magic_wand tiny_thumb" style="background-color:navy;" src="/images/make believe/key.png">
<% } %>
<% } %>
</span>
<br>
<% foreach my $k (qw/1 2 3 4 5 6 7 8 9 0 backspace/) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<br>
<% foreach my $k (qw/q w e r t y u i o p/) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<button class="keyboard_button" key="clear">C</button>
<br>
&nbsp; &nbsp;
<% foreach my $k (qw/a s d f g h j k l ; '/) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<br>
<button class="shift_key keyboard_button" key="shift">Sh</button>
<% foreach my $k (qw#z x c v b n m#) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{','} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{','} %>" type="image/png"></img>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{'.'} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{'.'} %>" type="image/png"></img>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{'/'} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button" key="<%= $keys->{'/'} %>" type="image/png"></img>
<br>
<button class="ctrl_key keyboard_button" key="ctrl">ctrl</button>
<button class="special keyboard_button" key="fn">fn</button>
<button class="space_bar keyboard_button" key=" ">&nbsp; Space &nbsp;</button><br>
</span>
<% } %>
<% if ($toggle eq 'calculator') { %>
<span class="keyboard bc" id="calculator" style="background-color:<%= $config->{$device}->{'calculator'}->{'background_colour'} %>;">
<canvas id="calculator_screen" style="width:370px;height:70px;background-color:#bbd47b;"></canvas><br>
<img class="magic_wand tiny_thumb" src="/images/make believe/key.png">
<span class="magic_wands keyboard_cauldron">
<% foreach my $w ( keys %{$gb::ws->{'server'}} ) { %>
<% if ($w ne $browser_tab_id) { %>
<img destination="<%= $w %>" class="keyboard_destination magic_wand tiny_thumb" style="background-color:navy;" src="/images/make believe/key.png">
<% } %>
<% } %>
</span>
<br>
<div id="calculator_keyboard" style="float:left;width:50%">
<button class="keyboard_button calculator_button" key="clear">C</button>
<% foreach my $k (qw# ( ) #) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key=" <%= $keys->{$k} %> " type="image/png"></img>
<% } %>
<button class="operator keyboard_button calculator_button" key=" plmi ">&#177;</button>
<br>
<button class="keyboard_button calculator_button" key=" / "> &#247 </button>
<% foreach my $k (qw#7 8 9#) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<br>
<button class="keyboard_button calculator_button" key=" * "> &#215; </button>
<% foreach my $k (qw# 4 5 6#) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<br>
<button class="keyboard_button calculator_button" key=" - ">-</button>
<% foreach my $k (qw#1 2 3#) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<br>
<button class="keyboard_button calculator_button" key=" + ">+</button>
<% foreach my $k (qw# 0 . #) { %>
<img src="/manager/keyboard_alias?toggle=<%= $toggle %>&key=<%= $keys->{$k} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key="<%= $keys->{$k} %>" type="image/png"></img>
<% } %>
<button class="keyboard_button calculator_button" type="calc" key="calc">=</button>
<br>
<button class="keyboard_button calculator_button" type="calc" key=" to ">To</button>
<img src="/manager/keyboard_alias?toggle=calculator&key=<%= $keys->{'backspace'} %>&browser_tab_id=<%= $browser_tab_id %>" class="letter_key keyboard_button calculator_button" key="<%= $keys->{'backspace'} %>" type="image/png"></img>
</div>
<div id="calculator_calculations" style="overflow:scroll;width:48%;height:120px;float:right;">
</div>
<div id="calculator_measures" style="width:48%;height:160px;overflow:scroll;float:right;">
<% foreach my $k ( sort keys %{$measures} ) { %>
<button class="measure keyboard_button calculator_button" key="<%= $keys->{$k} %>">
<%= $k %>
</button>
<%= $measures->{$k}->{'name'} %>
<br>
<% } %>
</div>
</span>
<% } %>
<% if ($toggle eq 'remote_control') { %>
<span class="keyboard bc" id="remote_control" style="background-color:<%= $config->{$device}->{'remote_control'}->{'background_colour'} %>">
<img class="medium_thumb jonathan" id="store_toggle" src="<%= $gb::known_appts->{'resident'}->{'icon'} %>">
<img class="jonathan" src="/images/decipherable/chart.png" id="budget" style="background-color:orange;"></img>
<img id="travel_toggle" src="/images/decipherable/aeroplane.png" class="jonathan gps"></img>
<img id="relational_toggle" src="/images/make believe/strawbeery.png" class="jonathan relational">
<img id="mailbox_toggle" src="/images/decipherable/envelope.png" class="jonathan mail">
<br>
<% if ($device eq 'mobile') { %>
<img class="voice_prompt medium_thumb jonathan" src="/images/decipherable/speech to text.png" />
<img class="jonathan torch_toggle" src="/images/decipherable/nightlight.png"></img>
<img class="jonathan" src="/images/make believe/phone_sms.png" id="sms_list_check"></img>
<br>
<% } %>
<img id="music_toggle" src="/images/make believe/music.png" class="jonathan music"></img>
<img id="embedded_toggle" src="/images/decipherable/microchip.png" class="jonathan embedded"></img>
<span><img id="ticketmaker" class="jonathan little_thumb" src="/images/decipherable/ticket.png"></span>
<img id="cards_toggle" src="/images/decipherable/cards.png" class="jonathan cards">
<br>
<img class="jonathan" id="backup_now" src="/images/decipherable/diskette.png" ></img>
<img id="security_toggle" src="/images/make believe/badge.png" class="jonathan security"></img>
<img id="terminal_toggle" src="/images/decipherable/code.png" class="jonathan terminal"></img>
<img id="ide_toggle" class="jonathan ide" src="/images/make believe/monitor.png"></img>
<img class="jonathan little_thumb" id="upload" src="/images/make believe/up.png" />
<br>
<img id="image_toggle" src="/images/decipherable/gallery.png" class="jonathan gallery"></img>
<img id="synth_toggle" src="/images/decipherable/piano.png" class="jonathan synth"></img>
<img id="editor_toggle" src="/images/decipherable/love letter.png" class="jonathan editor"></img>
<img id="marker_toggle" class="jonathan marker" src="/images/decipherable/marker.png"></img>
<br>
<img class="jonathan" src="/images/decipherable/stop sign.png" id="stop_all"></img>
<img id="twirl_toggle" class="jonathan twirl" src="/images/decipherable/tetris.png"></img>
<img id="studio_toggle" src="/images/decipherable/mixer.png" class="jonathan mixer"></img>
<img class="handbook medium_thumb jonathan" id="handbook_toggle" src="/images/decipherable/handbook.png">
<img class="home medium_thumb jonathan" id="home_toggle" src="<%= $gb::known_appts->{'guest'}->{'icon'} %>">
<script>
var search = $('#search').val();
$('.take_on_me').each(function(i,v) {
console.log(v);
var link = $(v).attr('href');
var route = link.split('?');
var route = route[0] + '?search=' + search
console.log(route);
$(v).attr('href', route);
});
<br><span id="manager_file" style=""><%= $manager_file %></span>
</span>
<% } %>
<% if ($toggle eq 'controller') { %>
<span class="keyboard bc" id="controller" style="height:400px;width:550px;max-width:100%;overflow:scroll;background-color:<%= $config->{$device}->{'controller'}->{'background_colour'} %>">
<table style="background-color:yellow;border:solid 3px;" id="websocket_list">
<thead>
<th>App</th><th>Neighbours</th><th>Close</th>
</thead>
<tbody>
<% my @everything; %>
<% foreach my $sock ( @{$websockets} ) { %>
<% unless ($sock->{'app'} eq 'music' || $sock->{'app'} eq 'tab' || $sock->{'app'} eq 'server') {
push @everything, $sock;
next;
} %>
<tr style="border:solid 2px;">
<td><%= $sock->{'app'} %></td>
<td style="max-width:400px;border: 2px;">
<%= &subs::formatted_time($sock->{'connected'}) %>
<span class="neighbours" style="max-width:350px;" app="<%= $sock->{'app'} %>"></span><br>
</td>
<td><button class="heartbeating" app="<%= $sock->{'app'} %>" onClick="websocketStop('<%= $sock->{'app'} %>');">Stop</button></td>
</tr>
<% } %>
<tr>
<td>Everything</td>
<td id="everything_socket" style="width:100%;border: 2px;">
</td>
<td></td>
</tr>
<tbody>
</table>
</span>
<% } %>
<% if ($toggle eq 'delorean') { %>
<span class="keyboard bc" id="delorean" style="width: 250px;background-color:<%= $config->{$device}->{'delorean'}->{'background_colour'} %>">
<button id="i" class="now">now</button>
<button id="calculate_it">M</button>
<button id="appt_view_toggle">V</button>
<input style="width:60%" class="time_machine timed_input" id="time_machine" placeholder="Time Machine"></input><br>
<!-- here, because these templates will be linked to user's keyboards which are encoded in their pictures -->
<script>
var ago_time;
$(document).on('change', '#time_machine', function() {
var time_machine = $(this).val();
var timestamp = Date.now();
clearTimeout(ago_time);
ago_time = setTimeout(function() {
var ago = $(this).val();
$.ajax({
url: '/manager/ago',
type: 'GET',
data: { time_machine: time_machine, timestamp: timestamp },
success: function(response) {
localStorage.setItem('time_machine', time_machine );
}
});
});
});
var appt_view_toggle = sessionStorage.getItem('appt_view_toggle');
if (appt_view_toggle == 'on') { $('#appt_view_toggle').css({ 'background-color': 'green' }) }
</script>
<select id="update_frequency">
<option value="no">NOPE!</option>
<option value="1000">1s</option>
<option value="3000" selected>3s</option>
<option value="5000">5s</option>
<option value="10000">10s</option>
<option value="20000">20s</option>
<option value="30000">30s</option>
<option value="40000">40s</option>
<option value="50000">50s</option>
<option value="60000">60s</option>
<option value="70000">70s</option>
<option value="300000">5m</option>
<option value="600000">10m</option>
<option value="1200000">20m</option>
</select>
<select name="layout" id="layout">
<option value="leaderboard">Leaderboard</option>
<option value="clockface">Clockface</option>
<option value="timeline">Timeline</option>
<option value="calendar">Calendar</option>
<option value="continent">Continent</option>
<option value="narrator">Narrator</option>
</select>
<select name="sorts" id="sorts">
<option value="alphabetical">Alphabetical</option>
<option value="duration">Duration</option>
<option value="occurrences">Occurrences</option>
<option value="amount">Dollars</option>
<option value="timestamp">Timestamp</option>
<option value="server_time">Server Time</option>
</select>
<br>
<input style="max-width: 90%" type="range" id="timeshift" step=1 max=20 min=-20 /><br>
<span id="timeshift_viewer"></span><br>
<select name="scope" id="scope">
<option value="second">1s</option>
<option value="15second">15s</option>
<option value="30second">30s</option>
<option value="45second">45s</option>
<option value="minute">1m</option>
<option value="fiveminute">5 Mins</option>
<option value="tenminute">10 Mins</option>
<option value="fifteenminute">15 Mins</option>
<option value="thirtyminute">30 Mins</option>
<option value="fortyfiveminute">45 Mins</option>
<option value="hour">Hour</option>
<option value="twohour">2 Hours</option>
<option value="threehour">3 Hours</option>
<option value="sixhour">6 Hours</option>
<option value="ninehour">9 Hours</option>
<option value="twelvehour">12 Hours</option>
<option value="fifteenhour">15 Hours</option>
<option value="eighteenhour">18 Hours</option>
<option value="twentyonehour">21 Hours</option>
<option value="day">Day</option>
<option value="twoday">2 Days</option>
<option value="threeday">3 Days</option>
<option value="fourday">4 Days</option>
<option value="fiveday">5 Days</option>
<option value="sixday">6 Days</option>
<option value="week">Week</option>
<option value="twoweeks">2 Weeks</option>
<option value="threeweeks">3 Weeks</option>
<option value="moon">Moon</option>
<option value="month">Month</option>
<option value="quarter">Quarter</option>
<option value="season">Season</option>
<option value="sixmonth">6 Months</option>
<option value="ninemonth">9 Months</option>
<option value="year">Year</option>
<option value="decade">Decade</option>
<option value="century">Century</option>
<option value="millenium">Millenium</option>
<option value="era">Era</option>
</select>
<select id="timeshift_scope" name="timeshift_scope">
<option value="Mill">Millenium</option>
<option value="C">Century</option>
<option value="D">Decades</option>
<option value="y">Years</option>
<option value="M">Months</option>
<option value="w">Weeks</option>
<option value="d">Days</option>
<option value="h">Hours</option>
<option value="m" selected>Minutes</option>
<option value="s">Seconds</option>
<option value="0">No Shift</option>
</select>
<select name="filter" id="filter">
<% foreach my $m ( @gb::movements ) { %>
<option value="<%= $m %>"><%= ucfirst($m) %></option>
<% } %>
</select>
<br>
<select id="accounts" style="max-width: 50%;">
<option value="all" selected>All</option>
<% foreach my $a ( @{$accounts} ) { %>
<option value="<%= $a->{'app'} %>"><%= $a->{'formatted_name'} %></option>
<% } %>
</select>
<select id="projects" style="max-width: 50%">
<option value="all" selected>All</option>
<% foreach my $a ( @{$projects} ) { %>
<option value="<%= $a->{'app'} %>"><%= $a->{'formatted_name'} %></option>
<% } %>
</select>
<br>
<input type="checkbox" id="background_images">Background
<input type="range" id="background_images_opacity" min="0" max="1" step=".05">Opacity
<br>
<span timestamp="<%= $c->session('warranty') %>" class="time"></span>
</span>
<% } %>
<% if ($toggle eq 'walkboy') { %>
<span class="keyboard bc" id="walkboy">
<table style="background-color:<%= $config->{$device}->{'walkboy'}->{'background_colour'} %>;" id="websocket_list">
<thead>
<th></th><th>A.V.</th>
</thead>
<tbody>
<% foreach my $av ( @{$av_data} ) { %>
<% if ($av->{'deviceId'} ne 'default') { %>
<tr>
<td><% if ($av->{'icon'}) { %><img class="medium_thumb media_picker" device_id="<%= $av->{'deviceId'} %>" kind="<%= $av->{'kind'} %>" type="<%= $av->{'icon'} %>" status="off" src="/images/decipherable/<%= $av->{'icon'} %>.png"> <% } %></td>
<td><%= $av->{'label'} %></td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</span>
<script>
$('.media_picker').each(function(i,vd) {
var v = $(vd);
var type = v.attr('type');
var kind = v.attr('kind');
var device_id = v.attr('device_id');
var mp = localStorage.getItem(kind + device_id);
if (mp == 'on') { v.attr('status', 'on'); }
});
</script>
<% } %>
<% if ($toggle eq 'console') { %>
<span class="keyboard" id="console" style="display:none;align:left;border: solid 3px black;background-color:<%= $config->{$device}->{'console'}->{'background_colour'} %>;">
<span class="room">
<img class="past_life medium_thumb" direction="rew" src="/icons/prev.jpg"></img>
<img class="past_life medium_thumb" direction="load" src="/icons/play.jpg"></img>
<img class="past_life medium_thumb" direction="ff" src="/icons/next.jpg"></img>&nbsp;
<img type="button" id="new_room" class="medium_thumb" src="/icons/lymeboard/add.png">
<img class="life_direction medium_thumb" style="font-size:10px;" src="/icons/lymeboard/backspace.png" direction="forget">
<span id="life" height="56px" style="font-size:26px;" width="56px"></span>
<br>
Draw <input type="checkbox" class="" id="drawings_check">
Named <input type="checkbox" class="" id="room_check">
Wiper <input type="checkbox" class="" id="windshield_wiper">
<br>
<input type="text" class="timed_input add_something" type="room" style="width:300px;" placeholder="Room Name" id="room_name"><br>
<span id="playbook"></span><br>
</span>
</span>
<% } %>
<% if ($toggle eq 'notifications') { %>
<span class="keyboard bc" id="notifications" style="overflow:scroll; height: 50%; width: 50%; max-width: 100%; border:solid 4px; background-color:<%= $config->{$device}->{'notifications'}->{'background_colour'} %>;">
<input id="notification_search" value="<%= $notifications->{'settings'}->{'search'} %>" style="width:40%">
<select id="notification_app_select" value="<%= $notifications->{'settings'}->{'filter'} %>" style="width:40%;">
<option value="all" <% if ($notifications->{'settings'}->{'filter'} eq 'all' || $notifications->{'settings'}->{'filter'} eq '') { %>selected <% } %>>All</option>
<% foreach my $app ( sort @{$notifications->{'apps'}} ) { %>
<option value="<%= $app %>" <% if ( $app eq $notifications->{'settings'}->{'filter'} ) { %>selected <% } %>><%= &subs::format_name($app) %></option>
<% } %>
</select>
<button style="float:right;" class="notification_remove" scope="all" uuid="">X</button>
<span id="notifications_content">
<%== $notifications->{'content'} %>
</span>
</span>
<% } %>
</span>