From a611a8a9c00311a33d1bc824dbf07fc37bf6438d Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Sat, 23 Sep 2017 00:43:19 -0500 Subject: [PATCH] more relay WIP --- app/controllers/Relay.scala | 9 +++--- app/views/event/layout.scala.html | 2 +- app/views/relay/create.scala.html | 11 ++++++- app/views/relay/inForm.scala.html | 6 ++-- app/views/relay/index.scala.html | 2 +- app/views/relay/show.scala.html | 41 +++++++++++++++++++++++---- app/views/relay/widget.scala.html | 2 +- conf/routes | 2 +- modules/relay/src/main/JsonView.scala | 8 ++++++ modules/relay/src/main/Relay.scala | 2 ++ modules/relay/src/main/RelayApi.scala | 11 ++++++- public/stylesheets/flatpickr.css | 4 +++ public/stylesheets/relay-list.css | 7 +++++ public/stylesheets/relay.css | 7 ----- 14 files changed, 89 insertions(+), 25 deletions(-) create mode 100644 modules/relay/src/main/JsonView.scala create mode 100644 public/stylesheets/flatpickr.css create mode 100644 public/stylesheets/relay-list.css diff --git a/app/controllers/Relay.scala b/app/controllers/Relay.scala index fb6e5a0d91..34a8037963 100644 --- a/app/controllers/Relay.scala +++ b/app/controllers/Relay.scala @@ -28,14 +28,15 @@ object Relay extends LilaController { env.forms.create.bindFromRequest.fold( err => BadRequest(html.relay.create(err)).fuccess, setup => env.api.create(setup, me) map { relay => - Redirect(routes.Relay.show(relay.id.value)) + Redirect(routes.Relay.show(relay.slug, relay.id.value)) } ) } - def show(id: String) = Open { implicit ctx => - OptionOk(env.api byId RelayModel.Id(id)) { relay => - html.relay.show(relay) + def show(slug: String, id: String) = Open { implicit ctx => + OptionFuResult(env.api byId RelayModel.Id(id)) { relay => + if (relay.slug != slug) Redirect(routes.Relay.show(relay.slug, relay.id.value)).fuccess + else Ok(html.relay.show(relay)).fuccess } } } diff --git a/app/views/event/layout.scala.html b/app/views/event/layout.scala.html index 18e54d19a9..f80927c6db 100644 --- a/app/views/event/layout.scala.html +++ b/app/views/event/layout.scala.html @@ -1,7 +1,7 @@ @(title: String)(body: Html)(implicit ctx: Context) @moreCss = { -@cssAt("vendor/flatpickr/dist/flatpickr.min.css") +@cssTag("flatpickr.css") @cssTag("material.form.css") @cssTag("event.crud.css") } diff --git a/app/views/relay/create.scala.html b/app/views/relay/create.scala.html index 524abd4103..aab5b641e4 100644 --- a/app/views/relay/create.scala.html +++ b/app/views/relay/create.scala.html @@ -1,13 +1,22 @@ @(form: Form[_])(implicit ctx: Context) @moreCss = { +@cssTag("flatpickr.css") @cssTag("material.form.css") @cssTag("relay.css") } +@moreJs = { +@jsAt("vendor/flatpickr/dist/flatpickr.min.js") +@embedJs { +$(".flatpickr").flatpickr(); +} +} + @base.layout( title = "New live broadcast", -moreCss = moreCss +moreCss = moreCss, +moreJs = moreJs ) {

New live broadcast

diff --git a/app/views/relay/inForm.scala.html b/app/views/relay/inForm.scala.html index 62c5ac96f6..f55f545457 100644 --- a/app/views/relay/inForm.scala.html +++ b/app/views/relay/inForm.scala.html @@ -1,18 +1,18 @@ @(form: Form[_])(implicit ctx: Context) @base.form.group(form("name"), Html("Event name")) { -@base.form.input(form("name")) +@base.form.input(form("name"), required = true) } @defining(form("description")) { field => @base.form.group(field, Html("Event description")) { - + } } @base.form.group(form("startsAt"), Html("Start date UTC")) { @base.form.flatpickr(form("startsAt")) } @base.form.group(form("pgnUrl"), Html("Live PGN URL")) { -@base.form.input(form("pgnUrl")) +@base.form.input(form("pgnUrl"), typ = "url", required = true) } @base.form.submit() diff --git a/app/views/relay/index.scala.html b/app/views/relay/index.scala.html index a9ec6ea1c9..73dbe8b828 100644 --- a/app/views/relay/index.scala.html +++ b/app/views/relay/index.scala.html @@ -12,7 +12,7 @@ @base.layout( title = "Live tournament broadcasts", -moreCss = cssTag("relay.css")) { +moreCss = cssTag("relay-list.css")) {

Live tournament broadcasts

diff --git a/app/views/relay/show.scala.html b/app/views/relay/show.scala.html index ca483c3ace..5873c7d859 100644 --- a/app/views/relay/show.scala.html +++ b/app/views/relay/show.scala.html @@ -1,8 +1,39 @@ -@(r: lila.relay.Relay)(implicit ctx: Context) +@(r: lila.relay.Relay, data: lila.relay.JsonView.JsData)(implicit ctx: Context) + +@moreCss = { +@cssTag("analyse.css") +@cssTag("study.css") +@cssTag("relay.css") +} + +@moreJs = { +@jsAt(s"compiled/lichess.analyse${isProd??(".min")}.js") +@embedJs { +lichess = lichess || {}; +lichess.relay = { +relay: @Html(J.stringify(data.relay)), +study: @Html(J.stringify(data.study)), +data: @Html(J.stringify(data.analysis)), +i18n: @board.userAnalysisI18n(), +explorer: { +endpoint: "@explorerEndpoint", +tablebaseEndpoint: "@tablebaseEndpoint" +} +}; +} +} + +@side = { +
+} @base.layout( -title = r.name, -moreCss = cssTag("relay.css") -) { -

@r.name

+title = relay.relay.name, +side = side.some, +underchat = none, +moreCss = moreCss, +moreJs = moreJs, +chessground = false, +zoomable = true) { +
@miniBoardContent
} diff --git a/app/views/relay/widget.scala.html b/app/views/relay/widget.scala.html index d6e6970692..949cc422ac 100644 --- a/app/views/relay/widget.scala.html +++ b/app/views/relay/widget.scala.html @@ -1,5 +1,5 @@ @(r: lila.relay.Relay.WithStudy)(implicit ctx: Context) - +

@r.relay.name diff --git a/conf/routes b/conf/routes index dda25ee905..af65f381ee 100644 --- a/conf/routes +++ b/conf/routes @@ -153,7 +153,7 @@ POST /study/$id<\w{8}>/clear-chat controllers.Study.clearChat(id: String) GET /relay controllers.Relay.index GET /relay/new controllers.Relay.form POST /relay/new controllers.Relay.create -GET /relay/$id<\w{8}> controllers.Relay.show(id: String) +GET /relay/:slug/$id<\w{8}> controllers.Relay.show(slug: String, id: String) # Learn GET /learn controllers.Learn.index diff --git a/modules/relay/src/main/JsonView.scala b/modules/relay/src/main/JsonView.scala new file mode 100644 index 0000000000..747e882145 --- /dev/null +++ b/modules/relay/src/main/JsonView.scala @@ -0,0 +1,8 @@ +package lila.relay + +import play.api.libs.json._ + +object JsonView { + + case class JsData(study: JsObject, analysis: JsObject) +} diff --git a/modules/relay/src/main/Relay.scala b/modules/relay/src/main/Relay.scala index 98ced79c8c..b93d90265b 100644 --- a/modules/relay/src/main/Relay.scala +++ b/modules/relay/src/main/Relay.scala @@ -20,6 +20,8 @@ case class Relay( def studyId = Study.Id(id.value) + def slug = lila.common.String slugify name + override def toString = s"id:$id pgnUrl:$pgnUrl" } diff --git a/modules/relay/src/main/RelayApi.scala b/modules/relay/src/main/RelayApi.scala index 4a468feeb6..1e5ac2d836 100644 --- a/modules/relay/src/main/RelayApi.scala +++ b/modules/relay/src/main/RelayApi.scala @@ -4,7 +4,7 @@ import org.joda.time.DateTime import reactivemongo.bson._ import lila.db.dsl._ -import lila.study.StudyApi +import lila.study.{ StudyApi, Study } import lila.user.User final class RelayApi( @@ -16,6 +16,15 @@ final class RelayApi( def byId(id: Relay.Id) = coll.byId[Relay](id.value) + def byIdWithStudy(id: Relay.Id): Fu[Option[Relay.WithStudy]] = + byId(id) flatMap { + _ ?? { relay => + studyApi.byId(relay.studyId) map2 { (study: Study) => + Relay.WithStudy(relay, study) + } + } + } + def all: Fu[Relay.Selection] = created.flatMap(withStudy) zip started.flatMap(withStudy) zip diff --git a/public/stylesheets/flatpickr.css b/public/stylesheets/flatpickr.css new file mode 100644 index 0000000000..81c38cdebe --- /dev/null +++ b/public/stylesheets/flatpickr.css @@ -0,0 +1,4 @@ +.flatpickr-input{cursor:pointer;z-index:1}.flatpickr-mobileInput{opacity:0;visibility:hidden;position:absolute;width:0;height:0;box-sizing:border-box;padding:0}.flatpickr-calendar{background:#fff;display:none;border:1px solid #ddd;font-size:90%;border-radius:3px;position:absolute;width:256px}.flatpickr-calendar.inline,.flatpickr-calendar.open{opacity:1;z-index:99999;display:block}.flatpickr-calendar.inline{margin-top:2px;position:static}.flatpickr-calendar.hasWeeks{width:288px}.flatpickr-calendar.hasWeeks .flatpickr-weekdays span{width:12.5%}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#ddd}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#ddd}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-month{background:0 0;color:rgba(0,0,0,.9);fill:rgba(0,0,0,.9);padding:4px 0 0;height:1.625rem;text-align:center;position:relative}.flatpickr-next-month,.flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:5px}.flatpickr-next-month i,.flatpickr-prev-month i{position:relative}.flatpickr-next-month svg,.flatpickr-prev-month svg{width:.9rem}.flatpickr-next-month svg path,.flatpickr-prev-month svg path{fill:inherit}.flatpickr-next-month svg:hover,.flatpickr-prev-month svg:hover{fill:#f99595}.flatpickr-next-month:hover,.flatpickr-prev-month:hover{color:#f99595}.flatpickr-prev-month{left:.5rem}.flatpickr-next-month{right:.5rem}.flatpickr-current-month{font-size:135%;font-weight:300;color:inherit;position:relative;display:inline-block}.flatpickr-current-month .cur_month{font-weight:700;color:inherit}.flatpickr-current-month .cur_year{background:0 0;box-sizing:border-box;color:inherit;cursor:default;padding:0 0 0 2px;margin:0;width:3.2em;display:inline;font-size:inherit;font-weight:300;line-height:inherit;height:initial;border:0}.flatpickr-current-month .cur_year:hover{background:rgba(0,0,0,.05)}.flatpickr-weekdays{font-size:90%;background:0 0;padding:2px 0 4px;text-align:center}.flatpickr-weekdays span{opacity:.54;text-align:center;display:inline-block;width:14.28%;font-weight:700}.flatpickr-weeks{width:32px;float:left}.flatpickr-days{padding-top:1px;outline:0}.flatpickr-days span,.flatpickr-weeks span{background:0 0;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:300;width:34px;height:34px;line-height:33px;margin:0 1px 1px;text-align:center}.flatpickr-days span.disabled,.flatpickr-days span.disabled:hover,.flatpickr-days span.nextMonthDay,.flatpickr-days span.prevMonthDay,.flatpickr-weeks span.disabled,.flatpickr-weeks span.disabled:hover,.flatpickr-weeks span.nextMonthDay,.flatpickr-weeks span.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-days span.nextMonthDay:focus,.flatpickr-days span.nextMonthDay:hover,.flatpickr-days span.prevMonthDay:focus,.flatpickr-days span.prevMonthDay:hover,.flatpickr-days span:focus,.flatpickr-days span:hover,.flatpickr-weeks span.nextMonthDay:focus,.flatpickr-weeks span.nextMonthDay:hover,.flatpickr-weeks span.prevMonthDay:focus,.flatpickr-weeks span.prevMonthDay:hover,.flatpickr-weeks span:focus,.flatpickr-weeks span:hover{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-days span.today,.flatpickr-weeks span.today{border-color:#f99595}.flatpickr-days span.today:focus,.flatpickr-days span.today:hover,.flatpickr-weeks span.today:focus,.flatpickr-weeks span.today:hover{border-color:#f99595;background:#f99595;color:#fff}.flatpickr-days span.selected,.flatpickr-days span.selected:focus,.flatpickr-days span.selected:hover,.flatpickr-weeks span.selected,.flatpickr-weeks span.selected:focus,.flatpickr-weeks span.selected:hover{background:#446cb3;color:#fff;border-color:#446cb3}.flatpickr-am-pm,.flatpickr-time input,.flatpickr-time-separator{height:38px;display:inline-block;line-height:38px;color:#393939}.flatpickr-time{overflow:auto;text-align:center;border-top:0;outline:0}.flatpickr-time input{background:0 0;-webkit-appearance:none;-moz-appearance:textfield;box-shadow:none;border:0;border-radius:0;width:33%;min-width:33%;text-align:center;margin:0;padding:0;cursor:pointer;font-weight:700}.flatpickr-am-pm:focus,.flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:#f0f0f0}.flatpickr-time input.flatpickr-minute{width:26%;font-weight:300}.flatpickr-time input.flatpickr-second{font-weight:300}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time.has-seconds input[type=number]{width:25%;min-width:25%}.flatpickr-days+.flatpickr-time{border-top:1px solid #ddd}.flatpickr-am-pm{outline:0;width:21%;padding:0 2%;cursor:pointer;text-align:left;font-weight:300}@media all and (-ms-high-contrast:none){.flatpickr-month{padding:0}} +.flatpickr-current-month .cur_year { + width: 3.5em; +} diff --git a/public/stylesheets/relay-list.css b/public/stylesheets/relay-list.css new file mode 100644 index 0000000000..9130f735a7 --- /dev/null +++ b/public/stylesheets/relay-list.css @@ -0,0 +1,7 @@ +.relay_form h1.lichess_title { + text-align: center; + margin-bottom: 0!important; +} +.relay_form textarea.description { + height: 10em; +} diff --git a/public/stylesheets/relay.css b/public/stylesheets/relay.css index 9130f735a7..e69de29bb2 100644 --- a/public/stylesheets/relay.css +++ b/public/stylesheets/relay.css @@ -1,7 +0,0 @@ -.relay_form h1.lichess_title { - text-align: center; - margin-bottom: 0!important; -} -.relay_form textarea.description { - height: 10em; -}