signup and room waiting

This commit is contained in:
Josh
2018-06-07 15:52:42 -04:00
parent 56489ee6cd
commit 657feb777f
18 changed files with 191 additions and 143 deletions

View File

@ -1,10 +1,10 @@
<div class="room-section pb-2 pt-9">
<div class="container text-center">
<h1 id="main-text" class="display-3 font-weight-400">Welcome to Greenlight.</h1>
<h1 id="main-text" class="display-3 font-weight-400">Welcome to BigBlueButton.</h1>
<h4 class="text-muted">A simple front end for your BigBlueButton Open Source Web Conferencing Server.</h4>
<%= link_to "https://www.google.com", class: "p-3", target: "_blank" do %>
<%= link_to "https://www.youtube.com/watch?v=yGX3JCv7OVM&feature=youtu.be", class: "p-3", target: "_blank" do %>
<h4>Watch a tutorial on using Greenlight <i class="fe fe-play-circle"></i></h4>
<% end %>
</div>

View File

@ -1,36 +1,14 @@
<div class="room-section pb-9">
<div class="container">
<div class="row pt-9">
<div class="col-lg-12 col-sm-12">
<h4 class="text-left">You have been invited to join</h4>
<h1 class="display-3 text-left mb-3 font-weight-400"><%= @room.name %></h1>
<hr class="mt-2 float-left" style="width: 20%;">
</div>
<%= render 'shared/room_event' do %>
<%= form_for room_path, method: :post do |f| %>
<div class="input-group" style="height: 60px;">
<% if current_user %>
<%= f.submit "Join", class: "btn btn-primary px-7 main-large join-button"%>
<% else %>
<%= f.text_field :join_name, class: "form-control main-large", placeholder: "Enter your name!" %>
<span class="input-group-append">
<%= f.submit "Join", class: "btn btn-primary px-7 main-large" %>
</span>
<% end %>
</div>
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 form-inline mb-5 align-top">
<% if @room.owner.image.nil? %>
<span class="avatar"><%= @room.owner.name.first %></span>
<% else %>
<span class="avatar" style="background-image: url(<%= @room.owner.image %>)"></span>
<% end %>
<h5 class="font-weight-normal ml-4 mt-3"><%= @room.owner.name %> (Owner)</h5>
</div>
<div class="col-lg-6 col-md-4 col-sm-12">
<%= form_for room_path, method: :post do |f| %>
<div class="input-group" style="height: 60px;">
<% if current_user %>
<%= f.submit "Join", class: "btn btn-primary px-7 main-large btn-block"%>
<% else %>
<%= f.text_field :join_name, class: "form-control main-large", placeholder: "Enter your name!" %>
<span class="input-group-append">
<%= f.submit "Join", class: "btn btn-primary px-7 main-large" %>
</span>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
<% end %>

View File

