vp.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="vpmanifest.json">
<link rel="icon" href="vp.png">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://accounts.google.com/gsi/client"></script>

<style>
body {
	font-family: Arial;
	margin: 0;
	min-width: 200px;
	min-height: 200px;
	--bannerheight: 2.6em;
}
#banner {
	display: flex;
	height: var(--bannerheight);
	font-family: Roboto;
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}
#banner .panel {
	display: flex;
	align-items: center;
}
#banner .panel.middle {
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
#banner .panel.right {
	justify-content: end;
}
#banner #bantxt {
	font-weight: 800;
	white-space: nowrap;
}
.contentbox {
	height: calc(100vh - var(--bannerheight));
}
#planner {
	border: none;
	outline: none;
}
#settings {
	overflow: auto;
	padding: 0 5% 3em 5%;
	box-sizing: border-box;
}
#settings h4 {
	margin-top: 3em;
}
#settings .subsection {
	margin-left: 2em;
}
#settings .permission {
	vertical-align: sub;
}
#settings .granted {
	color: green;
}
#settings .denied {
	color: red;
}
#settings input[type=number] {
	width: 4em;
}
#settings .monthnames {
	width: 30em;
}
.material-icons {
	font-size: 1.25em;
	padding: 0.1em;
	margin: 0.2em;
}

#banner {background-color: hsl(0,0%,85%); color: hsl(0,0%,30%);}
#banner .toolbtn {color: hsl(0,0%,40%);}
#banner .toolbtn:hover {background-color: hsl(0,0%,75%);}
#banner .toolbtn.checked {color: hsl(0,0%,10%);}
#settings {background-color: hsl(0,0%,95%); color: black;}
</style>

<span ng-if="vp.gridview.darkmode.checked">
	<style>
	body {background-color: hsl(0,0%,25%); color: hsl(0,0%,80%);}
	#banner {background-color: hsl(0,0%,8%); color: unset;}
	#banner .toolbtn {color: hsl(0,0%,60%);}
	#banner .toolbtn:hover {background-color: hsl(0,0%,30%);}
	#banner .toolbtn.checked {color: hsl(0,0%,90%);}
	#settings {background-color: hsl(0,0%,80%);}
	</style>
</span>
</head>

<body ng-app="vpApp" ng-controller="vpController as vpapp" ng-cloak>
<title ng-bind="vp.appdata.title">Loading...</title>

<div id="banner">
	<div class="panel" ng-show="vpapp.show.planner">
		<div class="toolbtn material-icons" title="Column" ng-click="vpgrid.onclickColumn()" ng-class="vp.gridview.column">view_column</div>
		<div class="toolbtn material-icons" title="List" ng-click="vpgrid.onclickList()" ng-class="vp.gridview.list">view_list</div>
		<div class="toolbtn material-icons" title="Expand" ng-click="vpgrid.onclickExpand()" ng-class="vp.gridview.expand">calendar_view_day</div>
		<div class="toolbtn material-icons" title="Dark Mode" ng-click="vpgrid.onclickDarkMode()" ng-class="vp.gridview.darkmode">dark_mode</div>
	</div>
	<div class="panel middle">
		<div id="bantxt">{{vp.appdata.title}}</div>
	</div>
	<div class="panel right" ng-show="vpapp.show.planner">
		<div class="toolbtn material-icons" title="Sync" ng-click="vpgrid.onclickSync($event)">refresh</div>
		<div class="toolbtn material-icons" title="Continue (Ctrl+Enter)" ng-click="vpgrid.onclickContinue()">sync_alt</div>
		<div class="toolbtn material-icons" title="Print" ng-click="vpgrid.onclickPrint()">print</div>
		<div class="toolbtn material-icons" title="Settings" ng-click="vpapp.onclickSettings()">settings</div>
	</div>
	<div class="panel right" ng-show="vpapp.show.settings">
		<div class="toolbtn material-icons" title="Close" ng-show="vpapp.form.$pristine" ng-click="vpapp.onclickCancel()">close</div>
		<div class="toolbtn material-icons" title="Save" ng-hide="vpapp.form.$pristine || !vp.permissions.drive_appdata" ng-click="vpapp.onclickSave()">backup</div>
		<div class="toolbtn material-icons" title="Cancel" ng-hide="vpapp.form.$pristine" ng-click="vpapp.onclickCancel()">cancel</div>
	</div>
</div>

<vp-grid id="planner" class="contentbox" ng-show="vpapp.show.planner" tabIndex="1"></vp-grid>

