From bf7e16abee045147aa68bbcbec6dd2b9f8f99561 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Mon, 21 Jan 2013 00:52:28 -0500 Subject: [PATCH] VRFS-212 Find Session work --- .../content/icon_instrument_guitar24.png | Bin 0 -> 1484 bytes .../content/icon_instrument_keyboard24.png | Bin 0 -> 1580 bytes .../content/icon_instrument_vocal24.png | Bin 0 -> 1495 bytes app/assets/images/content/icon_join.png | Bin 0 -> 1049 bytes app/assets/images/content/icon_playbutton.png | Bin 0 -> 1197 bytes app/assets/images/content/icon_search.png | Bin 0 -> 1288 bytes app/assets/javascripts/createSession.js | 214 +++++------------- app/assets/javascripts/findSession.js | 15 +- app/assets/javascripts/genreSelector.js | 114 ++++++++++ app/assets/javascripts/sessionList.js | 0 .../stylesheets/client/createSession.css.scss | 10 +- .../stylesheets/client/findSession.css.scss | 87 +++++++ .../stylesheets/client/genreSelector.css.scss | 0 .../stylesheets/client/jamkazam.css.scss | 39 ++-- .../stylesheets/client/screen_common.css.scss | 46 ++-- .../stylesheets/client/sessionList.css.scss | 97 ++++++++ app/controllers/api_search_controller.rb | 7 +- app/views/api_search/index.rabl | 38 +++- app/views/clients/_createSession.html.erb | 155 +------------ app/views/clients/_findSession.html.erb | 64 ++++-- app/views/clients/_footer.html.erb | 1 + app/views/clients/_genreSelector.html.erb | 14 ++ app/views/clients/_header.html.erb | 1 + app/views/clients/_sessionList.html.erb | 52 +++++ app/views/clients/index.html.erb | 6 +- app/views/layouts/client.html.erb | 2 + 26 files changed, 580 insertions(+), 382 deletions(-) create mode 100644 app/assets/images/content/icon_instrument_guitar24.png create mode 100644 app/assets/images/content/icon_instrument_keyboard24.png create mode 100644 app/assets/images/content/icon_instrument_vocal24.png create mode 100644 app/assets/images/content/icon_join.png create mode 100644 app/assets/images/content/icon_playbutton.png create mode 100644 app/assets/images/content/icon_search.png create mode 100644 app/assets/javascripts/genreSelector.js create mode 100644 app/assets/javascripts/sessionList.js create mode 100644 app/assets/stylesheets/client/genreSelector.css.scss create mode 100644 app/assets/stylesheets/client/sessionList.css.scss create mode 100644 app/views/clients/_genreSelector.html.erb create mode 100644 app/views/clients/_sessionList.html.erb diff --git a/app/assets/images/content/icon_instrument_guitar24.png b/app/assets/images/content/icon_instrument_guitar24.png new file mode 100644 index 0000000000000000000000000000000000000000..5569b8e4319dcaa957bb572c6c8fadc3d0c70339 GIT binary patch literal 1484 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m{l@EB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`f(~1RD^r68eAMwS&*t9 zlvO-#Mv>2~2MaLaz%>y`aR9TL84#CABECEH%ZgC_h&L>}jh^+-`BiX&zK> z3U0SJ;nb@Sbc{YIYLTKECIn1BASOKF0y*%cpPC0u??u3b?dPGY#K6F0=jq}YQgLg} zHE$2mK#2n%ciQQ7aYsjK=L&i(a?`(ZsbhD+#LUJUM&X(l5BW|B=w>>|bn@Fhja9C! zUEMB*+(%wG-aOnSb})A92hk}@BDTN$|FS&M;_S}vJ@S8ce75*pYn*=0vN(C)`|4>O z3t81Kwgmm*ofCb`*yhj<)6S(1OtmYH%Cs4FPnoBGJZ{TEq4foV#{W|%F)>!|c$a@n zV%C=#>59+$5@c4tFul!E{;80C|HY}QD}CqRyRl&H0n^+G9W!>Yq<>^xzp;%wt#R?J zKWD_={aF|HTj1ymH>uyotV^=*B`|I5ILZH5JZ_QBhq!r3TEPnG9WRQjdTN_@;#_!4--JDGlld)rR$1PRIJ8lR*Sb{T#J9XN zkM|w!-Qtz!|9;u2OD|07G9Gc&99DV6$NFT}Q6~NBIfskaByfGsIKFGTb;{mPpGp?n zEIC*h@>n76#HvNv=gZIQmU-oAeh{wyl3*uQAi7<_e+O^&E{0_`-z_$LJo4po?pzIP zgH^?cdem1O(TtTU`nsRza`_HTYu#T;lk2`sxLS1LBdhr> w6*@X=0dr}`WB&xFbxBhE22CXqlj@mx7((6CPP%^xu?Ll}p00i_>zopr00lcNu>b%7 literal 0 HcmV?d00001 diff --git a/app/assets/images/content/icon_instrument_keyboard24.png b/app/assets/images/content/icon_instrument_keyboard24.png new file mode 100644 index 0000000000000000000000000000000000000000..6ee2854defb93eff7b9cf87ee92f9555012f7033 GIT binary patch literal 1580 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m{l@EB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`f(~1RD^r68eAMwS&*t9 zlvO-#2=9ZF3nBND}m`vLFl!>sTY(OatnYqyQCInmZhe+73JqDfIV%MiN!6h2ChaH zCQe2`^MGjpn_D1yQ*gV*45wT4fsWA!MJ-ZP!-Rn82gHOYTp$OY^i%VI>AeV;uy=I* zNo8PQn&;`_7*cU-%eB}J-b9(>A7@(bejTB|yHb0r(8CkQ(k4&evZ%u>aP^Lh_cXeT z+*j_sp&{-xC3@@jxS&T(+??94m%feRSgqU6k*&Yw#^&m>^WE?F|Lr|ySgesg|5r)c zyw7Jo&#!#;-{$;|R;PoSfqV;Cy91k7uKM5TxTHW>d;;&=gG?+z$7|1)BSQ77kyev4`YP;FAuFTX+*(Hw+ z9*HIJKYQH!`Tx=LKbN#^Kg;yys>HInpQbAQeYcHab=RWln^klU@T5OFRl*%$*~qBX z^!Y%%w~>_I>E{n8EZn@NFy^}K)t&d%*1st(d0WAV;9se4!&@(gj2-BXc^4b@D4ws%QYA%CIw8 z-1Iuj(o}4R=Ue;R0(UQd5c#r0^6$)Rl@XGBK6`u?#D+cpS5O|=aQa7Egk*f)*1Qdu zFK^kmoNGJJ=Y#L={i;p*`zx|U?(dCNh2>w0)LGxH2=aWm!q?`)x&6oDt8$K8KV;E+ zaY$14=(k1l79CgPdS%eSU$Np`P}D8m*vT)RerVj3E_iO$d3!UN=t;W^IlYz5#LSnh z;}f6wW%|pY=x2&H$BlDm`wB)sH!;cDy(M--`1OC+&h`FSwZSGYbRGXG>o1vlH^PrG ztxYzS>N^*ISV-etyj}FQB;~MV$!9D7*~Yz!jbyXyd-Y&B12aRFVw_uw-CkfyWnl1h L^>bP0l+XkKez|Z+ literal 0 HcmV?d00001 diff --git a/app/assets/images/content/icon_instrument_vocal24.png b/app/assets/images/content/icon_instrument_vocal24.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ecbe0ed7724595000a7a5c7fad4979c8b0636e GIT binary patch literal 1495 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m{l@EB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`f(~1RD^r68eAMwS&*t9 zlvO-#Mv>2~2MaLa!lCy`aR9TL84#CABECEH%ZgC_h&L>}jh^oNjS+#c3W? zZwgMgIJ)7~s}FRHJ}7FDq8cUyOg|tdJmCU4@T8xb2Tbopz=X}cHSRG31Cytxi(^Q| ztu@#DJwgISj(@B)PG)gU66D?CnH`#U%)Z5EM)wTYFqTVtQLZn{R%Be3FOb|)cu|W> zg`-I0kV12Yvg<^_7S|=4HMKmBA33z<<=4GmtAFmeTb?c!_v6Hw>gRK+pZ|Jxhx3qu zPo*0>-$LoL8JE6t-FqyU_b@W3Q6aI(EXF}U&7kf1j7xuIPb}tNThUQm@iSi4xG_~g zv}dvS%o}^x-Vm#vA9!X*5!>6UvX7r53Rub#)bo;jgiEc(wk?o4$H^uVutiAvqZE6A ztg1-Bu{7;%E2NmevEM|b&daZduK9Yz zZ$(=DEPK{Fp_j6HS7nKvVX^dC7FIuF*3LEi{u%c*xTPfDek8SjihRPkUFlh7OKnf8 z7fQaA(%#!*>}h^ED`qX{>eH)N>MAEco$3FLF_v?y@7XTSKOJT62W(l_9u_ruankTw zf=jnS@B4kq`~Ujq&bz8;vvF3`l@oc7=l(jUX>(NN+#=!26%B0e>sDHZyzai%BR=DB z=9ffyzX!ti799QVx_WtN&JkD9m`Ud)+}6zt3tWBEwe0ckD3^=E&vVN5mC42*F%P*K z8Ee@2cGtDW$(I_1eJ{-1Q1rg>v6a#H1lw&1`uiR&KgY58zqCm3_lc7C`vU(a-+#m{ zmYiD^xLQ{`&E!^bbincR)0%IzisfAT8ad^oM0t&UbRD+=!=}c*{p{|C-9SaHr>mdK II;Vst08>3KR{#J2 literal 0 HcmV?d00001 diff --git a/app/assets/images/content/icon_join.png b/app/assets/images/content/icon_join.png new file mode 100644 index 0000000000000000000000000000000000000000..fbf4351ddba7fa3c6088bd38adaf43faa01138f0 GIT binary patch literal 1049 zcmaJ=&ui0A9M7!OF;*OkvU!j!lj&s5uP$*7t6SEzwqR=MiWU!In!L4P&5tE-Hrr+D zE{=JadQuT~m_JTa@FI8^Qy5e5rXqqO{sZcHAii{M=fN71y!XC*KA-Q;x0ubG33VLl zz%VS7PDwem9z@^a_8|Hb4<65>r3WSoaKf5|RmB0As98mTrwye9azN2$r{91P3=167 z^95Lt&kCw#kcy8XJ;O$93>z8sY(<>{5HEs~ZpMfoFV_iN*J8v4PNro$4$69J&H)p1 znY=nTrA9Sk^fW%=2}r;IP{BQ;V!DDCBWk(=+WTgTz-tgV6(e?nD#%$pZaDzw$VgbF z83yNhk{RN7o*Behnqes#y?mG%5;$I9PvP~4K;9f}Qpickx-WE!5oHK%fugF_Dp`$? zmQ$jbXf*0;uxuD1!tSgI6)$YMeGLT(xT>SuP`6CnS5%7D42%&d(w!6xyD4kB^)jJ? zQJ!K`3`zSbHGs1Gf2d(J(Jst^-FW{g?B-`}K;?jI%{VG*++?5c$`;}dP@v`HEvwR~ zVzz8S%Pm_r9-rXx6SAV}rf(RiF=Satn=VvL6{MvYfiy^6*937m!m@N^oMTvqVG^t; z4N2piIGh~jl8GoUHn@_d&KSUi4X(D!jko0b!(iCRvjiOd3eb{{W#F}>1-*4F(Uy93 zuGTshu_c#6!BBo{|7vx^gyzTJHU}3SnxhX)H17@?>|fIQb95<|(vq0>J{K!rzrDM< z_je?V6`tK-ZtEZC`-3O<6ho1fN6Pjhv%I+V^8mg%mV0$`<=SczyA-&)qAzvzza4Y# z1kVQs(j_`@=!w$ZUctWadrw!|x{l{w-|r4?umaPwJ=(jlHQke0NO7G{#ZR5v=hnp4 p7lXI%CAtD%LTc}FXKD}D7R35L9DTU4d2zpgS<{J(v^IYE`X3+jNy7jD literal 0 HcmV?d00001 diff --git a/app/assets/images/content/icon_playbutton.png b/app/assets/images/content/icon_playbutton.png new file mode 100644 index 0000000000000000000000000000000000000000..fa080e080bfc2b48357361d2fb68414cc40c213b GIT binary patch literal 1197 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G} zXKrG8YEWuoN@d~6R2v2cW|hp4h>{3jAFJg2T)jk)8oi3#0-$aN1{?c|g2d$P)DnfH z)bz|eTc!8A_bVx6rr0WloBA5~7C5J7WO`H;r3P2|g(O#HCtIc{+1n}DR9FEG$W1Lt zRH(?!$t$+1uvG$^YXxM3g!Ppaz)DK8ZIvL7itr6kaLzAERWQ{v)=f4rG*mD%(=#+N zH8V5RQ7|$vG}1Q!A~Rh>6Dw0QDv55FG|-pw6wGYnPFt43sj+7T$xvrSfQI&tPC^3CAB!YD6^m>Ge1uOWMX1cerbuV z640d(FXR@$jm;~D1`{yA^eYkz^bPe4Kwg3=^!3HBG&dKny0|1L72#g21{a4^7NqJ2 zr55Lx79|5CE=?I^Re_arQEFmIeo;t%ehw@Y12XbU@{2R_3lyA#%@j0z6O%LZKmwXz z9lpL+o_WP3iFwJXo-VdZKr{3*GgGY0olFc|9F2gaB{1AwjU0`f-7Jk<3=Pc;T?|c) zjbM6R@{>z*Q}aq-dQ%X3opI^~C5GGrpv^9+MVV!(DQ-pixe8!UTV>*QizQC;pn6kq zyTuWwUVWfr^g&UJ6xA>xVEO?u;RzSWfhYacJYae+0w(N~Upo&nFfht{x;TbZ+}bkL zmg|s%K&$y|HI^c#(+(bq`CMB?i`kl&3%#**^{QWW$1(RU>u!Pjht~8In%5s;kAIkQ zUs*COZ22m!#0lI^8(6eAEchk)uLIs`#N} zLKds_^hw{<1KOu5Ff(4QJsi$bvMgm`e4`=v?5k%uZ%86|Cxc^4E8Cjo6PH{JxYf8k;~Ha5)>ie(snaGs^LeSX>!ir4z1m+-@mIy3 zzqI&>QG0gTvBkHXyApRbFMip$q%>&O7mnFY;;S>?M_$U)I?LWxn13%lCyzJ!v*he` z&AHshd}Y(Ge*V2C?)FoKwiv$po%`H&Cd}RVpXnYG55p_YMy`fAGqXSih^MQc%Q~lo FCIH1_o`nDa literal 0 HcmV?d00001 diff --git a/app/assets/images/content/icon_search.png b/app/assets/images/content/icon_search.png new file mode 100644 index 0000000000000000000000000000000000000000..3dbffabd010561e7b0112baddc788bd656d9a218 GIT binary patch literal 1288 zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S1|*9D%+3HQ$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@%qp275hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP zs8ErclUHn2VXFi-*9yo63F|81#=KlDb#X~hD#E>34K5C;EJ)Q4 zN-fSWElLJPT$(b-ssbzLqSVBa{GyQj{2W*)24v)y-fM)1rW~NxV8n_x+m^fOP8Un-F(ACJ%#l*$Q)X~Dt!qm;x z(##R2*Cju>G&eP`1g19yq1O_pUQlAlEdbi=l3J8mmYU*Ll%J~r_Ow+d7PnY989KR` zxVf3Q8aQEh3q)@U7Po-)ni?43)TkpMZknz zuza~10|R4~r;B4q#jQ0{_In);5IHtEKts>Ykv&!=`PSK^>=zDRJs4@_WzN~;aX?dn zFKpLt@g=nle0SH}E$NvcULf##!m|6E@uxn1W7B+csK4O-&im#6pUipvtn!`2S@z=( zI9L`eP12mv%qh{#uUo>qS#Jk}^&Fdp7E3b^xTb8BH(>D3Ha$~zR3N6A=ZoX)o{7Nm!TzAX$2HNW%^zS>^_vYPY0htEl53F%l{ElYGw6u0EbS!LmmujXrA=%~whc9S`xX|`_9 zwaR7M4@Cbo{nqU<({i}}?23k_@8P5^fwTQ$*SoEKKQsEd_imvChMxVaPI&pa?*Wxf Mp00i_>zopr0Q9@e_y7O^ literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/createSession.js b/app/assets/javascripts/createSession.js index ac43701ca..290db3f7a 100644 --- a/app/assets/javascripts/createSession.js +++ b/app/assets/javascripts/createSession.js @@ -6,24 +6,11 @@ context.JK.CreateSessionScreen = function(app) { var logger = context.JK.logger; var realtimeMessaging = context.JK.JamServer; + var genreSelector; var autoComplete = null; var usernames = []; var userids = []; - -/* -Message from Seth on sequence for creating/joining sessions: -02:31:46 PM) Seth Call: sequence: -(02:31:53 PM) Seth Call: LOGIN websocket (get your client_id) -(02:32:02 PM) Seth Call: CRETAE SESSION -(02:32:09 PM) Seth Call: CREATE PARTICIPANT (pass in client_id) -(02:32:12 PM) Seth Call: that's it for client 1 -(02:32:13 PM) Seth Call: client 2 -(02:32:20 PM) Seth Call: LOGIN WEBSOCKET (get your client_id) -(02:32:29 PM) Seth Call: CREATE PARTICIPANT(pass in client_id for client2) -(02:32:31 PM) Seth Call: that's it -(02:32:43 PM) Seth Call: USER_JOINED_MUSIC_SESSION is an event from the server -(02:32:52 PM) Seth Call: and LOGIN_MUSIC_SESSION is deprecated/junk -*/ + var MAX_GENRES = 3; function beforeShow(data) { usernames = []; @@ -31,55 +18,12 @@ Message from Seth on sequence for creating/joining sessions: resetForm(); } - /** - * Reset form to initial state. - */ function resetForm() { var $form = $('#create-session-form'); $('textarea[name="description"]', $form).val(''); + genreSelector.reset(); } - function afterShow(data) { - // TODO: This won't work in the long-term. We'll need to provide - // a handlers which accepts some characters and only returns users - // who are musicians who match that input string. Once we get there, - // we could just use the ajax functionality of the autocomplete plugin. - // - // But for now: - // Load the users list into our local array for autocomplete. - $.ajax({ - type: "GET", - url: "/api/users" - }).done(function(response) { - $.each(response, function() { - usernames.push(this.name); - userids.push(this.id); - }); - // Hook up the autocomplete. - var autoCompleteOptions = { - lookup: {suggestions:usernames, data: userids}, - onSelect: addInvitation - }; - if (!(autoComplete)) { - autoComplete = $('#invitations').autocomplete(autoCompleteOptions); - } else { - autoComplete.setOptions(autoCompleteOptions); - } - }); - } - - function addInvitation(value, data) { - var username = value; - var userid = data; - var template = $('#template-added-invitation').html(); // TODO: cache this - var inviteHtml = context.JK.fillTemplate(template, {userId: userid, userName: username}); - $('#added-invitations').append(inviteHtml); - $('#invitations').select(); - } - - /** - * Validate the form, returning a list of errors. - */ function validateForm() { var errors = []; var $form = $('#create-session-form'); @@ -90,28 +34,19 @@ Message from Seth on sequence for creating/joining sessions: errors.push(['#description', "Please enter a description."]); } - var genres = getSelectedGenres(); + var genres = genreSelector.getSelectedGenres(); if (genres.length == 0) { errors.push(['#genre-list-items', "Please select a genre."]); } - if (genres.length > 3) { - errors.push(['#genre-list-items', "No more than 3 genres are allowed."]); + if (genres.length > MAX_GENRES) { + errors.push(['#genre-list-items', "No more than " + MAX_GENRES + "genres are allowed."]); } return (errors.length) ? errors : null; } - function getSelectedGenres() { - var selectedGenres = []; - $('#genre-list-items :checked').each(function() { - selectedGenres.push($(this).val()); - }); - - return selectedGenres; - } - function submitForm(evt) { evt.preventDefault(); @@ -131,7 +66,7 @@ Message from Seth on sequence for creating/joining sessions: data.as_musician = true; data.legal_terms = true; // this overrides the default of 'on', which isn't satisfying our concept of boolean - data.genres = getSelectedGenres(); + data.genres = genreSelector.getSelectedGenres(); data.musician_access = $('#musician-access option:selected').val() === "true" ? true : false; data.approval_required = $("input[name='musician-access-option']:checked").val() === "true" ? true : false; @@ -204,43 +139,33 @@ Message from Seth on sequence for creating/joining sessions: function events() { $('#create-session-form').submit(submitForm); - $('#added-invitations').on("click", ".invitation span", removeInvitation); - $('#genre-list-header').on("click", toggleGenreBox); - $('#genre-list-arrow').on("click", toggleGenreBox); - $('#genre-list-items input[type=checkbox]').each(function() { - $(this).on("click", updateGenreCount); - }); + //$('#added-invitations').on("click", ".invitation span", removeInvitation); $('#musician-access').change(toggleMusicianAccess); $('#fan-access').change(toggleFanAccess); + + // friend input focus + $('#friend-input').focus(function() { + $(this).val(''); + }); + + // friend input blur + // $('#friend-input').blur(function() { + // $(this).val('Type a friend\'s name'); + // $('#friend-search-results').attr('style', 'display:none'); + // }); + + // friend input change + $('#friend-input').keyup(function() { + // + searchFriends($(this).val()); + }); } - // Used to disable checkboxes once 3 genres are selected. - function updateGenreCount() { - var genreCount = parseInt($('#genre-count').val()); - if ($(this).attr('checked')) { - genreCount++; - } - else { - genreCount--; - } - - $('#genre-count').val(genreCount); - - var disabled = false; - if (genreCount == 3) { - disabled = true; - } - - $('#genre-list-items input[type=checkbox]').each(function() { - if (!$(this).attr('checked')) { - if (disabled) { - $(this).attr('disabled', 'disabled'); - } - else { - $(this).removeAttr('disabled'); - } - } - }); + function addInvitation() { + alert(target); + var template = $('#template-added-invitation').html(); + var inviteHtml = context.JK.fillTemplate(template, {userId: this.id, userName: 'Text'}); + $('#friend-input').prepend(inviteHtml); } function removeInvitation(evt) { @@ -271,38 +196,6 @@ Message from Seth on sequence for creating/joining sessions: } } - function loadGenres() { - var url = "/api/genres"; - $.ajax({ - type: "GET", - url: url, - async: false, // do this synchronously so the event handlers in events() can be wired up - success: genresLoaded - }); - } - - function genresLoaded(response) { - $.each(response, function() { - var template = $('#template-genre-option').html(); - var genreOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.description}); - $('#genre-list-items').append(genreOptionHtml); - }); - } - - function toggleGenreBox() { - var boxHeight = $('#genre-list').css("height"); - // TODO: clean this up (check class name of arrow to determine current state) - if (boxHeight == "20px") { - $('#genre-list').css({height: "auto"}); - $('#genre-list-arrow').removeClass("arrow-down").addClass("arrow-up"); - - } - else { - $('#genre-list').css({height: "20px"}); - $('#genre-list-arrow').removeClass("arrow-up").addClass("arrow-down"); - } - } - function loadBands() { var url = "/api/users/" + context.JK.currentUserId + "/bands"; $.ajax({ @@ -320,37 +213,42 @@ Message from Seth on sequence for creating/joining sessions: }); } - function loadFriends() { - var url = "/api/users/" + context.JK.currentUserId + "/friends"; + function searchFriends(query) { + if (query.length < 2) { + $('#friend-search-results').empty(); + return; + } + var url = "/api/search?query=" + query + "&userId=" + context.JK.currentUserId; $.ajax({ type: "GET", url: url, - success: friendsLoaded + success: friendSearchComplete }); } - function friendsLoaded(response) { - $.each(response, function() { - $('#hdn-friends').append(); - $('#band-list').append(bandOptionHtml); - }); - } + function friendSearchComplete(response) { + // reset search results each time + $('#friend-search-results').empty(); - function enterText(div,v) { - cv = $(dcreateSessioniv).value; - if (cv != v && v != '' && cv != '') { - $(div).value = cv; - } - else { - $(div).value = v; - } + // loop through each + $.each(response.friends, function() { + // only show friends who are musicians + if (this.musician === true) { + var template = $('#template-friend-search-results').html(); + var searchResultHtml = context.JK.fillTemplate(template, {userId: this.id, name: this.first_name + ' ' + this.last_name}); + $('#friend-search-results').append(searchResultHtml); + $('#friend-search-results').attr('style', 'display:block'); + } + }); } function initialize() { - loadGenres(); + genreSelector = new context.JK.GenreSelector(app); + genreSelector.initialize('Choose up to ' + MAX_GENRES + ' genres', MAX_GENRES, $('#create-session-form')); + events(); loadBands(); - var screenBindings = { 'afterShow': afterShow, 'beforeShow': beforeShow }; + var screenBindings = { 'beforeShow': beforeShow }; app.bindScreen('createSession', screenBindings); } @@ -359,9 +257,9 @@ Message from Seth on sequence for creating/joining sessions: this.resetForm = resetForm; this.submitForm = submitForm; this.validateForm = validateForm; - this.loadGenres = loadGenres; this.loadBands = loadBands; - this.loadFriends = loadFriends; + this.searchFriends = searchFriends; + this.addInvitation = addInvitation; return this; }; diff --git a/app/assets/javascripts/findSession.js b/app/assets/javascripts/findSession.js index 93fe84270..940ca9fa9 100644 --- a/app/assets/javascripts/findSession.js +++ b/app/assets/javascripts/findSession.js @@ -4,9 +4,17 @@ context.JK = context.JK || {}; context.JK.FindSessionScreen = function(app) { + var CATEGORY = { + INVITATION : {index:0, id:"sessions-invitations"}, + FRIENDS : {index:1, id:"sessions-friends"}, + OTHER : {index:2, id:"sessions-other"} + }; + var logger = context.JK.logger; var sessionLatency; + var genreSelector; var sessions = {}; + var sessionList var selectors = { TABLE_BODY: '#findSession-tableBody' }; @@ -45,7 +53,7 @@ */ function renderSession(sessionId) { var $tb = $(selectors.TABLE_BODY); - var rowTemplate = $('#template-findSession-row').html(); + var rowTemplate = $('#template-session-row').html(); var session = sessions[sessionId]; var latencyInfo = sessionLatency.sessionInfo(sessionId); var audience = "Open to Fans"; @@ -101,6 +109,9 @@ * Initialize, providing an instance of the SessionLatency class. */ function initialize(_sessionLatency) { + genreSelector = new context.JK.GenreSelector(app); + genreSelector.initialize('Any genre', 0, $('#find-session-form')); + if (_sessionLatency) { sessionLatency = _sessionLatency; } else { @@ -114,13 +125,13 @@ } this.initialize = initialize; - this.afterShow = afterShow; this.renderSession = renderSession; // Following exposed for easier testing. this.setSession = setSession; this.selectors = selectors; + return this; }; })(window,jQuery); \ No newline at end of file diff --git a/app/assets/javascripts/genreSelector.js b/app/assets/javascripts/genreSelector.js new file mode 100644 index 000000000..6b63293cd --- /dev/null +++ b/app/assets/javascripts/genreSelector.js @@ -0,0 +1,114 @@ +(function(context,$) { + + /** + * Javascript for managing the genre selector. + */ + + "use strict"; + + context.JK = context.JK || {}; + context.JK.GenreSelector = function(app) { + + var _logger = context.JK.logger; + var _maxSelections = 0; + var _form; // identifies the form containing the genre selector + + function loadGenres() { + var url = "/api/genres"; + $.ajax({ + type: "GET", + url: url, + async: false, // do this synchronously so the event handlers in events() can be wired up + success: genresLoaded + }); + } + + function reset() { + $('#genre-list-items input[type=checkbox]', _form).removeAttr('checked'); + $('#genre-list-items input[type=checkbox]', _form).removeAttr('disabled'); + } + + function genresLoaded(response) { + $.each(response, function(index) { + var template = $('#template-genre-option', _form).html(); + var genreOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.description}); + $('#genre-list-items', _form).append(genreOptionHtml); + }); + } + + function toggleGenreBox() { + var boxHeight = $('#genre-list', _form).css("height"); + // TODO: clean this up (check class name of arrow to determine current state) + if (boxHeight == "20px") { + $('#genre-list', _form).css({height: "auto"}); + $('#genre-list-arrow', _form).removeClass("arrow-down").addClass("arrow-up"); + + } + else { + $('#genre-list', _form).css({height: "20px"}); + $('#genre-list-arrow', _form).removeClass("arrow-up").addClass("arrow-down"); + } + } + + // Used to disable checkboxes once _maxSelections are selected. + function updateGenreCount() { + var genreCount = parseInt($('#genre-count', _form).val()); + if ($(this).attr('checked')) { + genreCount++; + } + else { + genreCount--; + } + + $('#genre-count', _form).val(genreCount); + + var disabled = false; + if (_maxSelections != 0 && genreCount == _maxSelections) { + disabled = true; + } + + $('#genre-list-items input[type=checkbox]', _form).each(function() { + if (!$(this).attr('checked')) { + if (disabled) { + $(this).attr('disabled', 'disabled'); + } + else { + $(this).removeAttr('disabled'); + } + } + }); + } + + function getSelectedGenres() { + var selectedGenres = []; + $('#genre-list-items :checked', _form).each(function() { + selectedGenres.push($(this).val()); + }); + + return selectedGenres; + } + + function events() { + $('#genre-list-header', _form).on("click", toggleGenreBox); + $('#genre-list-arrow', _form).on("click", toggleGenreBox); + $('#genre-list-items input[type=checkbox]', _form).each(function() { + $(this).on("click", updateGenreCount); + }); + } + + function initialize(title, maxSelections, form) { + _form = form; + _maxSelections = maxSelections; + + $('#genre-list-header', _form).text(title); + loadGenres(); + events(); + }; + + this.initialize = initialize; + this.getSelectedGenres = getSelectedGenres; + this.reset = reset; + + return this; + }; +})(window,jQuery); \ No newline at end of file diff --git a/app/assets/javascripts/sessionList.js b/app/assets/javascripts/sessionList.js new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/stylesheets/client/createSession.css.scss b/app/assets/stylesheets/client/createSession.css.scss index 7dc1e2bf0..fa2ec4e6a 100644 --- a/app/assets/stylesheets/client/createSession.css.scss +++ b/app/assets/stylesheets/client/createSession.css.scss @@ -1,24 +1,28 @@ .session-left { - width:50%; + width:45%; float:left; + padding-top:10px; + margin-left:35px; } .session-right { width:45%; float:right; font-size:13px; + padding-top:10px; + margin-right:10px; } .session-description { padding:5px; - width:100%; + width:80%; height:80px; } .friendbox { padding:5px; - width:100%; height:60px; + width:75%; } .terms-checkbox { diff --git a/app/assets/stylesheets/client/findSession.css.scss b/app/assets/stylesheets/client/findSession.css.scss index a4215001f..8cdd196c2 100644 --- a/app/assets/stylesheets/client/findSession.css.scss +++ b/app/assets/stylesheets/client/findSession.css.scss @@ -3,3 +3,90 @@ div[layout-id="findSession"] { th, td { margin: 4px; padding:4px; } } + +.session-filter { + width:100%; + padding:11px 0px 11px 0px; + background-color:#4c4c4c; + min-height:20px; + overflow-x:hidden; +} + +table.findsession-table { + margin-top:6px; + width:100%; + font-size:11px; + color:#fff; + background-color:#262626; + border:solid 1px #4d4d4d; +} + +.findsession-table th { + font-weight:300; + background-color:#4d4d4d; + padding:6px; + border-right:solid 1px #333; +} + +.findsession-table td { + padding:9px 5px 5px 5px; + border-right:solid 1px #333; + border-top:solid 1px #333; + vertical-align:top; + white-space:normal; +} + +.findsession-table .noborder { + border-right:none; +} + +.findsession-table .musicians { + margin-top:-3px; +} + +.findsession-table .musicians td { + border-right:none; + border-top:none; + padding:3px; + vertical-align:middle; +} + +.findsession-table a { + color:#fff; + text-decoration:none; +} + +.findsession-table a:hover { + color:#227985; +} + +.latency-green { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + background-color:#72a43b; +} + +.latency-yellow { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + background-color:#cc9900; +} + +.latency-red { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + text-align:center; + background-color:#980006; +} \ No newline at end of file diff --git a/app/assets/stylesheets/client/genreSelector.css.scss b/app/assets/stylesheets/client/genreSelector.css.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index ca9539b69..f57ad9064 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -57,11 +57,6 @@ a.arrow-down { border-top: 7px solid #333; } -form { - clear:both; - margin: 1em; -} - form .body { /* TODO - size with layout */ width: 100%; @@ -70,18 +65,6 @@ form .body { overflow:auto; } -fieldset { - /*border: 1px solid #555;*/ - /*padding: 1em;*/ - /*margin: 2em 1em;*/ - /*width:auto;*/ - /*float:left;*/ -} - -fieldset.unstyled { - border: 1px solid #f00; -} - .formrow { margin: 1em; padding: 1em; @@ -222,6 +205,24 @@ input[type="button"] { width:135px; } +.search-box { + float:left; + width:140px; + margin-left: 10px; + -webkit-border-radius: 6px; + border-radius: 6px; + background-color:#C5C5C5; + border: none; + color:#333; + font-weight:400; + padding:0px 0px 0px 8px; + height:20px; + line-height:20px; + overflow:hidden; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; +} + input[type="text"] { background-color: $ColorTextBoxBackground; } @@ -250,6 +251,10 @@ input[type="text"] { margin-left:30px; } +.ml35 { + margin-left:35px; +} + .op50 { opacity: .5; -ms-filter: "alpha(opacity=50)"; diff --git a/app/assets/stylesheets/client/screen_common.css.scss b/app/assets/stylesheets/client/screen_common.css.scss index 8908e4ad2..c2cf791e4 100644 --- a/app/assets/stylesheets/client/screen_common.css.scss +++ b/app/assets/stylesheets/client/screen_common.css.scss @@ -43,34 +43,13 @@ } .content { - background-color: #353535; clear: both; float: left; - height: auto; - width: auto; + height: 100%; + width: 100%; position:relative; } -.content-scroller { - height:inherit; - position:relative; - display:block; - overflow:auto; -} - -.content-wrapper { - padding:20px 30px 20px 36px; - font-size:15px; - color:#ccc; - border-bottom: dotted 1px #444; -} - -.content-wrapper h2 { - color:#fff; - font-weight:600; - font-size:24px; -} - .content-head { height:21px; padding:4px; @@ -121,10 +100,29 @@ border-bottom: 7px solid transparent; border-right:7px solid #FFF; } - } } +.content-scroller { + height:inherit; + position:relative; + display:block; + overflow:auto; +} + +.content-wrapper { + padding: 0px 0px 0px 0px; + font-size: 15px; + color: #ccc; + border-bottom: dotted 1px #444; +} + +.content-wrapper h2 { + color:#fff; + font-weight:600; + font-size:24px; +} + .buttonrow, .screen.secondary .footer { position: absolute; bottom:0px; diff --git a/app/assets/stylesheets/client/sessionList.css.scss b/app/assets/stylesheets/client/sessionList.css.scss new file mode 100644 index 000000000..979909268 --- /dev/null +++ b/app/assets/stylesheets/client/sessionList.css.scss @@ -0,0 +1,97 @@ +table.findsession-table { + margin-top:6px; + width:100%; + font-size:11px; + color:#fff; + background-color:#262626; + border:solid 1px #4d4d4d; +} + +.findsession-table th { + font-weight:300; + background-color:#4d4d4d; + padding:6px; + border-right:solid 1px #333; +} + +.findsession-table td { + padding:9px 5px 5px 5px; + border-right:solid 1px #333; + border-top:solid 1px #333; + vertical-align:top; + white-space:normal; +} + +.findsession-table .noborder { + border-right:none; +} + +.findsession-table .musicians { + margin-top:-3px; +} + +.findsession-table .musicians td { + border-right:none; + border-top:none; + padding:3px; + vertical-align:middle; +} + +.findsession-table a { + color:#fff; + text-decoration:none; +} + +.findsession-table a:hover { + color:#227985; +} + +.latency-green { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + background-color:#72a43b; +} + +.latency-yellow { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + background-color:#cc9900; +} + +.latency-red { + width: 50px; + height: 10px; + font-family:Arial, Helvetica, sans-serif; + font-weight:200; + font-size:9px; + text-align:center; + text-align:center; + background-color:#980006; +} + +.avatar-tiny { + float:left; + padding:1px; + width:24px; + height:24px; + background-color:#ed3618; + -webkit-border-radius:12px; + -moz-border-radius:12px; + border-radius:12px; +} + +.avatar-tiny img { + width: 24px; + height: 24px; + -webkit-border-radius:12px; + -moz-border-radius:12px; + border-radius:12px; +} \ No newline at end of file diff --git a/app/controllers/api_search_controller.rb b/app/controllers/api_search_controller.rb index 7b0efc0a3..067e782a5 100644 --- a/app/controllers/api_search_controller.rb +++ b/app/controllers/api_search_controller.rb @@ -6,7 +6,12 @@ class ApiSearchController < ApiController respond_to :json def index - @search = Search.search(params[:query]) + if (params[:userId] == nil) + @search = Search.search(params[:query]) + # TODO: fix this hack to accommodate friend searches + else + @search = Search.search(params[:query], params[:userId]) + end end end diff --git a/app/views/api_search/index.rabl b/app/views/api_search/index.rabl index 984df0142..ba13dce45 100644 --- a/app/views/api_search/index.rabl +++ b/app/views/api_search/index.rabl @@ -1,17 +1,31 @@ object @search -child(:bands => :bands) { - attributes :id, :name, :location, :photo_url, :logo_url -} +unless @search.bands.nil? || @search.bands.size == 0 + child(:bands => :bands) { + attributes :id, :name, :location, :photo_url, :logo_url + } +end -child(:musicians => :musicians) { - attributes :id, :first_name, :last_name, :location, :photo_url -} +unless @search.musicians.nil? || @search.musicians.size == 0 + child(:musicians => :musicians) { + attributes :id, :first_name, :last_name, :location, :photo_url + } +end -child(:fans => :fans) { - attributes :id, :first_name, :last_name, :location, :photo_url -} +unless @search.fans.nil? || @search.fans.size == 0 + child(:fans => :fans) { + attributes :id, :first_name, :last_name, :location, :photo_url + } +end -child(:recordings => :recordings) { - attributes :id, :name -} +unless @search.recordings.nil? || @search.recordings.size == 0 + child(:recordings => :recordings) { + attributes :id, :name + } +end + +unless @search.friends.nil? || @search.friends.size == 0 + child(:friends => :friends) { + attributes :id, :first_name, :last_name, :city, :state, :country, :email, :online, :photo_url, :musician + } +end diff --git a/app/views/clients/_createSession.html.erb b/app/views/clients/_createSession.html.erb index 8e127112b..cbb3d589b 100644 --- a/app/views/clients/_createSession.html.erb +++ b/app/views/clients/_createSession.html.erb @@ -23,15 +23,7 @@
Genre:
-
-
- Choose up to 3 genres -
- -
-
- -
+ <%= render "genreSelector" %>
Band:
@@ -73,15 +65,11 @@
-
Brian Smith - - <%= image_tag "shared/icon_delete_sm.png", :size => "13x13", :align => "texttop" %> - +
+
-
-
Invite friends and contacts to join you on JamKazam from:

@@ -119,143 +107,20 @@ - - - - - - -
-
-

Home >

-

Create a Session (3/3): Audio

-
-
-

Configure your instruments, headphones or speakers, and voice chat settings. Then play your instrument and sing or speak into your microphone, and ensure you hear everything correctly before entering the session.

-
- Audio Settings -
- Instrument 1 - - - - - - - -
-
-
- Headphone/Speaker Settings - - - -
-
- Voice Chat Settings - - - -
-
- - - -
-
-
+ \ No newline at end of file diff --git a/app/views/clients/_findSession.html.erb b/app/views/clients/_findSession.html.erb index 439602533..280dd4eb8 100644 --- a/app/views/clients/_findSession.html.erb +++ b/app/views/clients/_findSession.html.erb @@ -1,25 +1,55 @@
-
-

Find a Session

- <%= render "screen_navigation" %> +
+
+
+ <%= image_tag "content/icon_search.png", :size => "19x19" %> +
+ +

find a session

+ + <%= render "screen_navigation" %> +
+
+
+
+
Filter Session List:
+ + +
+
+
+ All musicians +
+ +
+
+
+
+ + +
+ <%= render "genreSelector" %> +
+ + +
+ +
+
+
+
+
+ <%= render :partial => "sessionList", :locals => {:title => "sessions you're invited to", :category => "sessions-invitations"} %> + <%= render :partial => "sessionList", :locals => {:title => "sessions with friends or bandmates", :category => "sessions-friends"} %> + <%= render :partial => "sessionList", :locals => {:title => "other sessions", :category => "sessions-other"} %> +
+
+
- - - - - - - - - - - - -
GenreDescriptionMusiciansAudienceLatencyListenJoin
- \ No newline at end of file diff --git a/app/views/clients/_header.html.erb b/app/views/clients/_header.html.erb index da464e3bf..40928e68c 100644 --- a/app/views/clients/_header.html.erb +++ b/app/views/clients/_header.html.erb @@ -1,3 +1,4 @@ +