@ -1,7 +1,45 @@
<p>Waiting for meeting to start...</p>
<p>You will be redirected when the meeing starts...</p>
<%= render 'shared/room_event' do %>
<div class="row">
<div class="col-9">
<h3>Oops! The meeting hasn't started yet.</h3>
<h4 class="text-muted">You will automatically join when the meeting starts.</h4>
</div>
<div class="col-3">
<div class="loader align-bottom mt-3"></div>
</div>
</div>
<% end %>
<% unless current_user %>
<p>Input a name for when the meeting starts.</p>
<%= text_field(:unauthenticated_join_name, nil) %>
<% end %>
<script>
$(document).on("turbolinks:load", function(){
App.waiting = App.cable.subscriptions.create({
channel: "WaitingChannel",
uid: $(".room-section").attr("room")
}, {
received: function(data){
if(data.action = "started"){ request_to_join_meeting(); }
}
});
});
var join_attempts = 0;
var request_to_join_meeting = function(){
$.ajax({
url: window.location.pathname,
type: 'POST',
data: {
join_name: $(".room-section").attr("join-name")
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
error: function(){
// The meeting is still booting (going slowly), retry shortly.
if(join_attempts < 4){ setTimeout(request_to_join_meeting, 5000); }
join_attempts++;
}
});
}
</script>

View File

@ -44,11 +44,10 @@
</div>
</div>
<% else %>
<button type="submit" class="btn btn-pill btn-outline-primary mx-2" data-toggle="modal" data-target="#loginModal">Login</button>
<button type="submit" class="btn btn-pill btn-outline-primary mx-2" data-toggle="modal" data-target="#signupModal">Signup</button>
<%= link_to "Login", "#loginModal", :class => "btn btn-pill btn-outline-primary mx-2", "data-toggle": "modal" %>
<%= link_to "Signup", signup_path, :class => "btn btn-pill btn-outline-primary mx-2" %>
<%= render "shared/modals/login_modal" %>
<%= render "shared/modals/signup_modal" %>
<% end %>
</div>
</div>

View File

@ -0,0 +1,26 @@
<div class="room-section pb-9" room="<%= @room.uid %>" join-name="<%= @join_name %>">
<div class="container">
<div class="row pt-9">
<div class="col-lg-12 col-sm-12">
<h4 class="text-left">You have been invited to join</h4>
<h1 class="display-3 text-left mb-3 font-weight-400"><%= @room.name %></h1>
<hr class="mt-2 float-left" style="width: 20%;">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 form-inline mb-5 align-top">
<% if @room.owner.image.nil? %>
<span class="avatar"><%= @room.owner.name.first %></span>
<% else %>
<span class="avatar" style="background-image: url(<%= @room.owner.image %>)"></span>
<% end %>
<h5 class="font-weight-normal ml-4 mt-3"><%= @room.owner.name %> (Owner)</h5>
</div>
<div class="col-lg-6 col-md-4 col-sm-12">
<%= yield %>
</div>
</div>
</div>
</div>

View File

@ -14,16 +14,17 @@
<td style="border-top: none;">
<h4 class="m-0 text-normal" style="color: #495057;"><%= room.name %></h4>
<div class="small text-muted">
<i>Last Session on <%= recording_date(room.created_at) %></i>
<% if room.sessions > 0 %>
<i>Last session on <%= recording_date(room.last_session) %></i>
<% else %>
<i>This room has no sessions, yet!</i>
<% end %>
</div>
</td>
<td class="text-right" style="border-top: none;">
<div class="item-action dropdown">
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<%= button_to root_path, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-link"></i> Copy Link
<% end %>
<%= button_to root_path, class: "dropdown-item" do %>
<i class="dropdown-icon fas fa-cog"></i> Room Settings
<% end %>

View File

@ -1,38 +0,0 @@
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content text-center">
<div class="modal-body">
<div class="card-body p-6">
<div class="card-title text-primary">
<h3>Signup</h3>
</div>
<hr class="small-rule">
<%= form_for(User.new) do |f| %>
<div class="form-group">
<%= f.label :name, "Full Name", class: "form-label text-left" %>
<%= f.text_field :name, class: "form-control", placeholder: "Full Name" %>
</div>
<div class="form-group">
<%= f.label :email, "Email", class: "form-label text-left" %>
<%= f.text_field :email, class: "form-control", placeholder: "Email" %>
</div>
<div class="form-group">
<%= f.label :password, "Password", class: "form-label text-left" %>
<%= f.password_field :password, class: "form-control", placeholder: "Password" %>
</div>
<div class="form-group">
<%= f.label :password, "Password Confirmation", class: "form-label text-left" %>
<%= f.password_field :password, class: "form-control", placeholder: "Password Confirmation" %>
</div>
<div class="form-footer">
<%= f.submit "Signup", class: "btn btn-outline-primary btn-block btn-pill" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,41 @@
<div class="container">
<div class="row mt-9">
<div class="col col-4 offset-4 mx-auto">
<div class="card">
<div class="card-header">
<h4 class="mt-2">Create an Account</h4>
</div>
<div class="card-body">
<%= form_for @user, method: :post do |f| %>
<div class="form-group">
<%= f.label "Fullname", class: "form-label" %>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-user"></i>
</span>
<%= f.text_field :name, class: "form-control", placeholder: "Fullname" %>
</div>
<br>
<%= f.label "Email", class: "form-label" %>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-at"></i>
</span>
<%= f.text_field :email, class: "form-control", placeholder: "Email" %>
</div>
<br>
<%= f.label "Password", class: "form-label" %>
<%= f.password_field :password, class: "form-control", placeholder: "Password" %>
<br>
<%= f.label "Password Confirmation", class: "form-label" %>
<%= f.password_field :password, class: "form-control", placeholder: "Password Confirmation" %>
</div>
<div class="card-footer">
<%= f.submit "Sign up", class: "btn btn-primary float-right" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>