<div id="settings" class="contentbox" ng-show="vpapp.show.settings">
	<h4>Account</h4>
	<div class="subsection">
		<p>
			<div ng-show="vp.permissions.view_calendars"><span class="material-icons permission granted">verified_user</span>visual-planner has permission to view your calendars.</div>
			<div ng-hide="vp.permissions.view_calendars"><span class="material-icons permission denied">warning</span>visual-planner does not have permission to view your calendars and cannot display any of your calendar events.</div>
		</p>
		<p>
			<div ng-show="vp.permissions.drive_appdata"><span class="material-icons permission granted">verified_user</span>visual-planner has permission to manage its own application data in your Google Drive.</div>
			<div ng-hide="vp.permissions.drive_appdata"><span class="material-icons permission denied">warning</span>visual-planner does not have permission to manage its own application data in your Google Drive and cannot save your settings.</div>
		</p>
		<p><a href="https://myaccount.google.com/permissions" target="_blank">Manage Permissions</a></p>
		<p><a href="https://drive.google.com/drive/my-drive" target="_blank">Manage Application Data</a>  (Drive > Settings > Manage Apps)</p>
	</div>
	<form name="vpapp.form" novalidate>
	<h4>View</h4>
	<div class="subsection">
		<p><input ng-model="vp.appdata.title">
			Planner title.
		</p>
		<p><select ng-model="vp.appdata.month_count" ng-options="x for (x, y) in vpapp.month_count_options"></select>
			Number of months to display.  More can be scrolled into view using the mouse wheel or cursor keys.
		</p>
		<p><select ng-model="vp.appdata.scroll_buffer" ng-options="x for (x, y) in vpapp.scroll_buffer_options"></select>
			Scroll buffer.
		</p>
		<p><input ng-model="vp.appdata.auto_scroll" type="checkbox">
			Auto-scroll to current month.  If not selected, the view will always start at the beginning of the year.
		</p>
		<div class="subsection">
			<p><input ng-model="vp.appdata.auto_scroll_offset" type="number" min="-12" max="12">
				Auto-scroll offset.  For example, -2 will cause the date range to start from two months ago, 0 will start with the current month.
			</p>
			<p><input ng-model="vp.appdata.first_month" type="number" min="1" max="12">
				First month of year.
			</p>
		</div>
		<p><input ng-model="vp.appdata.hide_scrollbars" type="checkbox">
			Hide scrollbars.
		</p>
		<p><input ng-model="vp.appdata.same_row_height" type="checkbox">
			Make all rows the same height.
		</p>
		<p><input ng-model="vp.appdata.align_weekends" type="checkbox">
			Align weekends.
		</p>
		<p><input ng-model="vp.appdata.weekends">
			Weekends.  (0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat)
		</p>
		<p><input ng-model="vp.appdata.first_day_of_week" type="number" min="0" max="6">
			First day of week.  (0-6)
		</p>
		<p><input ng-model="vp.appdata.font_scale_pc" type="number" min="50" max="200">
			% Font scale.
		</p>
		<p><input ng-model="vp.appdata.past_opacity" type="number" min="0" max="1">
			Opacity of past months.  (1 = opaque)
		</p>
		<p><input class="monthnames" ng-model="vp.appdata.month_names">
			Month names.
		</p>
	</div>
	<h4>Events</h4>
	<div class="subsection">
		<div ng-hide="true">
		<p><input ng-model="vp.appdata.proportional_events" type="checkbox">
			Display event markers in proportion to their actual duration.  Events outside the visible event range will not be shown.
		</p>
		<div class="subsection">
			<p><input ng-model="vp.appdata.proportional_start_hour" type="number" min="0" max="24">
				Start hour of visible event range.
			</p>
			<p><input ng-model="vp.appdata.proportional_end_hour" type="number" min="0" max="24">
				End hour of visible event range.
			</p>
		</div>
		</div>
		<p><input ng-model="vp.appdata.show_timed_events" type="checkbox">
			Show 'timed' events.
		</p>
		<p><input ng-model="vp.appdata.show_all_day_events" type="checkbox">
			Show 'all day' events.
		</p>
		<div class="subsection">
			<p><input ng-model="vp.appdata.single_day_as_multi_day" type="checkbox">
				Single day as multi-day (vertical bar).
			</p>
		</div>
		<p><input ng-model="vp.appdata.text_on_singleday_events" type="checkbox">
			Show text on single-day events.
		</p>
		<p><input ng-model="vp.appdata.text_on_multiday_events" type="checkbox">
			Show text on multi-day events.
		</p>
		<p><input ng-model="vp.appdata.scale_of_multiday_events" type="number">
			% Scale of multi-day events.
		</p>
		<p><select ng-model="vp.appdata.event_background"  ng-options="x for (x, y) in vpapp.event_background_options"></select>
			Event background.
		</p>
	</div>
	</form>
	<h4></h4>
	<p><a href="https://visual-planner.github.io" target="_blank">visual-planner home</a></p>
	<p><a href="https://groups.google.com/group/visual-planner-discuss" target="_blank">visual-planner discussion group</a></p>
</div>

<script src="vplib.js" type='text/javascript'></script>

<script type='text/javascript'>
angular.module("vpApp").controller("vpController", function($scope, vpConfiguration) {
	this.month_count_options = {"3": 3, "4": 4, "6": 6, "8": 8, "10": 10, "12": 12};
	this.scroll_buffer_options = {"No scrolling": 0, "3": 3, "6": 6, "12": 12};
	this.event_background_options = {"Calendar": "cal", "Event": "evt", "White": "white", "Transparent": ""};
	this.show = {planner: true};
	$scope.vp.gridoptions = {shownavbar: true, showcalbar: true, redboxtoday: true, enablelinks: true};

	gapi.load('client', vpConfiguration.Load);

	this.onclickSettings = function() {
		this.form.$setPristine(true);
		this.show = {settings: true};
	}

	this.onclickCancel = function() {
		vpConfiguration.revertAppdata();
		this.show = {planner: true};
	}

	this.onclickSave = function() {
		vpConfiguration.saveAppData();
		this.show = {planner: true};
		$scope.vpgrid.reset();
	}
});
</script>

</body>
</html>