Skip to content

Commit e156f25

Browse files
ar2rsawseenar2rsawseen
authored
Merge pull request #737 from frknbasaran/initial-screen
Initial screen
2 parents e24394b + 0d33cb3 commit e156f25

File tree

10 files changed

+250
-35
lines changed

10 files changed

+250
-35
lines changed

‎frontend/express/public/javascripts/countly/countly.views.js

+82-26
Original file line numberDiff line numberDiff line change
@@ -1304,14 +1304,66 @@ window.ManageAppsView = countlyView.extend({
13041304
app.appSettings[j].toInject();
13051305
}
13061306
}
1307+
1308+
/**
1309+
* initial screen prepare method
1310+
* add first app elements and hide other things
1311+
*/
1312+
function firstApp() {
1313+
store.set('first_app', true);
1314+
// hide sidebar & app navigation and app management bar
1315+
// make unclickable countly logo
1316+
// re-align elements
1317+
$('#top-bar > div.logo-container > a').attr('href', 'javascript:void(0)');
1318+
$('#top-bar > div.right-menu > div:nth-child(1)').css({'opacity': '0', 'pointer-events': 'none'});
1319+
$("#sidebar").addClass("hidden");
1320+
$("#app-navigation").css({'opacity': '0', 'pointer-events': 'none'});
1321+
$("#hide-sidebar-button").hide();
1322+
$('#app-management-bar').hide();
1323+
$('#content-container').css({'margin-left': '0px'});
1324+
var width = $('body').width();
1325+
// create first app screen elements
1326+
$('#content').prepend('<div id="first-app-welcome"></div>');
1327+
$('#first-app-welcome').append('<h1 id="first-app-welcome-header" data-localize="management-applications.create-first-app-title"></h1>');
1328+
$('#first-app-welcome').append('<p id="first-app-description" data-localize="management-applications.create-first-app-description"></p>');
1329+
$('#content > div.widget').addClass('widget-first-app-state');
1330+
$('#content > div.widget').css({'width': width / (3) + 'px'});
1331+
$('#first-app-welcome').css({'width': width / (3.5) + 'px', 'margin-left': '10%'});
1332+
1333+
$('#add-new-app').hide();
1334+
// make visible first app form
1335+
$('#add-first-app').css({'display': 'block'});
1336+
}
1337+
1338+
/**
1339+
* make things normal after first app create process
1340+
*/
1341+
function afterFirstApp() {
1342+
$("#sidebar").removeClass("hidden");
1343+
$("#app-navigation").css({'opacity': '1', 'pointer-events': 'auto'});
1344+
$("#hide-sidebar-button").show();
1345+
$('#app-management-bar').show();
1346+
var widthOfSidebar = $('#sidebar').width();
1347+
$('#content-container').css({'margin-left': widthOfSidebar + 'px'});
1348+
1349+
$('#first-app-welcome').remove();
1350+
$('#add-first-app').hide();
1351+
$('#content > div.widget').removeClass('widget-first-app-state');
1352+
1353+
$('#add-first-app').css({'display': 'none'});
1354+
$('#top-bar > div.logo-container > a').attr('href', '/dashboard#/');
1355+
$('#top-bar > div.right-menu > div:nth-child(1)').css({'opacity': '1', 'pointer-events': 'auto'});
1356+
store.set('first_app', false);
1357+
}
1358+
13071359
/** App management initialization function
13081360
* @param {string} app_id - application id
13091361
* @returns {boolean} false - if no apps
13101362
*/
13111363
function initAppManagement(app_id) {
13121364
if (jQuery.isEmptyObject(countlyGlobal.apps)) {
13131365
showAdd();
1314-
$("#no-app-warning").show();
1366+
firstApp();
13151367
return false;
13161368
}
13171369
else if (jQuery.isEmptyObject(countlyGlobal.admin_apps)) {
@@ -1394,12 +1446,12 @@ window.ManageAppsView = countlyView.extend({
13941446
for (var i = 0; i < appTimezone.z.length; i++) {
13951447
for (var tzone in appTimezone.z[i]) {
13961448
if (appTimezone.z[i][tzone] === countlyGlobal.apps[app_id].timezone) {
1397-
var appEditTimezone = $("#app-edit-timezone").find(".read"),
1449+
var appEditTimezone = store.get('first_app') ? $("#first-app-edit-timezone").find(".read") : $("#app-edit-timezone").find(".read"),
13981450
appCountryCode = countlyGlobal.apps[app_id].country;
13991451
appEditTimezone.find(".flag").css({"background-image": "url(" + countlyGlobal.cdn + "images/flags/" + appCountryCode.toLowerCase() + ".png)"});
14001452
appEditTimezone.find(".country").text(appTimezone.n);
14011453
appEditTimezone.find(".timezone").text(tzone);
1402-
initCountrySelect("#app-edit-timezone", appCountryCode, tzone, appTimezone.z[i][tzone]);
1454+
store.get('first_app') ? initCountrySelect("#first-app-edit-timezone", appCountryCode, tzone, appTimezone.z[i][tzone]) : initCountrySelect("#app-edit-timezone", appCountryCode, tzone, appTimezone.z[i][tzone]);
14031455
break;
14041456
}
14051457
}
@@ -1542,8 +1594,8 @@ window.ManageAppsView = countlyView.extend({
15421594
for (prop in country.z[0]) {
15431595
$(parent + " #selected").show();
15441596
$(parent + " #selected").text(prop);
1545-
$(parent + " #app-timezone").val(country.z[0][prop]);
1546-
$(parent + " #app-country").val(countryCode);
1597+
store.get('first_app') ? $(parent + " #first-app-timezone").val(country.z[0][prop]) : $(parent + " #app-timezone").val(country.z[0][prop]);
1598+
store.get('first_app') ? $(parent + " #first-app-country").val(countryCode) : $(parent + " #app-country").val(countryCode);
15471599
$(parent + " #country-select .text").html("<div class='flag' style='background-image:url(" + countlyGlobal.cdn + "images/flags/" + countryCode.toLowerCase() + ".png)'></div>" + country.n);
15481600
}
15491601
}
@@ -1556,8 +1608,8 @@ window.ManageAppsView = countlyView.extend({
15561608
}
15571609
}
15581610

1559-
$(parent + " #app-timezone").val(timezone);
1560-
$(parent + " #app-country").val(countryCode);
1611+
store.get('first_app') ? $(parent + " #first-app-timezone").val(timezone) : $(parent + " #app-timezone").val(timezone);
1612+
store.get('first_app') ? $(parent + " #first-app-country").val(countryCode) : $(parent + " #app-country").val(countryCode);
15611613
$(parent + " #country-select .text").html("<div class='flag' style='background-image:url(" + countlyGlobal.cdn + "images/flags/" + countryCode.toLowerCase() + ".png)'></div>" + country.n);
15621614
$(parent + " #timezone-select .text").text(timezoneText);
15631615
$(parent + " #timezone-select").show();
@@ -1569,7 +1621,7 @@ window.ManageAppsView = countlyView.extend({
15691621
selectedItem.data("value", $(this).data("value"));
15701622
});
15711623
$(parent + " #timezone-items .item").click(function() {
1572-
$(parent + " #app-timezone").val($(this).data("value"));
1624+
store.get('first_app') ? $(parent + " #first-app-timezone").val($(this).data("value")) : $(parent + " #app-timezone").val($(this).data("value"));
15731625
});
15741626
}
15751627

@@ -1584,8 +1636,8 @@ window.ManageAppsView = countlyView.extend({
15841636
for (prop2 in timezones[attr].z[0]) {
15851637
$(parent + " #selected").show();
15861638
$(parent + " #selected").text(prop2);
1587-
$(parent + " #app-timezone").val(timezones[attr].z[0][prop2]);
1588-
$(parent + " #app-country").val(attr);
1639+
store.get('first_app') ? $(parent + " #first-app-timezone").val(timezones[attr].z[0][prop2]) : $(parent + " #app-timezone").val(timezones[attr].z[0][prop2]);
1640+
store.get('first_app') ? $(parent + " #first-app-country").val(attr) : $(parent + " #app-country").val(attr);
15891641
}
15901642
}
15911643
else {
@@ -1597,22 +1649,22 @@ window.ManageAppsView = countlyView.extend({
15971649
if (i === 0) {
15981650
$(parent + " #timezone-select").find(".text").text(prop2);
15991651
firstTz = timezones[attr].z[0][prop2];
1600-
$(parent + " #app-country").val(attr);
1652+
store.get('first_app') ? $(parent + " #first-app-country").val(attr) : $(parent + " #app-country").val(attr);
16011653
}
16021654

16031655
timezoneSelect.append("<div data-value='" + timezones[attr].z[i][prop2] + "' class='item'>" + prop2 + "</div>");
16041656
}
16051657
}
16061658

16071659
$(parent + " #timezone-select").show();
1608-
$(parent + " #app-timezone").val(firstTz);
1660+
store.get('first_app') ? $(parent + " #first-app-timezone").val(firstTz) : $(parent + " #app-timezone").val(firstTz);
16091661
$(parent + " .select-items .item").click(function() {
16101662
var selectedItem = $(this).parents(".cly-select").find(".text");
16111663
selectedItem.html($(this).html());
16121664
selectedItem.data("value", $(this).data("value"));
16131665
});
16141666
$(parent + " #timezone-items .item").click(function() {
1615-
$(parent + " #app-timezone").val($(this).data("value"));
1667+
store.get('first_app') ? $(parent + " #first-app-timezone").val($(this).data("value")) : $(parent + " #app-timezone").val($(this).data("value"));
16161668
});
16171669
}
16181670
});
@@ -1728,7 +1780,7 @@ window.ManageAppsView = countlyView.extend({
17281780
}
17291781

17301782
initAppManagement(appId);
1731-
initCountrySelect("#app-add-timezone");
1783+
store.get('first_app') ? initCountrySelect("#first-app-add-timezone") : initCountrySelect("#app-add-timezone");
17321784

17331785
$("#clear-app-data").click(function() {
17341786
if ($(this).hasClass("active")) {
@@ -2049,43 +2101,44 @@ window.ManageAppsView = countlyView.extend({
20492101
$(".new-app-name").text(newAppName);
20502102
});
20512103

2052-
$("#save-app-add").click(function() {
2104+
var saveAppBtn = store.get('first_app') ? '#save-first-app-add' : '#save-app-add';
20532105

2106+
$(saveAppBtn).click(function() {
20542107
if ($(this).hasClass("disabled")) {
20552108
return false;
20562109
}
20572110

2058-
var appName = $("#app-add-name").val(),
2059-
type = $("#app-add-type").data("value") + "",
2060-
category = $("#app-add-category").data("value") + "",
2061-
timezone = $("#app-add-timezone #app-timezone").val(),
2062-
country = $("#app-add-timezone #app-country").val();
2111+
var appName = store.get('first_app') ? $("#first-app-add-name").val() : $("#app-add-name").val(),
2112+
type = store.get('first_app') ? $('#first-app-add-type').data('value') + "" : $("#app-add-type").data("value") + "",
2113+
category = store.get('first_app') ? $("#first-app-add-category").data("value") + "" : $("#app-add-category").data("value") + "",
2114+
timezone = store.get('first_app') ? $("#first-app-add-timezone #first-app-timezone").val() : $("#app-add-timezone #app-timezone").val(),
2115+
country = store.get('first_app') ? $("#first-app-add-timezone #first-app-country").val() : $("#app-add-timezone #app-country").val();
20632116

20642117
$(".required").fadeOut().remove();
20652118
var reqSpan = $("<span>").addClass("required").text("*");
20662119

20672120
if (!appName) {
2068-
$("#app-add-name").after(reqSpan.clone());
2121+
store.get('first_app') ? $("#first-app-add-name").after(reqSpan.clone()) : $("#app-add-name").after(reqSpan.clone());
20692122
}
20702123

20712124
if (!type) {
2072-
$("#app-add-type").parents(".cly-select").after(reqSpan.clone());
2125+
store.get('first_app') ? $("#first-app-add-type").parents(".cly-select").after(reqSpan.clone()) : $("#app-add-type").parents(".cly-select").after(reqSpan.clone());
20732126
}
20742127

20752128
/*if (!category) {
20762129
$("#app-add-category").parents(".cly-select").after(reqSpan.clone());
20772130
}*/
20782131

20792132
if (!timezone) {
2080-
$("#app-add-timezone #app-timezone").after(reqSpan.clone());
2133+
store.get('first_app') ? $("#first-app-add-timezone #first-app-timezone").after(reqSpan.clone()) : $("#app-add-timezone #app-timezone").after(reqSpan.clone());
20812134
}
20822135

20832136
if ($(".required").length) {
20842137
$(".required").fadeIn();
20852138
return false;
20862139
}
20872140

2088-
var ext = $('#add-app-image-form').find("#app_add_image").val().split('.').pop().toLowerCase();
2141+
var ext = store.get('first_app') ? $('#add-first-app-image-form').find("#first-app_add_image").val().split('.').pop().toLowerCase() : $('#add-app-image-form').find("#app_add_image").val().split('.').pop().toLowerCase();
20892142
if (ext && $.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) === -1) {
20902143
CountlyHelpers.alert(jQuery.i18n.map["management-applications.icon-error"], "red");
20912144
return false;
@@ -2101,7 +2154,9 @@ window.ManageAppsView = countlyView.extend({
21012154
country: country
21022155
};
21032156

2104-
$("#add-new-app .app-write-settings").each(function() {
2157+
var appWriteSettings = store.get('first_app') ? $("#add-first-app .app-write-settings") : $("#add-new-app .app-write-settings");
2158+
2159+
appWriteSettings.each(function() {
21052160
var id = $(this).data('id');
21062161
if (app.appSettings[id] && app.appSettings[id].toSave) {
21072162
app.appSettings[id].toSave(null, args, this);
@@ -2125,6 +2180,7 @@ window.ManageAppsView = countlyView.extend({
21252180
dataType: "jsonp",
21262181
success: function(data) {
21272182

2183+
afterFirstApp();
21282184
var sidebarApp = $("#sidebar-new-app>div").clone();
21292185

21302186
countlyGlobal.apps[data._id] = data;
@@ -2139,7 +2195,7 @@ window.ManageAppsView = countlyView.extend({
21392195
newApp.removeAttr("id");
21402196

21412197
if (!ext) {
2142-
$("#save-app-add").removeClass("disabled");
2198+
$("#save-first-app-add").removeClass("disabled");
21432199
sidebarApp.find(".name").text(data.name);
21442200
sidebarApp.data("id", data._id);
21452201
sidebarApp.data("key", data.key);

‎frontend/express/public/localization/dashboard/dashboard.properties

+2
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,8 @@ management-applications.plugins.saved.nothing = No changes have been applied to
463463
management-applications.plugins.saved.title = Plugin configuration
464464
management-applications.plugins.saved = Changes saved successfully!
465465
management-applications.plugins.error.server = Unknown server error
466+
management-applications.create-first-app-title = Let's add your first application.
467+
management-applications.create-first-app-description = After adding your first application you'll be ready to start collecting data.
466468

467469
#management-users
468470
management-users.create-new-user = Create a new user

‎frontend/express/public/localization/dashboard/dashboard_en.properties

+2
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,8 @@ management-applications.delete-admin = Only administrators of an application can
217217
management-applications.icon-error = Only jpg, png and gif image formats are allowed
218218
management-applications.no-app-warning = In order to start collecting data you need to add an application to your account.
219219
management-applications.first-app-message2 = Great! You can now embed Countly SDK into your application and start viewing your stats instantly. Don't forget to get your App Key from above.
220+
management-applications.create-first-app-title = Let's add your first application.
221+
management-applications.create-first-app-description = After adding your first application you'll be ready to start collecting data.
220222

221223
#management-users
222224
management-users.create-new-user = Create a new user

‎frontend/express/public/stylesheets/main.css

+66
Original file line numberDiff line numberDiff line change
@@ -2496,3 +2496,69 @@ h4 + .mgmt-plugins-row {
24962496
margin-left:10px;
24972497

24982498
}
2499+
2500+
#first-app-welcome-header { font-family: Ubuntu; font-size: 36px; font-weight: normal; color:black; }
2501+
#first-app-description { color: #636363; font-size:18px; }
2502+
#add-first-app { display: none; background-color: white; padding: 30px 60px 30px 60px; border-radius: 2px; border:1px solid #dbdbdb;}
2503+
#first-app-welcome { float: left;margin-top: 15%;padding-top: 1%;}
2504+
.add-app-input-wrapper {padding:5px;margin-bottom:5px;}
2505+
.add-app-input-label {
2506+
display: inline-block;
2507+
width:50%;
2508+
font-size: 14px;
2509+
color: #2fa732;
2510+
margin-bottom:5px;
2511+
}
2512+
.add-app-input-text {
2513+
width: calc(100% - 10px);
2514+
padding: 8px 5px 8px 5px;
2515+
font-size: 12px;
2516+
font-family: 'Ubuntu';
2517+
border-radius: 2px;
2518+
border: 1px solid #DBDBDB;
2519+
outline: none;
2520+
}
2521+
.add-app-input-select {
2522+
width: 100%;
2523+
font-size: 12px;
2524+
font-family: 'Ubuntu';
2525+
border-radius: 2px;
2526+
border: 1px solid #DBDBDB;
2527+
outline: none;
2528+
}
2529+
.add-app-input-optional-text {
2530+
font-size: 13px;
2531+
color: #636363a8;
2532+
text-align: right;
2533+
display: inline-block;
2534+
width: 50%;
2535+
}
2536+
.add-first-app-button {
2537+
background-color: #2FA732;
2538+
color:white;
2539+
padding:8px 0px 8px 0px;
2540+
width: 100%;
2541+
display: block;
2542+
text-align: center;
2543+
border:none !important;
2544+
-webkit-border-radius: 2px;
2545+
-moz-border-radius: 2px;
2546+
border-radius: 2px;
2547+
cursor:pointer;
2548+
margin-top:5px;
2549+
}
2550+
.add-first-app-button:hover {
2551+
color:white !important;
2552+
background-color:#2f9732 !important
2553+
}
2554+
.add-app-checkbox {
2555+
display: inline-block;
2556+
}
2557+
#populate-after-app-description {
2558+
font-size:12px;
2559+
color:#636363;
2560+
}
2561+
.widget-first-app-state {
2562+
float:left;
2563+
margin-top:10%;
2564+
}

0 commit comments

Comments
 (0)