ayatmaulana/postgree-materialized-view-generator.html

## postgree-materialized-view-generator.html

<!DOCTYPE html>
<html>
<head>
	<title>Generator</title>
</head>
<body>
	<form id="form" >
		<div>
			<label>materialized view name</label>
			<input type="text" name="mt_name">
		</div>
		<div>
			<label>materialized view query</label>
			<textarea  name="mt_query"></textarea>
		</div>
		<div>
			<label>function refresh materialized view name</label>
			<input type="text" name="pf_name">
		</div>
		<div>
			<label>trigger name</label>
			<input type="text" name="tg_name">
		</div>
		<div>
			<label>trigger on table</label>
			<input type="text" name="tg_target">
		</div>
		<div>
			<button id="exec">Hajar Mang</button>
			<button id="reset" type="reset">Reset</button>
		</div>
	</form>

	<div>
		<textarea id="output" style="width:100%; height: 40vh"></textarea>

	</div>


	<script type="text/javascript">
		var template =
`
-- craete materialized view called '%mt_name%'
CREATE MATERIALIZED VIEW %mt_name%
AS
	%mt_query% ;

-- create refresh function %pf_name%
CREATE OR REPLACE FUNCTION %pf_name%()
RETURNS TRIGGER LANGUAGE PLPGSQL
AS $$
BEGIN
    REFRESH MATERIALIZED VIEW %mt_name%;
    RETURN NULL;
END $$;


-- create trigger %tg_name% when %tg_target% insert/update/delete
CREATE TRIGGER %tg_name%
  AFTER INSERT OR UPDATE OR DELETE
  ON %tg_target%
  FOR EACH STATEMENT
  EXECUTE PROCEDURE %pf_name%();
`

		HTMLElement.prototype.serialize = function(){
		    var obj = {};
		    var elements = this.querySelectorAll( "input, select, textarea" );
		    for( var i = 0; i < elements.length; ++i ) {
		        var element = elements[i];
		        var name = element.name;
		        var value = element.value;

		        if( name ) {
		            obj[ name ] = value;
		        }
		    }
		    return obj;
		}

		var form = document.querySelector('form')
		var btn = document.getElementById('exec')
		var out = document.getElementById('output')

		btn.addEventListener('click', function(e){
			out.value = ''
			e.preventDefault()
			var data = form.serialize()

			var res = template
			for (i in data){
				res = res.replace(new RegExp(`%${i}%`, 'g'), data[i])
				console.log(`%${i}%`, data[i])
			}
			out.value = res
		})

	</script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Generator</title>
	</head>
	<body>
	<form id="form" >
	<div>
	<label>materialized view name</label>
	<input type="text" name="mt_name">
	</div>
	<div>
	<label>materialized view query</label>
	<textarea name="mt_query"></textarea>
	</div>
	<div>
	<label>function refresh materialized view name</label>
	<input type="text" name="pf_name">
	</div>
	<div>
	<label>trigger name</label>
	<input type="text" name="tg_name">
	</div>
	<div>
	<label>trigger on table</label>
	<input type="text" name="tg_target">
	</div>
	<div>
	<button id="exec">Hajar Mang</button>
	<button id="reset" type="reset">Reset</button>
	</div>
	</form>

	<div>
	<textarea id="output" style="width:100%; height: 40vh"></textarea>

	</div>


	<script type="text/javascript">
	var template =
	`
	-- craete materialized view called '%mt_name%'
	CREATE MATERIALIZED VIEW %mt_name%
	AS
	%mt_query% ;

	-- create refresh function %pf_name%
	CREATE OR REPLACE FUNCTION %pf_name%()
	RETURNS TRIGGER LANGUAGE PLPGSQL
	AS $$
	BEGIN
	REFRESH MATERIALIZED VIEW %mt_name%;
	RETURN NULL;
	END $$;


	-- create trigger %tg_name% when %tg_target% insert/update/delete
	CREATE TRIGGER %tg_name%
	AFTER INSERT OR UPDATE OR DELETE
	ON %tg_target%
	FOR EACH STATEMENT
	EXECUTE PROCEDURE %pf_name%();
	`

	HTMLElement.prototype.serialize = function(){
	var obj = {};
	var elements = this.querySelectorAll( "input, select, textarea" );
	for( var i = 0; i < elements.length; ++i ) {
	var element = elements[i];
	var name = element.name;
	var value = element.value;

	if( name ) {
	obj[ name ] = value;
	}
	}
	return obj;
	}

	var form = document.querySelector('form')
	var btn = document.getElementById('exec')
	var out = document.getElementById('output')

	btn.addEventListener('click', function(e){
	out.value = ''
	e.preventDefault()
	var data = form.serialize()

	var res = template
	for (i in data){
	res = res.replace(new RegExp(`%${i}%`, 'g'), data[i])
	console.log(`%${i}%`, data[i])
	}
	out.value = res
	})

	</script>
	</body>
	</html>